- 博客(80)
- 收藏
- 关注
RSS订阅转载 控制并发请求
Promise.all() 最简单的控制并发，但是请求出错会导致该组无返回值Promise.allSettled() 解决了Promise.all()的问题，但是却存在慢接口阻塞后续请求，且浪费其余并发位置的问题通过维护一个运行池，当运行池中有请求完成时便从等待队列中取一个心情求入池执行，直到所有的请求都入池介绍了社区的 p-limit库的使用方法和实现原理。
2024-04-28 20:35:35
3
原创 JS 可迭代对象 ( 使 var [a, b] = {a: 1, b: 2} 解构赋值 )
ES6中引入了迭代器与可迭代对象的概念，并且提供了对可迭代对象的相关支持，如for…of循环，Map(iterable)构造器，展开语法…等。让我们对数组外的数据集合的遍历操作也得到极大简化所谓可迭代对象，就是比普通对象多了一个名为Symbol.iterator方法的普通对象，这个方法返回一个迭代器。或者，一个具备Symbol.iterator同时具备next方法的对象也是一个可迭代的对象。。
2024-04-23 12:43:40
496
转载 HTTP 缓存
HTTP 的缓存机制，可以说这是前端工程师需要掌握的重要知识点之一。本文将针对 HTTP 缓存整体的流程做一个详细的讲解，争取做到大家读完整篇文章后，对缓存有一个整体的了解。HTTP 缓存分为 2 种，一种是强缓存，另一种是协商缓存。主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力。在实际使用场景中，图片、不常变化的 JS 等静态资源都会使用缓存来提高页面的加载速度。。
2024-04-14 22:43:00
9
转载 WebSocket 教程
随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高，在 WebSocket 出现之前，大多数情况下是通过客户端发起轮询来拿到服务端实时更新的数据，因为HTTP1.x 协议有一个缺陷就是通信只能由客户端发起，服务端没法主动给客户端推送。这种方式在对实时性要求比较高的场景下，比如即时通讯、即时报价等，显然会十分低效，体验也不好。为了解决这个问题，便出现了WebSocket 协议，实现了客户端和服务端双向通信的能力。介绍WebSocket之前，还是让我们先了解下轮询实现推送的方式。
2024-04-14 21:59:40
16
转载 Cookie 和 Token 的区别
通俗地讲就是验证当前用户的身份，证明“你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功）用户名密码登录邮箱发送登录链接手机号接收验证码只要你能收到邮箱/验证码，就默认你是账号的主人用户授予第三方应用访问该用户某些资源的权限你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息）cookie。
2024-04-14 15:52:08
11
转载 HTTPS 加密原理
HTTPS（SSL/TLS）的加密机制虽然是大家都应了解的基本知识，但网上很多相关文章总会忽略一些内容，没有阐明完整的逻辑脉络，我学习它的时候也曾废了些功夫。对称与非对称加密、数字签名、数字证书等，在学习过程中，除了了解“它是什么”，你是否有想过“为什么是它”？我认为有必要搞清楚后者，否则你可能只是单纯地记住了被灌输的知识，而未真正理解它。本文以问题的形式逐步展开，一步步解开HTTPS的面纱，希望能帮助你彻底搞懂HTTPS！
2024-04-13 23:24:00
9
转载 使用 Web Worker 导出 Excel
在项目开发过程中，导出 Excel 文件是很常见的功能。根据生成 Excel 文件的方式，通常分为后端生成和前端生成。前端实现下载后端生成的 Excel 通常有两种方式，①是后端返回 Excel 文件的临时下载地址前端直接下载，②是后端返回 ArrayBuffer 二进制数据，前端处理后下载。而前端生成 Excel 就简单的多了，后端仅需返回指定格式的 JSON 数据就可以了，生成 Excel 这一步由前端浏览器完成，这样就可以大大减轻服务器压力，节约服务器资源。但是。
2024-04-13 23:19:02
12
转载 Web Worker API
众所周知，js最初设计是运行在浏览器中的，为了防止多个线程同时操作DOM，带来渲染冲突问题，所以js执行器被设计成单线程。但随着前端技术的发展，js能力远不止如此，当我们遇到需要大量计算的场景时（比如图像处理、视频解码等），js线程往往会被长时间阻塞，甚至造成页面卡顿，影响用户体验。为了解决单线程带来的这一弊端，Web Worker 应运而生。
2024-04-10 21:49:04
15
转载 Window：requestAnimationFrame() 方法
在 Web 应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即HTML5 新增加的 API，类似于 setTimeout 定时器。
2024-04-08 23:46:21
29
转载 定时器 setTimeout 不能准时执行？
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。浏览器通过维护一个延迟队列来实现 setTimeout，有一个 ProcessDelayTask 函数来检查到期的任务然后依次执行。导致定时器 setTimeout 不准时的原因有四个1.JS 是单线程执行任务，如果当前任务执行时间过久会导致定时器设置的任务被延迟执行。2.如果 setTimeout 存在嵌套调用且超过 5 次，那么系统会设置最短时间间隔为 4ms。
2024-04-07 22:33:38
23
转载 微前端qiankun
微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。一般呢，微前端多应用于企业中的中后台项目中，因为企业内部的中后台项目存活时间都比较长，动辄三五年或者更多，最后演变成一个巨石应用的概率往往高于其他类型的web应用。这就带来了技术栈落后编译部署慢两个问题。iframe。
2024-02-25 15:12:26
43
转载 JS系列(十一) - 手写Promise
Promise是JavaScript中非常重要的一个概念，它是一种用于处理异步操作的编程模型。Promise提供了一种优雅的方式来处理异步操作的成功或失败，以及它们之间的依赖关系。这使得我们可以避免回调地狱（Callback Hell）的问题，编写更清晰、更易于理解的代码。是一个对Promise行为的开放规范，它规定了Promise应该如何表现和实现。遵循这个规范的Promise实现可以确保它们之间的互操作性，使得我们可以在不同的库和框架中轻松地使用它们。
2024-01-30 21:19:48
49
转载 JS系列 (十) - Promise用法的详细解析
第一，我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等；第二，对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解它这个函数到底怎么用；我们来看一下Promise的API是怎么样的：Promise是一个类，可以翻译成承诺、许诺 、期约；当我们需要给予调用者一个承诺：待会儿我会给你回调数据时，就可以创建一个Promise的对象；在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor。
2024-01-29 21:07:32
143
转载 JS系列(十) - Proxy-Reflect和响应式原理
我们先来看一下响应式意味着什么？我们来看一段代码：m有一个初始化的值，有一段代码使用了这个值；那么在m有一个新的值时，这段代码可以自动重新执行；let m = 20m = 40上面的这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式的。age: 18。
2024-01-28 18:59:44
59
转载 JS系列(九) - ES6~ES13-Symbol、Set、Map
前面我们讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么来做呢？Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。Symbol是什么呢？和Map类型的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。
2024-01-28 17:27:00
73
转载 JS系列(八) - 类的继承和实现方案
你需要先明确一点: 当我们在子类型的构造函数中调用父类型.call(this, 参数)这个函数的时候, 就会将父类型中的属性和方法复制一份到了子类型中. 所以父类型本身里面的内容, 我们不再需要.不要这么做, 因为这么做意味着以后修改了子类型原型对象的某个引用类型的时候, 父类型原生对象的引用类型也会被修改.另外，如果你仔细按照我的流程走了上面的每一个步骤，你会发现：所有的子类实例事实上会拥有两份父类的属性。目前stu的原型是p对象，而p对象的原型是Person默认的原型，里面包含running等函数；
2024-01-28 16:59:34
36
转载 前端项目规范配置（husky、eslint、stylelint、lint-staged、commitlint）
按照本文的步骤，你可以在你的现有项目中快速地加入 husky、eslint、stylelint、lint-staged、commitlint一系列代码校验工具，保证代码风格一致性，为编写高质量代码打下坚实的基础。除了使用一些现成的npm包外，我们也可以自己写一些规则， husky 提供了钩子，我们在钩子里添加要执行的逻辑即可。在校验代码格式之前，我们还想先看一下分支名是否符合要求，而不是让大家可以随心所欲，团队合作的项目尤其推荐哦。假设我们要求的分支名格式为 feat_name_summary。
2023-12-24 16:51:12
407
原创 SwitchHosts - 管理、切换多个 hosts 方案的工具
当计算机需要访问某个域名时，它首先会查询本地的hosts文件，看是否有该域名对应的IP地址。如果有，计算机会直接使用hosts文件中所指定的IP地址进行连接，而不会再去DNS服务器上查询IP地址，从而提高了访问速度。
2023-12-17 17:07:40
7873
转载 JS系列(七) - 对象原型、原型链
前面我们说过, 每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性；JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。2.这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；如果对象中没有改属性，那么会访问对象[[prototype]]内置属性指向的对象上的属性；将对象的[[prototype]]属性赋值为该构造函数的prototype属性；
2023-12-13 13:00:28
67
转载 JS系列(六) - 创建对象
对象是JavaScript中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事物：比如我们可以描述一辆车：Car，具有颜色（color）、速度（speed）、品牌（brand）、价格（price），行驶（travel）等等；比如我们可以描述一个人：Person，具有姓名（name）、年龄（age）、身高（height），吃东西（eat）、跑步（run）等等；
2023-11-22 12:59:28
72
原创 Install Nginx in Linux
Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。
2023-11-11 22:40:02
351
原创 Install Docker in Linux
Docker官网链接: https://docs.docker.com/新版本的Docker对Linux系统版本有一定的要求。如果Linux的发行版系统是centOS，安装最新版的docker需要centOS 7以上的系统。在Docker安装帮助页面查看支持的系统版本。Docker帮助页面:https://docs.docker.com/engine/install/centos/打开terminal，输入查看系统信息。确保自己的系统满足安装要求。2.安装Docker官网提供的软件源速度比较
2023-11-11 20:03:23
580
2
转载 JS系列(五) - 函数式编程增强
在程序设计中，若一个函数符合一下条件，那么这个函数被称为纯函数：此函数在相同的输入值时，需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。当然上面的定义会过于的晦涩，所以我简单总结一下：确定的输入，一定会产生确定的输出；函数在执行过程中，不能产生副作用；那么这里又有一个概念，叫做副作用，什么又是副作用呢？
2023-11-01 21:54:46
42
转载 JS系列(四) - this指向相关
是JavaScript中的一个关键字，但是又一个相对比较特别的关键字，不像function、var、for、if这些关键字一样，可以很清楚的搞清楚它到底是如何使用的。this会在执行上下文中绑定一个对象，但是是根据什么条件绑定的呢？在不同的执行条件下会绑定不同的对象，这也是让人捉摸不定的地方。这一次，我们一起来彻底搞定this到底是如何绑定的吧！
2023-11-01 21:47:29
46
转载 JS系列(三) - JavaScript的运行过程
这里先来看一下闭包的定义，分成两个：在计算机科学中和在JavaScript中。在计算机科学中对闭包的定义（维基百科）：闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）；是在支持 头等函数 的编程语言中，实现词法绑定的一种技术；闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）；
2023-10-22 17:34:51
62
转载 JS系列(二) - V8引擎的运行原理
当我们编写JavaScript代码时，它实际上是一种高级语言，这种语言并不是机器语言。高级语言是设计给开发人员使用的，它包括了更多的抽象和可读性。但是，计算机的CPU只能理解特定的机器语言，它不理解JavaScript语言。这意味着，在计算机上执行JavaScript代码之前，必须将其转换为机器语言。这就是JavaScript引擎的作用：事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
2023-10-21 17:03:49
616
转载 JS系列(一) - 深入浏览器的渲染原理
在构建 DOM 树的过程中，浏览器会按照 HTML 文档的层次结构，将文档分成一个个的块（block），如文本块、段落块、表格块等等。我们经常说的浏览器内核指的是浏览器的排版引擎：排版引擎（layout engine），也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样版引擎。在下载完成后，浏览器内核会开始解析 HTML 文件，构建 DOM 树，根据 DOM 树和 CSS 样式表构建渲染树，最终将页面呈现给用户。
2023-10-08 09:10:48
120
转载 pnpm - 速度快、节省磁盘空间的软件包管理器
前端开发者们每天都在接触 xxx install，包管理器是必不可少的工具。本文会以尽量简洁的语言来描述当下主流包管理工具 npm、yarn、pnpm 的管理策略以及进化史，不涉及任何晦涩的代码。2010 年 1 月，一款名为 npm 的包管理器诞生。很多人认为 npm 是 node package manager 的缩写，其实不是，而且 npm 根本也不是任何短语的缩写。它的前身其实是名为 pm（pkgmakeinst） 的 bash 工具，它可以在各种平台上安装各种东西。硬要说缩写的话，也应该是 nod
2023-09-25 23:23:17
74
原创 indexDB & localForage
存储量小：即使是web storage的存储量最大也只有 5M存取不方便：存入的内容会经过序列化，当存入非字符串的时候，取值的时候需要通过反序列化。当我们的存储量比较大的时候，我们一定会想到我们的 indexedDB，让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储，然而 indexedDB 的使用是比较繁琐而复杂的，有一定的学习成本，但第三方库的出现几乎抹平了这个缺陷，让我们轻松无负担的在浏览器中使用indexedDB。
2023-09-12 00:03:17
500
原创 中断已发出去的请求
在发起请求后，我们添加全局的 loading 遮罩，或者 disabled 查询按钮 ，这样我们在一个请求未完成前不能发送新的请求。AbortController 接口表示一个控制器对象，可以根据需要终止一个或多个Web请求。AbortController()： AbortController()构造函数创建一个新的 AbortController 对象实例signal：signal 属性返回一个 AbortSignal 对象实例，它可以用来 with/about 一个Web(网络)请求abort()：终止
2023-08-28 23:21:26
87
转载 Highly recommend using Dart Sass.
1、因为node-sass和node.js版本关联太紧了，如果这两个版本不匹配，就会起冲突，导致项目无法运行；但是dart-sass 安装没有兼容性问题2、sass官网团队也强烈建议使用dart-sass。sass团队强烈建议使用dart-sass3、node-sass仓库在墙外, 且新特性都会先在dart-sass实现。
2023-08-15 22:13:48
54
原创 SonarQube入门 - 搭建本地环境
简单来说，ESLint主要用于JavaScript/TypeScript的语法和风格检查，强调的是实时反馈；而SonarQube是一种多语言支持，更全面的代码质量管理工具，强调的是代码质量的长期跟踪和管理。的核心元素 ，SonarQube 集成到您现有的工作流程中并检测代码中的问题，以帮助您对项目执行持续的代码检查。是一种自我管理的自动代码审查工具，可以系统地帮助您交付。浏览 SonarQube （默认系统管理员凭据是。中 ，以确保您的代码符合高质量标准。
2023-08-02 13:10:57
703
原创 Chrome Extension
content script 可以操作 DOM，但是它和页面其他的脚本是隔离的，访问不到其他脚本定义的变量、函数等，相当于运行在单独的沙盒里。的模式的，它不会常驻后台可以提升性能，就是说MV2中的background scrips被成功注册后是一直运行着的，而MV3中的Service Worker 在不用时会被中止，并在下次有需要时重启；需要通过指定rules来实现请求的修改，浏览器会在匹配到符合规则的请求和操作时，按照rules中定义好的规则进行修改，程序中不再能直接查看请求的实际内容。
2023-07-12 20:47:02
893
转载 JS的继承
通过上面这段代码，我们可以看到 person5 是通过寄生式继承生成的实例，它不仅仅有 getName 的方法，而且可以看到它最后也拥有了 getFriends 的方法。通过这段代码可以看出来，这种寄生组合式继承方式，基本可以解决前几种继承方式的缺点，较好地实现了继承想要的结果，同时也减少了构造次数，减少了性能的开销.虽然其优缺点和原型式继承一样，但是对于普通对象的继承方式来说，寄生式继承相比于原型式继承，还是在父类基础上添加了更多的方法。1.非常纯粹的继承关系，实例是子类的实例，也是父类的实例。
2023-05-14 14:07:08
91
原创 vue + vditor(markdown编辑器)
是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。1.在mounted 中等vditor 初始化完成后，再通过监听value设置编辑器的值。2. beforeDestory() 销毁操作。1.vue2 安装(建议安装3.7.7及以下版本)3. vue3安装最新版本即可。2.vditor组件。
2023-05-10 18:57:11
1138
原创 Vite项目插件
文件（浏览器需要访问所有应用到 vue/element api 的页面才会生成所有自动导入 api 的文件 json），生成后改为 false。2.2 配置，默认在根目录生成auto-imports.d.ts 文件，并将其添加到tsconfig.json include中。文件 extends中引入生成的 json。为 true，重启项目生成。
2023-04-02 17:13:28
570
原创 vite项目中使用xlsx-style
是前端操作Excel以及类似的二维表的最佳选择之一，而是它的社区版本。其功能强大，支持xls、xlsx、ods等十几种格式。npm库名称为xlsx，node库也叫node-xlsx，。而xlsx-style 来源于SheetJs/xlsx，并在其非付费版上添加了很多功能，其中最主要的功能是设置excel 的样式。
2023-03-19 23:40:29
1449
原创 js操作shadow-root内的DOM元素
Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。shadow-root包裹下的对象，不在全局的DOM树中，因此getElementById 等方法，获取不到包裹中的对象。借助于 shadow DOM，您可以创建作用域 DOM 树，该 DOM 树附加至该元素上，但与其自身真正的子项分离开来。
2023-01-05 21:00:00
4146
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人