02 2022 档案
摘要：观察者模式 分为观察者与目标，观察者 → 订阅目标，目标 → 触发事件，目标里维护了一套观察者列表。观察者与目标之间形成了松耦合。 // 观察者 class Observer { constructor() {} update() {} } // 观察者列表 class ObserverList {
阅读全文
摘要：首先这就是一个 bug，是第一版 javascript 遗留下来的。在这个版本，数值是以 32 字节存储的，由标志位（1~3 个字节）和数值组成。标志位存储的是低位的数据。 有五种标志位： 000：对象，数据是对象的应用。 1：整型，数据是 31 位带符号整数。 010：双精度类型，数据是双精度数字
阅读全文
摘要：适配 思想：将数据适配指定格式。 let arr = [{ path: '' }]; function b(params, fn) { params.forEach(item => { fn(item.url); }); } // 数据适配 let adaptArr = arr.map(item =
阅读全文
摘要：享元 思想：抽出不同的部分。 // 源代码 function a(paramsm, fn) { let arr1 = []; let arr2 = []; if (params) { arr1.forEach(fn); } else { arr2.forEach(fn); } } // 享元模式 f
阅读全文
摘要：工厂模式 思想：用于批量创建相似对象 或 完成相似功能。 class A {} function factory() { return new A(); } 建造者 思想：将复杂功能模块拆分，再组合起来。 class Editor { this.text = new Text(); this.img
阅读全文
摘要：设计原则 开闭原则：扩展开放，修改关闭 单一职责：一个函数只做一件事； 依赖倒置：依赖抽象，而不是具体； 接口隔离：类似单一职责，只不过是针对接口； 迪米特法则：一个对象应该减少与其它对象发生作用； 里氏替换：子类可以完全替代父类（子类必须完全实现父类方法） 分类 创建型：工厂模式、单例模式、建造者
阅读全文
摘要：意义 首先 javascript 是单线程脚本语言，至于为什么是单线程？最初设计的时候是执行浏览器脚本，单线程能保证对 DOM 操作的准确性。但这就意味着在处理较耗时操作时会阻塞，比如：I/O 操作，网络请求等。为了避免这种情况，耗时操作可以异步任务中执行，执行完成后通知相应的回调，事件循环就诞生了
阅读全文
摘要：问题 以下代码执行结果是？ Promise.resolve({ then: function () { console.log('a'); } }).then(() => { console.log('d'); }); 首先第一直觉就是打印 d，当结果却是 a。立马去翻了 MDN ，果然发现了一些细
阅读全文
摘要：防抖 高频操作，最后一次生效。 function debounce(fn) { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args);
阅读全文
摘要：定义 将接收多个参数的函数转换成接收单一参数的函数，并且返回一个接收余下的参数的新函数。 应用场景 参数重复 // 柯里化 前 function validate(rule, value) { console.log('rule :>> ', rule); console.log('value :>
阅读全文
摘要：/** * @description: 深拷贝 * @param { any } source 数据源 * @param { Map } cache 缓存（不传，有默认值） * @return { any } 复制值 */ function deepCopy(source, cache = new
阅读全文
摘要：定义 一个函数的参数是函数，那么这个函数就是高阶函数。数组的遍历方法就是高阶函数，如：forEach、map等等。 细节 保持纯函数，减少函数副作用； 回调函数要使用 call 或 apply 绑定 this ； 手写数组函数 forEach function myForEach(arr, cb)
阅读全文
摘要：问题 当需要多个函数完成一个业务场景时，函数传参会显得重复。此时，可以将需要调用的函数封装一下，让它自动传参和执行。 let result = fn1(1); result = fn2(result); result = fn3(result); …… compose 函数 从右往左执行参数函数。
阅读全文
摘要：编程规范 面向过程编程：先做这个，再做那个，然后……； 面向对象编程：把功能封装为对象，相关操作作为对象方法； 函数式编程：把复杂功能拆分为一系列独立函数，通过函数之间相互调用完成功能； 函数式编程 特点 纯函数：相同输入得到相同输入，返回结果只依赖参数； 减少函数副作用：改变了外部数据，如全局变量
阅读全文
摘要：问题 在项目中规定了文件的换行符为 LF1 ,当远程仓库有代码更新时，拉取代码发现换行符又被替换为 CRLF2，在vscode配置文件中也设置了文件换行符为 LF，几经折腾发现是git在传输代码时，将换行符转为了 CRLF。 core.autocrlf # 提交时转换为LF，检出时转换为CRLF g
阅读全文
摘要：require.context 生成一个 context module(上下文模块)。 require.context(path: string, needChildren: boolean, match: RegExP); 参数说明 path: 需要引入模块文件夹； needChildren: 是
阅读全文
摘要：aspect-ratio aspect-ratio CSS 属性为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。 aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; 例子 .box { width: 50vw; aspect
阅读全文
摘要：为什么要管理内存 减少浏览器卡顿； 防止node端服务中断； 变量如何保存在内存中 普通类型（字符串，数字、布尔等）数据保存在栈内存中； 引用类型（对象，数组，方法等）数据保存在堆内存中，栈内存保存堆内存地址； V8 占用内存大小 64位1.4G； 32位700MB； 根据不同浏览器有些许扩容；no
阅读全文
摘要：Monorepo 单一代码库 问题 一般项目是独立创库管理（既：多代码库multirepos），一些基础的组件、工具函数，或者一些配置项会在多个项目中重复使用，除了copy一份之外，就是将依赖发布为一个npm包，当依赖项发生修改时，需要重新发布npm包，当修改频繁时，这种方式就显得尤为繁琐。 单一代
阅读全文
