- 博客(68)
- 收藏
- 关注
RSS订阅原创 reduce()的使用案例
***/reduce 为数组中的每一个元素依次执行回调函数，接受四个参数：初始值 initialValue（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。参数：参数一： callback 函数（执行数组中每个值的函数，包含四个参数）：prev 必需 （上一次调用回调返回的值，或者是提供的初始值（initialValue））cur 必需（数组中当前被处理的元素）index 可选 （当前元素在数组中的索引）
2024-08-08 10:51:11
1026
原创 【性能优化】Web Worker介绍
Web Worker 是2008年h5提供的新功能，每一个新功能都是为了解决原有技术的的痛点，那么这个痛点是什么呢？
2024-06-18 15:21:40
859
转载 【性能优化】Web Worker介绍
但是随着前端的高速发展，前端承担着越来越多的功能，有时需要执行一些复杂的计算任务，但是JavaScript的单线程一旦执行某个耗时的任务，后面的任务都会阻塞，如果在前端能够做多线程的操作，那不就解决这个问题啦，于是，于是Web Worker就应运而生了。原因是，在 worker 内部，worker 是有效的全局作用域，相当于js环境中的window。使用构造器创建worker对象，参数是一个 JavaScript 文件——这个文件包含将在 worker 线程中运行的代码。worker 线程会被立即终止。
2024-06-18 15:14:16
44
原创 echarts图表自适应和其他问题
当我们切换左侧菜单展示效果的时候，右侧内容会对应变宽，但此时的 echarts 并不能执行自适应效果，这是因为切换菜单展示效果并没有触发 window.onresize，所以为解决类似此问题，我们可使用 element-resize-detector。data: chartData, //动态数据。//监听window窗体变化，更新echarts大小。//监听绑定的div大小变化，更新echarts大小。data: ["衬衫", "羊毛衫"],// 基于准备好的dom，初始化echarts实例。
2024-03-21 10:15:45
1291
原创 forEach方法跳出循环
正常的使用环境：如果是测试一个数组里的元素是否符合某条件，且需要返回一个布尔值则应该使用这两个方法。这里可用于跳出循环。但是在forEach中，使用break或者continue都会报错；
2024-01-04 10:49:29
4459
原创 Promise链式调用改写成async/await
await使得异步代码更像是同步代码，对串行的异步调用写起来更自然。await后面跟一个值或promise对象，如果是一个值，就直接返回；如果是一个promise对象，则接收promise对象成功后的返回值；promise解决了回调地狱的问题，把异步任务完成后的处理函数换个位置放：传给then方法，并支持链式调用，避免层层回调。首先，Promise链式调用和async/await都是用来解决异步调用层层嵌套的问题。await返回值，只关注成功的情况，所以一般需要try/catch来捕获异常。
2023-11-08 10:50:24
319
原创 前端内存泄漏和溢出的情况以及解决办法
程序运行时操作系统会分配相应的内存，如果不进行定时的清理内存的占用情况，内存占用越来越高，很容易造成页面卡顿，进程奔溃；如果程序在系统分配了内存空间后不再使用但是没有及时释放就会造成内存泄漏；程序向系统申请的内存空间超出了系统能给的，就造成了内存溢出。内存泄漏和溢出都会影响程序的性能。js不需要手动给变量申请内存，当我们在申明一个变量时，js会自动为其分配内存；当某个对象没有被引用会进行回收，最简单的垃圾回收机制是引用计数，当某个对象被引用的次数达到0时就会被回收。
2023-09-11 14:33:52
2671
原创 angular抛出 ExpressionChangedAfterItHasBeenCheckedError错误分析
当变更检测完成后又更改了表达式值时，Angular 就会抛出错误。Angular 只会在开发模式下抛出此错误。在下，Angular 在每次变更检测运行后都会执行一次附加检查，以确保绑定没有更改。这会在视图处于不一致状态时捕获错误。比如，如果某个方法或 getter 每次被调用时都会返回一个不同的值，或者某个子组件更改了其父组件上的值，就可能会发生这种情况。如果发生这两种情况，则表明变更检测是不稳定的。Angular 会抛出错误以确保数据始终正确地反映在视图中，从而防止 UI 行为不稳定或可能的无限循环。
2023-08-29 17:15:01
1460
原创 angular 报错Multiple components match node with tagname app-base-table
如果没有查到相同的选择器，说明你定义的选择器名称和第三方库中的选择器冲突，只需要把你本地组件的选择器名称修改即可。因为只能有一个与特定元素关联的组件，所以选择器必须是唯一的字符串，以防止 Angular 产生歧义。确保每个组件都有一个唯一的 CSS 选择器。这将确保 Angular 渲染你所期望的组件。该报错的意思是选择器冲突，也就是说存在两个或更多组件使用了相同的。使用错误消息中给出的元素名称在代码库中全局搜索使用相同。
2023-08-29 15:59:56
438
原创 使用 takeUntil 操作符管理 Angular 组件的订阅
总结对比下来，你会发现takeUntil操作符会清晰简洁很多，你只需要把加入到想要组件销毁时停止订阅的管道，即可统一管理。
2023-08-18 16:52:19
321
原创 angular注入方法providers
这种方式注册,不需要再@NgModule装饰器中写providers,而且在代码编译打包时,可以执行摇树优化，会移除所有没在应用中使用过的服务。推荐使用此种方式注册服务。hero.service.ts里面的@Injectable，删掉 {providedIn: 'root'},同2 hero.service.ts文件。providedIn: 'root' 告诉 Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式.xx.module.ts , 例如app.module.ts。
2023-08-15 11:36:42
1684
原创 angular 子组件ngOnChanges监听@input传入的输入属性
我们的要求是子组件监听父组件传入的值，而ngOnChanges的作用是当数据绑定输入属性的值发生变化时调用，正是我们所需要的。1.ngOnChanges只对@Input传入的属性发生变化时会调用。在进入主题之前，先了解一下angular的生命周期。子组件ts(与SimpleChange配合使用)生命周期钩子的作用及调用顺序。指令与组件共有的钩子。
2023-08-15 11:21:08
2014
原创 使用lodash给对象数组去重
根据数（对象）组中的id或者其他属性去重，或者对象中的所有属性值相同的去重。前端在对数据进行处理时，要善于使用工具库，提升效率。通过数组的some进行逐项判断；
2023-07-25 14:09:46
1353
原创 Angular中的装饰器
Angualr中的装饰器是一个函数，它将元数据添加到类、类成员(属性、方法)和函数参数bootstrap。@Ingject指定依赖关系的参数装饰器(通常用来注入被标记Injectable的类)imports 本模块声明的组件模板须要的类须要的类所在的其余模块 模块的导入声明。@Hostbinding 把宿主元素的属性(好比CSS类) 绑定到指令/组件的属性。(1).对于静态成员来讲是类的构造函数，对于实例成员是类的原型对像。(1).对于静态成员来讲是类的构造器，对于实例成员是类的原型对象。
2023-06-28 15:18:38
269
原创 Angular 父组件重新请求接口获取数据，使用@Input()传递数据，子组件没有更新视图问题
在 Angular 中，当父组件重新请求接口并获得新数据时，需要将这些新数据传递给子组件，并通知它们更新自己的视图。当数据发生更改时，子组件按照常理会自动更新视图。
2023-04-24 16:08:47
1018
原创 在Angular中通过Subject进行组件之间通讯
服务很简单，一个sender成员变量，用于发送消息：this.sender.next('消息');同时它也可以订阅:this.sender.subscribe(next:()=>{})；注意使用该服务进行通讯一定要为同一个MessageService，否则它们得到的是不同的sender。中，我们可以通过创建一个服务来为不同的组件之间提供通讯服务。而通讯的实现就是通过Subject。Subject既可以当sender也可以自我subscribe，并且可以被多个订阅者订阅。
2023-03-08 12:28:07
256
转载 纯CSS实现左右拖拽改变布局大小
后来研究发现，resize属性的拖拽bar和滚动条的拖拽bar是一个体系里面的东西，只需要对滚动条进行自定义，就能间接设置resize bar的尺寸。webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们可以将整个拉伸区域变成和容器一样高。浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们可以将整个拉伸区域变成和容器一样高。最后，我们的左右分栏采用自适应布局就能实现我们想要的效果。属性，如果一个元素的。
2023-03-02 15:39:26
995
原创 网站一秒变灰色，是怎么实现的
我们在网页上测试一下，按F12，开发者模式，选中最外层HTML标签，添加以上样式。实现方法其实很简单，就是给整个网页加了一层滤镜效果，只需要ctrlCV就实现啦。很多网站、APP 在重大灾难发生后立马就变灰色了。如果换一套灰色的UI，有些不现实，工作量巨大；讲上面这段样式加到HTML标签上，即可。你是否好奇这种灰色是怎么实现的呢？
2023-02-14 14:09:11
89
原创 nodejs部署前端项目的方法
然后就可以在浏览器输入：localhost:3000(或者127.0.0.1:3000）即可访问你的index.html文件。文件编写好后，用PowerShell命令行切换到此app.js文件所在目录。PowerShell输出----服务器启动成功！然后创建如下代码app.js文件。
2022-12-30 15:20:23
464
原创 通过三段式判断，动态初始化数组
/ 当flag为false时，a = [1, 2, 3];// 当flag为true时，a = [1, 2];，数组的长度不确定，需要依据相应值来判断。初始化数组时，有时候不确定。
2022-12-27 15:10:45
146
原创 angular 防抖和节流踩坑
如果在angualr项目中实现防抖节流，可以使用封装好的模块，比如rxjs。但今天说的是使用原始的防抖节流方法遇到的问题：以节流为例，先贴一段常见的原始节流代码：通常都是以闭包的形式实现节流代码，然后再看触发方式window.addEventListener，网上大多数介绍防抖和节流的例子，都是用window.addEventListener来监听，等待触发的。然而！应用到angular项目中时，代码是这样的：坑一：我们期望input输入时，进行节流处理，然而事与愿违，发现throttle(
2022-12-07 17:39:47
600
转载 ES6中使用Set数据结构将对象数组去重
因为Set数据结构并非真正的数组，它类似于数组，并且成员值都是唯一的，没有重复，所以可以用来做去重操作。// { name: "张三", age: 18, address: "北京" },// { name: "李四", age: 20, address: "天津" },// { name: "王五", age: 22, address: "河北" },{ name: "张三", age: 18, address: "北京" },其中张三和李四为重复对象；
2022-12-02 17:36:01
733
原创 git提交前代码检查：pre-commit配置
添加commitlint.config.js文件。.husky文件下面新增commit-msg。.husky文件下面新增pre-commit。新建 .lintstagedrc.js。
2022-11-29 18:03:40
971
原创 ag-grid表格常用方法
toolPanelVisibleChanged| | | 工具面板显示变化 ||pinnedRowDataChanged| | | 固定行数据变化 ||componentStateChanged| | | 组件状态变化 ||animationQueueEmpty| | | 空动画队列 ||viewportChanged| | | DOM中的行变化 ||virtualRowRemoved| | | 虚拟行移除 ||paginationChanged| | | 分页变化 |
2022-11-28 14:38:45
1289
原创 【前端面试题】什么是防抖和节流？有什么区别？如何实现？
/ 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了。// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的。// 在函数开头判断标记是否为 true，不为 true 则 return。// 将外部传入的函数的执行放在 setTimeout 中。// 每当用户输入的时候把前一个 setTimeout clear 掉。// 创建一个标记用来存放定时器的返回值。，所以节流会稀释函数的执行频率。// 通过闭包保存一个标记。
2022-11-17 10:58:09
150
原创 【前端面试题】[‘1‘, ‘2‘, ‘3‘].map(parseInt) what & why ?
将数组的每个元素传递给指定的函数处理，并返回处理后的数组，所以 ['1','2','3'].map(parseInt) 就是将字符串1，2，3作为元素；即分别求出 parseInt('1',0), parseInt('2',1), parseInt('3',2)的结果。//基数 为 2（2 进制）表示的数中，最大值小于 3，所以无法解析，返回 NaN；//基数为 1（1 进制）表示的数中，最大值小于 2，所以无法解析，返回 NaN；参数，第一个表示被处理的值（字符串），第二个表示为解析时的基数。
2022-11-17 10:30:07
119
原创 前端生成excel文件-excelJs插件
无api提供excel，前端根据数据，导出excel文档（自定义excel内容样式）。使用技术：excelJs插件。
2022-10-13 17:35:27
1811
转载 webpack自动打包
一、了解webpack当前web开发面临的困境1.文件依赖关系错综复杂2.静态资源请求效率低3.模块化支持不友好4.浏览器对高级javascript特性兼容程度较低webpack是前端项目构建工具（打包工具）提供了有好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大功能二、在项目中安装和配置webpack1.运行npm install webpack webpack-cli -D命令，安装webpack相关的包2.在项目根目录中，创建名为webpack.config.js 的
2022-06-09 16:18:18
1016
5
原创 Promise封装异步读文件方法
1.方法名称为 getFile；2.方法接收一个形参 fpath，表示要读取的文件的路径3.方法的返回值为Promise的实例对象
2022-06-02 14:00:05
132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人