JS
文章平均质量分 55
董厂长
I'm looking for opportunities. If you are interested, please send me a message.
展开
-
打印HTML页面,表格元素被截断的解决方案
你的答案是正确的,我现在有一个附加的需求,让所有的表格都自适应宽度。我的要求是,对于所有的table元素,我希望宽度自适应,并且里面的每个单元格都是平均分配宽度的。我的问题是:我要做一个打印HTML页面功能,这个页面的表格是动态生成的,具有多个表格,现在面临的问题是,在第一页末尾无法放下这一整个表格,如何做到将这个表格分。现在,代码会将表格之前其他 DOM 元素的高度累加,并与表格高度一起比较来决定是否需要对表格进行分割。你是希望计算表格之前其他 DOM 元素的高度,而不仅仅是表格上半部分的高度。原创 2023-12-06 15:38:44 · 1803 阅读 · 0 评论 -
在vue或者react或angular中,模板表达式中的箭头函数是无效的吗?为什么无效?
出现此问题的背景:我在Angular项目中对一个标签属性绑定了一个箭头函数,编译报错。原创 2023-11-24 11:34:14 · 1157 阅读 · 0 评论 -
click.stop 阻止事件冒泡
这意味着,如果在一个嵌套的元素上使用了 `click.stop` 修饰符,那么当该元素被点击时,该元素上的处理函数会被触发,但是事件不会继续传播到父元素上。在上面的代码中,当用户点击“Click me”按钮时,只会触发该按钮上的处理函数,而不会触发父元素上的处理函数。在上面的代码中,当用户点击“Submit”按钮时,`submitForm` 方法会被调用,并且使用了 `prevent` 修饰符来阻止表单提交。`click` 和 `click.stop` 都是事件修饰符,用于处理鼠标点击事件。原创 2023-07-24 16:29:11 · 1199 阅读 · 0 评论 -
ngAfterViewInit( ) to early /// ngFor和异步网络请求导致无法选中目标元素的问题
我使用ngfor来循环出 网络请求的来的数据,但是这个请求是一个 Observable,当我在ngAfterInit中去获取的时候,尚未走到下一个事件循环中(这个事件循环就是网络请求后的赋值),此时查询到dom为null,那么当下一个事件循环后,dom被渲染且赋值,并且同步到html内。这时我对ngAfterInit()中的 querySelecter()方法套上一层 setTimeOut(),是最后执行的事件循环。原创 2023-07-18 22:36:05 · 823 阅读 · 0 评论 -
为什么event事件无法被序列化到本地存储
如果您需要在客户端和服务器之间传递事件数据,您可以将事件属性提取到一个普通的 JavaScript 对象中,然后将该对象序列化。好的,举个例子来说,假设您有一个鼠标单击事件的处理程序,您需要将事件数据发送到服务器以进行处理。您可以创建一个普通的 JavaScript 对象,将事件属性作为对象属性添加进去,然后将该对象序列化为 JSON 格式或其他格式。在这个例子中,我们将事件类型、目标元素的标签名以及鼠标位置提取到一个普通的 JavaScript 对象 `eventData` 中,并将其发送到服务器。原创 2023-07-18 22:11:00 · 649 阅读 · 0 评论 -
for(const item in myRecord); myRecord是一个Record<string,int>类型的数据,为什么这个item拿到的是string,而不是一个键值对
对象转换为一个由 [key, value] 数组组成的数组,并使用解构方式获取数组中的每个元素,从而得到了每个键值对。方法来检查每个属性是否为对象本身的属性,以避免意外访问到继承的属性。循环迭代一个对象时,它会迭代对象中可枚举的属性(包括继承而来的属性)。对应的是该对象中的每个键(即字符串类型),而不是键值对。循环迭代该对象时,每个键都被视为一个字符串类型。如果您想要遍历这个对象的所有键值对,可以使用。类型的数据中有多个键值对,您可以使用。类型的对象时,循环中的变量。类型的数据中,键的类型为。原创 2023-05-09 17:33:51 · 145 阅读 · 0 评论 -
微前端遇到的样式问题:Event 对象中的clientX, pageX
问题描述:本地环境调试时候获取鼠标的坐标位置,生产环境使用微前端,分别在顶部和左部添加了导航(相当于两个div),导致线上环境的鼠标坐标获取错误,多出来的距离是导航的宽高。暂时尚未解决微前端的中的此类问题,此博客待补充。原创 2023-02-06 16:37:19 · 109 阅读 · 0 评论 -
TypeScript类型谓词:is关键字 |可辨别联合类型x.kind
思考:平常对某value的用as断言为某种类型,但是as会出现不安全的问题,如果使用is对类型进行收窄,对代码的安全性更高。关键字一般用于函数返回值类型中,判断参数是否属于某一类型,并根据结果返回对应的布尔类型。实际工作中可能遇见的场景,对某个入参进行类型判断/类型收窄。因此当我们判断条件为。原创 2023-02-01 22:32:42 · 773 阅读 · 1 评论 -
搞搞清楚type和interface
记住一句话:基本上来说interface就是用面对象的方式,来描述type。接口是通过继承的方式来扩展,类型别名是通过 & 来扩展。interface出现的原因:面向对象的形式。接口可以自动合并,而类型别名不行。原创 2023-02-01 00:26:17 · 109 阅读 · 2 评论 -
JS中创建一个矩阵 / 多维数组
JS中没有创建矩阵 、多维数组的class。原创 2023-01-09 19:53:19 · 502 阅读 · 0 评论 -
type-challenges: easy-awaited | infer 应该如何使用
理解一下题目意思,你得解析出来promise的T的类型是什么,如果是联合类型,也需要解析出。4. 现在解决 测试用例的第三个,嵌套的promise,使用递归。infer的理解: 二元一次方程的 x,是一个未知的变量。类比到TS, infer x 是指一个未知的类型。2. 然后使用infer X 来设置一个未知的类型。6. 再处理一下非promise类型的参数。3. 然后返回结果, 三元表达式。1. extens限制类型。5 检查一下递归出口。原创 2023-01-08 00:14:21 · 409 阅读 · 0 评论 -
Type-challenges: tuple to object / union
r 显示的是:type r = readonly ["tesla", "model 3", "model X", "model Y"]typeof作用是:将js世界的东西转化为ts类型世界的内容,参与计算。意味着不能被更改,只能是这个值。2. 返回一个object。union的题的明天再写~const作用:定义为。3. 循环对数组赋值。原创 2023-01-03 21:57:18 · 531 阅读 · 0 评论 -
Type-challenges:00009-medium-deepReadonly
3. 递归的时候,需要判断递归的入口和出口,ts里面就用 extends来进行类型限制。简单描述一下,递归的将每个对象及其子对象变为readonly。虽然是medium,但是刷题顺序还是归为了简单题。同样的,先用JS+递归形式,实现一版,找到其逻辑。2. 对于sub-object,进行递归调用。来检索是否为sub-object。三元表达式来判断是否需要递归。原创 2022-12-29 10:52:07 · 355 阅读 · 0 评论 -
Type-challenges: readonly
2: 遍历一个对象(js遍历的是对象 ts遍历的是接口)4. 通过key来获取obj里面的值(ts中就是接口的值)做题的思路,先按照js的方式实现一遍(足够耐心)3: 加上 readonly 关键字。4. 加上readonly关键字。3. 通过key来获取接口的值。思路理完了,开始写ts。原创 2022-12-28 22:21:49 · 89 阅读 · 0 评论 -
Type Challenge的一些前置知识
有时候我们定义的泛型不想过于灵活或者说想继承某些类等,可以通过 extends 关键字添加泛型约束。代码中 infer R 就是声明一个变量来承载传入函数签名的返回值类型,简单说就是用它取到函数返回值的类型方便之后使用。最近还是在看Type Challenge的一些题,发现一步一个坑。extends一般都是用来继承,但是做题的时候他的用处是用来限制类型/泛型约束。在条件类型语句中,可以用 infer 声明一个类型变量并且对它进行使用。typeof 操作符可以用来获取一个变量声明或对象的类型。原创 2022-12-28 21:51:53 · 287 阅读 · 1 评论 -
TS学习:索引签名
这名字起的真是shi一样 😒,我还以为是什么深奥的东西。例如:假设你想确认存储在对象中任何内容都符合的结构你可以通过来实现。索引签名的名称(如:{ [index: string]: { message: string } }里的 index)除了可读性外,并没有任何意义。例如:如果有一个用户名,你可以使用,这有利于下一个开发者理解你的代码。索引签名支持两种:string 和 numbernumber。原创 2022-12-27 14:18:50 · 2333 阅读 · 4 评论 -
TS的Record与JS的Map的区别
1.maps比record灵活,maps可以任意添加key和value,record就不行,一旦定义了record,就只能使用定义里的字段,因此,可以认为record是。2.record在idea下有语法提示,maps如果不小心把key写错了,会导致运行的时候匹配或get出错。靠的是 clone 一个新的来赋值.最重要的一点,maps的key可以是任意数据类型,而record的key只能是原子。函数式提倡的东西. 对象创建后, 属性值就不可以修改了.Record 是 9.0 出来的. 先看看它的特色.原创 2022-12-26 15:11:38 · 2646 阅读 · 0 评论 -
chrome 展开对象,属性值消失/被更改的问题
因为 js对象赋值 只是引用地址赋值过去了,还是指向同一个 地址。lodash可以 : xxx.deepClone( )建议使用深拷贝一份当前值。原创 2022-12-21 17:32:44 · 249 阅读 · 0 评论 -
RXJS基础:函数柯里化 curry
1.延时计算,又叫惰性求值。柯里化后的 函数是分步执行的,前几次调用均返回一 个函数,累积传入的参数,最后调用才会 计算,起到延时计算的作用。如bind函 数,改变this指向但并不执行,只返回函。先完成部分传参, 创建新的函数返回,在需要的时候传入其余的参数调用执行。当多次调用同一个函数,并 且传递的参数绝大多数是相同的时候。提前将易变因素传参 定下来,生成一个更明确的应用函数。原创 2022-12-11 22:28:21 · 122 阅读 · 2 评论 -
Type-challehges learning: pick
最近真的是迷上了type-challenges。无法自拔 TS真是太香了!从类型定义的属性中,选取指定一组属性,返回一个新的类型定义。tips:在JS中我们操作的是对象,在TS中我们操作的类型。keyof T 用于获取所有key,即返回类型是联合类型。自己实现TS的pick。今天手写一个pick。原创 2022-11-23 22:55:27 · 325 阅读 · 2 评论 -
XML与JSON
JSON当mock数据,XML当种子文件。非必须,但是建议如此使用。(当然项目里seed文件还是用的JSON)最近在看前同事写的DFS解析XML文件的代码,上b站找找XML看了看,毕竟之前没用过。醍醐灌顶,也明白了为什么项目代码中用DFS生成数据了。2. 数据解析方面,JSON与JS交互更方便,开发更容易。1. 传输同样的报文,JSON体积小,传输速度快。4. 传输速度,JSON体积小,传输速度更快。3. 可读性,JSON可读性较xml差一些。JSON和XML都是数据传输的通用格式。原创 2022-11-17 23:22:39 · 605 阅读 · 0 评论 -
Recall:JS EventLoop
JS 是单线程的”指的是执行 JS 代码的线程只有一个,是浏览器提供的 JS 引擎线程(主线程)直观上看是主线程被堵塞 100ms,然后继续执行callback。回到事件环,事件环分离出一个线程处理异步任务,待完成后,又重新回到主线程,去执行回调函数。浏览器中还有定时器线程和 HTTP 请求线程等,这些线程主要不是来跑 JS 代码的。的,当 JS 需要执行异步任务时,浏览器会另外启动一个。优先级: 宏任务 > DOM渲染 > 微任务。也就是说每个宏任务都关联了一个微任务队列。原创 2022-11-09 14:58:03 · 398 阅读 · 0 评论 -
手写ngIf,使用视图容器引用ViewContainerRef和模板引用TemplateRef
此class会在初始化期间,调用 ngOnChanges方法,他接受SimpleChange 对象,根据表达式当前的值来判断是否显示当前的内容。对象用于管理视图容器,是视图的集合。视图就是 包含指令,绑定,表达式的HTML元素区域。视图的创建通过ViewContainerRef类提供的各种API来实现。写这篇博客的原有:虽然Angular官网有提到指令的使用,以及相关Ref的使用,但是对相关Ref并没有做出详细的解释。向用户显示 ng-temple 元素的内容,然后使用。,也没有提供相关的详细文档。原创 2022-11-07 15:14:41 · 307 阅读 · 0 评论 -
ngzorro的中文的排序
在使用ngzorro时候碰到的,对中文或者其他字符进行排序。此属性接受一个布尔值。true 代表接受服务端排序。数据量较多情况下建议把排序放在后端。的前面,后面,或者二者相同。返回一个数字表示是否。原创 2022-11-07 10:32:23 · 183 阅读 · 0 评论 -
RXJS:串联请求的使用
from的作用:axios返回的是一个promise,我们需要一个可观察对象,所以需要。switchMap 总是会抛弃前一个请求的结果,concatMap不会。pluck的作用:选择属性来发出,主要是用来提取嵌套的属性。很常见的场景,先获取用户的Token再获取用户信息。最后打印出的是最后一个数据流发出的数据。操作符把promise转为可观察对象。也是创建了一个可观察对象。原创 2022-11-03 15:31:32 · 682 阅读 · 0 评论 -
工作内常见报错问题排查及其解决方案
常见bug记录本,踩坑多才能成长原创 2022-10-09 15:49:28 · 255 阅读 · 0 评论 -
概念澄清:如何直接拿到promise的返回值
如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。await 等到了它要等的东西,一个 Promise 对象,或者其它值,然后呢?我不得不先说,await 是个运算符,用于组成表达式,await 表达式的运算结果取决于它等的东西。如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。async 函数返回的是一个。原创 2022-09-13 17:20:05 · 11108 阅读 · 2 评论 -
Angular: 变化检测策略Change Detection的比较
前置笔记:NGZORRO:一种Angular页面性能优化手段_董厂长的博客-CSDN博客事情是这样的,今天在看NGZORRO时候看见这么一句话。OnPush模式,性能卓越。🤔那我就来看看antdesgin是怎么做出性能优化的。所以“this.cdRef.markForCheck();”这句话只能引起一次变化检测,如要多次,则要多次的运行这句话,如果以上代码功能要改成3秒后开始计时,只要将this.timer == 3改成this.timer >= 3就行了。.........原创 2022-08-12 11:32:23 · 602 阅读 · 2 评论 -
RXJS解决NGZORRO下拉框组件漂移的问题
Subscription是一个对象,表示一种可被处置的资源,通常指代一个Observable流的执行过程。Subscription有一个重要的方法unsubscribe(),不需要参数,仅仅用来释放掉subscription实例所...问题描述:使用Angular+NGZORO时候,组件库的下拉框或时间选择框会出现滚动页面,然后漂移的问题。实际的想法是,滚动页面的时候,要么下拉框消失,要么随着页面滚动。那么想法就是,当用户滚动的时候会发出一个流stream,以此创建一个可观察对象observable。...原创 2022-08-11 09:38:21 · 584 阅读 · 2 评论 -
续:关于JS中代理Proxy的一些知识
董厂长的博客-CSDN博客背景:这两天准备优化表单代码,公司规定的是失焦校验。使用Ant desgin的表单前缀加了一个“PT”,此时的PT是一个icon。代理是对目标对象的抽象,尝试理解为c++的指针。对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。使用反射的原因:只有在运行时,才知道具体的参数是什么。默认情况下,所有对代理对象的操作,都会被反映到原对象上。...原创 2022-08-10 14:46:14 · 207 阅读 · 0 评论 -
NGZORRO:一种Angular页面性能优化手段
事情是这样的,今天在看NGZORRO时候看见这么一句话。OnPush模式,性能卓越。🤔那我就来看看antdesgin是怎么做出性能优化的。所以“this.cdRef.markForCheck();”这句话只能引起一次变化检测,如要多次,则要多次的运行这句话,如果以上代码功能要改成3秒后开始计时,只要将this.timer == 3改成this.timer >= 3就行了。...原创 2022-07-25 14:17:45 · 834 阅读 · 0 评论 -
Angular:input输入框获取不到焦点
解决方案:这边试了以下几种方法1.对input元素添加 autofocus属性,不生效2.使用angular指令,太烦了不想试3.模板变量获取元素,然后设置 element.focus( ) ,无效4.模板变量获取元素,然后设置 element.focus( ) ,放在settimeout中,进入下一轮事件循环,生效之后马上消失。最后:把 element.focus( ) 方法放在ngAfterViewInit() 钩子函数内。并且设置一个setTimeout( ). 前几种方式.原创 2022-07-22 15:36:07 · 1471 阅读 · 0 评论 -
RXJS概念的个人理解:响应式编程思想, 及其参照表(非常有用! )
Observables是多个值的惰性推送集合。它填补了下面表格中的空白首先理解pull和push。pull直接理解为使用者主动拿来用。push理解为数据发送者推送出去,使用者等待数据流动到,并且接受。那么observable就是多个值的推送合集,或者直白粗暴理解,多个promise的集合。.....................原创 2022-07-20 14:52:35 · 1205 阅读 · 0 评论 -
关于ZONE.js / 复习一下RXJS的subject
Zone.js将会对每一个异步操作创建一个task。一个task运行于一个Zone中。通常来说,在Angular应用中,每个task都会在“Angular”Zone中运行,这个Zone被称为NgZone。一个Angular应用中只存在一个AngularZone,而变更检测只会由运行于这个NgZone中的异步操作触发。......原创 2022-07-14 21:20:41 · 363 阅读 · 0 评论 -
数组变化,但是无法更新视图(原因和思考)
写代码时候遇到数组更新后,视图不更新。一般的解决方案是重新解构赋值。原因的话,其实一开始就想到了自己写Vue项目中遇到的问题。当时把annotations放到一个数组中,然后展现到视图层,让用户预览自己的所有pdf注释,然后遇到了注释数组更新,视图层不更新的问题。复习一下Vue2数据响应原理,( 注:Vue3响应式改成了Proxy听说Vue3响应式原理变成了Proxy_董厂长的博客-CSDN博客)官方的解释很清晰:当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue原创 2022-07-13 12:00:08 · 2227 阅读 · 0 评论 -
PDFProcessor新功能:不下载,直接预览pdf
2022/6/23 近期的一些计划,关于发布开源包到npm_董厂长的博客-CSDN博客最近的一些工作都是在搞pdf文件的处理,整合了各种各样的包(pdf.js, pdf-lib, downlaod.js...),以及自己写and抄了各种各样的工具函数(arrayBufferToFile, checkFileType, ArrayBufferToBase64...),熟悉了各种平常用不到接口(canvas, blob...)毕设只是对pdf上绘制canvas层做了一些研究,工作之后开始真正处理pdf了。不如做原创 2022-07-11 17:10:15 · 715 阅读 · 2 评论 -
Angular:失焦校验和失焦方法冲突的解决方案 事件循环
今天做项目中,一个input元素中同时添加了 失焦方法 和 失焦校验。今天发现偶发的会仅触发其中一个。和大佬同事讨论许久,发现可能是 二者其一 被另外一个冲掉了。如果触发了失焦校验,那么失焦方法就会失效。(偶发性)由于JavaScript为单线程,同一时间只能执行处理一个事件。解决方案1:setTimeOut 让另外一个失焦进入第二次的事件循环解决方案2:将click事件改为mousedown,让其优先于blur事件执行mousedown事件:当鼠标指针移动到元素上方,并按下鼠标按键时,原创 2022-07-07 17:56:40 · 1062 阅读 · 0 评论 -
Angular使用指令配合RXJS使用节流throttle
之前说起节流防抖,都是在事件内部用RXJS处理的(最开始写的是原生,设定计时器和开关)。后来看到别人把节流防抖放在 Angular 指令 Directives里,并且使用@output装饰器触发元素的指定事件。太妙了。...原创 2022-07-05 21:40:00 · 1034 阅读 · 3 评论 -
建议使用includes()代替indexOf()
之前写代码有这样一段逻辑:“判断返回的数组没用null值”于是乎:需要判断数字,很反人类。然后就去翻ES6标准入门,数组实例的 includes( )布尔值就直观多了。这是es6才引入的,主要目的是解决indexOf的一些缺点。1. 语义化问题,其返回值需要和 -1 比较,第一次使用无法直观理解2. 内部使用严格运算符 即 三等 === ,会导致对NaN的误判引发的思考:.........原创 2022-06-27 17:02:35 · 790 阅读 · 0 评论 -
2022/6/23 近期的一些计划,关于发布开源包到npm
最近的一些工作都是在搞pdf文件的处理,整合了各种各样的包(pdf.js, pdf-lib, downlaod.js...),以及自己写and抄了各种各样的工具函数(arrayBufferToFile, checkFileType, ArrayBufferToBase64...),熟悉了各种平常用不到接口(canvas, blob...)毕设只是对pdf上绘制canvas层做了一些研究,工作之后开始真正处理pdf了。不如做一些有意义的事情吧。基于已有的业务对代码进行抽象,封装成一个工具类,再整合一些通用的p原创 2022-06-23 23:22:54 · 198 阅读 · 0 评论