回顾Vue2 的响应式 Vue3 的响应式从 Reactive 开始 createReactiveObject： baseHandlers: Proxy.get Proxy.set Proxy.deleteProperty Proxy.ha...

从一个简单例子开始 Vue.createApp packages/runtime-core/src/index.ts ensureRenderer 执行render方法从一个简单例子开始<div id="app"> <button></but...

1. Vue 2和Vue 3的项目结构比较 1.1 核心库 1.2 运行时 1.3 编译器 1.4 辅助工具和插件 1.1 核心库 1.2 运行时 1.3 编译器 1.4 辅助工具和插件 2. Monorep...

为什么需要浏览器标签之间的通信？ JavaScript 如何实现跨标签通信？ 1. BroadcastChannel (MDN) 2. Service Worker 3. localStorage 4. SharedWorker (MDN) ...

定义 01背包 暴力解法 二维dp数组（动规五步法） 1. 确定dp数组以及下标意义 2. 确定递推公式 3. db数组初始化 4. db数组遍历顺序 5. 举例演示dp数组...

定义 协变（Covariant） 逆变（Contravariant） 双变（Bivariant） 不变（Invariant） 总结 逆变协变对 infer 的影响 练习定义「Subtyping」 是一个面向对象编程中非常重要的概念，用于描述一个类型和另一个类型之间的关系。一个类型可以被看作是另一...

介绍和应用 keep-alive是什么 它的使用场景 源码解析 keep-alive不会生成真正的DOM节点，这是怎么做到的？ keep-alive包裹的组件是如何使用缓存的？ 介绍和应用keep-alive是什么 keep-a...

定义 策略模式的优点 策略模式的缺点 举个例子 1. 策略三角色 — 策略接口()： 2. 策略三角色 — 实现策略类(ConcreteStategy)： 3. 策略三角色 — 引用策略类(Context)： 定义当我们需要在运行时根据不同的情境选择不同的...

定义 命令模式的优点 命令模式的缺点 举个例子 1. 命令四角色 —命令接口： 2. 命令四角色 — 实现命令接口：(ConcreteCommand)： 3. 命令四角色 — 接收者(Receiver)： 3. 命令四角色 — 调用者(Invoker)： ...

定义 可能的疑问？ 1. 虚拟DOM为何能提高页面更新性能？ 2. 虚拟DOM的节点信息怎么和真实DOM联系起来的 3. vue是怎么做到批量修改dom的，如何优化的。 VNnode patch 1. 新增节点 2. 删除节点 3. 更新节点 ...

1. 使数据“可观测” （Observer） 2. 依赖管理器 (Dep) 3. 依赖到底是谁？（Watcher） 验证 总结1. 使数据“可观测” （Observer）class Observer { value: any constructor(value: any) { this.va...

step1. ts简单实现前半部分要求 step2. 修改默认返回类型使其为精准类型 step3. 解决Zip<Target, Source>类型不匹配的问题 step4. 实现去除 readonly 的高级类型 step5. 最终 使用 ts 实现一个 zip 函数，对两个数组的元素按...

编译过程 LHS和RHS 为什么需要区分LHS和RHS 小结 编译过程整个编译过程，️有3个重要角色，分别是：引擎从头到尾负责整个 javascript 程序的编译和执行过程。编译器负责语法分析及代码生成等作用域负责收集并维护由所有声明的标识符（变量）组成的一系...

任务中断和复原任务中断和复原linux中，Control + z 和 Control + c 都是中断 命令。不同点： Control+z是任务中断，但任务并没有结束，它还在进程中，但状态是维持 挂起 状态，可以使用fg或者bg来继续前台或者后台的任务。（fg是重新启动前台被中断的任务，bg是后台重新执行）。

如何使用proxy扩展一个构造函数如何使用proxy扩展一个构造函数效果如下：var Person = function (name) { this.name = name};Person.prototype.height = 180var Boy = extend(Person, function (na...

给你两个 没有重复元素 的数组 nums1 和 nums2 ，下标从 0 开始计数，其中nums1 是 nums2 的子集。 输入：nums1 = [4, 1, 2], nums2 = [ 1, 3, 4, 2]输出：[-1, 3, -1]解释：找出nums1中的每项值在nums2中的下一个...

npm2 yarn pnpm Store Links(hard link & symbolic link) hard link symbolic link pnpm中是如何结合hard link和symbolic link的 ...

微服务？ 微前端？微服务？ wiki：微服务（英语：Microservices）是一种软件架构风格，它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础，利用模块化的方式组合出复杂的大型应用程序，各功能区块使用与语言无关 (Language-Independen...

层叠和bfc

尾递归和普通递归有啥区别 尾递归优化例子尾递归和普通递归有啥区别尾调用，是指函数内部的最后一个动作是函数调用。该调用的返回值，直接返回给函数。举个例子：// 尾调用function f(x){ return g(x);}// 非尾调用function f(x){ return g(x) + 1;...

这种解法有问题！！ Fisher–Yates shuffle 洗牌算法这种解法有问题！！[12,4,16,3].sort(function() { return 5 - Math.random();}); v8 在处理 sort 方法时，使用了插入排序和快排两种方案。当目标数组长度小于10时，使用插...

最大公约数的计算，用到辗转相除法 最小公倍数的计算，两数的乘积/最大公约数最大公约数的计算，用到辗转相除法例如：求 gcd(24, 10) ，可以转换为 gcd(10,4), 然后是 gcd(4,2) ，然后是(2,0)，最好得出结果是2方法1:function gcd(a, b) { var temp ...

有两种实现惰性载入的方式，第一种事函数在第一次调用时，对函数本身进行二次处理，该函数会被覆盖为符合分支条件的函数，这样对原函数的调用就不用再经过执行的分支了，我们可以用下面的方式使用惰性载入重写addEvent()。function addEvent (type, element, fun) { if (e...

节流 实现 underscore 节流的实现 防抖节流函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内 无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来...

Array.prototype.map Array.prototype.filter Array.prototype.reduce Array.prototype.flatArray.prototype.mapArray.prototype.map2 = function(callbackfn, thi...

高阶函数 函数作为参数传递 函数作为返回值输出 练习题 柯里化 定义 实际应用 实现currying函数 扩展：函数参数 length 高阶函数高阶函数英文叫 Higher-order function，它的定义很简单，就是至少满足...

Zhuangbility.js 百度翻译： 1. 先来做几个题目 2. 隐式转换 2.1 特殊的 “ + ” 有如下规则： 2.2 ToPrimitive 2.3 使用 == 比较...

this值在进入上下文的时候确定，并且在上下文运行期间永久保持不变。 全局代码中的this： 函数代码中的this： 所以对于this的理解，下面从应用角度和规范角度分别去理解。 1. 应用角度（一般情况） 1.1 默认绑定 1.2 隐式绑定 1.3 显式绑定...

1. 下面的问题你能准确回答出来么？ 2. 静态作用域和动态作用域 3. 执行上下文栈 顺序执行？ 可执行代码 执行上下文栈 4. 变量对象 全局上下文 函数上下文 执行过程 a. 进入执行上下文 b. 代码执行 ...

1. 从JS创建一个对象开始说起： 1.1 工厂模式创建对象 （缺点是无法知道创建出来的对象是一个什么类型的对象） 1.2 构造函数创建对象 优点：没有显示创建对象，只有在new 的时候在内存里创建一个新对象；person1 和person2都...

1. 工厂模式 2. 构造函数模式 3. 原型模式 3.1 原型模式优化 4. 组合模式 4.1 动态原型模式 5.1 寄生构造函数模式 5.2 稳妥构造函数模式1. 工厂模式function createPerson(name) { var o = new Object() 0.name ...

1、自省 2、自我修改 3、 调解 4、 生成代码 5、 总结 公开符号 1. Symbol.iterator 2. Symbol.toStringTag 与 Symbol.hasInstance 3. Symbol.species 4. Symbol...

1. 原型链继承 2. 经典继承（借用构造函数（使用call）） 3. 组合继承 4. 原型式继承 （Object.create） 5. 寄生式继承 6. 寄生组合继承1. 原型链继承function Parent() { this.name = 'xwk'}Parent.prototype.ge...

1. 浅拷贝 常见的浅拷贝场景： 2. 深拷贝 常见的深拷贝场景： 3. 总结1. 浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中...

js 编译基础（babel） 什么是编译器？ 什么是解释器？ js 编译基础（babel）babel目前是前端领域的必备工具了，他可以让我们使用一些新的语法和api。babel会在编译的过程中，将一些不支持的api添加polyfill以支持当前环境。babel更像一种，从...

分析 BUT ，闭包真的就是上述这样么？ 回忆作用域链[[Scopes]] 闭包对象 Closure 内存泄漏 总结MDN 对闭包的定义： 闭包是指那些能够访问 自由变量 的 函数。 两个点，首先闭包必须是 函数，其次必须要能访问 自由变量自由变量指哪...

Object.prototype.toString 原理 部署了 Symbol.toStringTag 属性的内置对象 1. 三个容器对象 2. BigInt 和 Symbol 3. 四个集合（Collection）对象 4. ArrayBuffer 及其视图...

Object.assign 模拟实现 Attention 1 : 可枚举性 Attention 2: 判断参数是否正确 Attention 3: 原始类型被包装为对象 Attention 4: 存在性 深拷贝的完美实现 MDN: 主要是将所有...

何为函数记忆 underscore中的实现 优化斐波那切的计算 何为函数记忆函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。常用于，复杂且有重复的计算。例如：斐波那契数列的计算underscore中的实现function m...

1. call和apply call的模拟实现 apply的模拟实现 2. bind 版本一： 版本二： 3. new 第一版： 第二版： 最终版：1. call和apply​ call方法和apply方法，实现一个就行了，两个方法除了第二个参数以外，其他完全一样。​ apply方法第二个参...

如何使用proxy扩展一个构造函数如何使用proxy扩展一个构造函数效果如下：var Person = function (name) { this.name = name};Person.prototype.height = 180var Boy = extend(Person, function (na...

尾递归和普通递归有啥区别 尾递归优化例子尾递归和普通递归有啥区别尾调用，是指函数内部的最后一个动作是函数调用。该调用的返回值，直接返回给函数。举个例子：// 尾调用function f(x){ return g(x);}// 非尾调用function f(x){ return g(x) + 1;...

这种解法有问题！！ Fisher–Yates shuffle 洗牌算法这种解法有问题！！[12,4,16,3].sort(function() { return 5 - Math.random();}); v8 在处理 sort 方法时，使用了插入排序和快排两种方案。当目标数组长度小于10时，使用插...

最大公约数的计算，用到辗转相除法 最小公倍数的计算，两数的乘积/最大公约数最大公约数的计算，用到辗转相除法例如：求 gcd(24, 10) ，可以转换为 gcd(10,4), 然后是 gcd(4,2) ，然后是(2,0)，最好得出结果是2方法1:function gcd(a, b) { var temp ...

节流 实现 underscore 节流的实现 防抖节流函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内 无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来...

Array.prototype.map Array.prototype.filter Array.prototype.reduce Array.prototype.flatArray.prototype.mapArray.prototype.map2 = function(callbackfn, thi...

Object.prototype.toString 原理 部署了 Symbol.toStringTag 属性的内置对象 1. 三个容器对象 2. BigInt 和 Symbol 3. 四个集合（Collection）对象 4. ArrayBuffer 及其视图...

Object.assign 模拟实现 Attention 1 : 可枚举性 Attention 2: 判断参数是否正确 Attention 3: 原始类型被包装为对象 Attention 4: 存在性 深拷贝的完美实现 MDN: 主要是将所有...

何为函数记忆 underscore中的实现 优化斐波那切的计算 何为函数记忆函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。常用于，复杂且有重复的计算。例如：斐波那契数列的计算underscore中的实现function m...

1. call和apply call的模拟实现 apply的模拟实现 2. bind 版本一： 版本二： 3. new 第一版： 第二版： 最终版：1. call和apply​ call方法和apply方法，实现一个就行了，两个方法除了第二个参数以外，其他完全一样。​ apply方法第二个参...

为什么需要浏览器标签之间的通信？ JavaScript 如何实现跨标签通信？ 1. BroadcastChannel (MDN) 2. Service Worker 3. localStorage 4. SharedWorker (MDN) ...

npm2 yarn pnpm Store Links(hard link & symbolic link) hard link symbolic link pnpm中是如何结合hard link和symbolic link的 ...

微服务？ 微前端？微服务？ wiki：微服务（英语：Microservices）是一种软件架构风格，它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础，利用模块化的方式组合出复杂的大型应用程序，各功能区块使用与语言无关 (Language-Independen...

有两种实现惰性载入的方式，第一种事函数在第一次调用时，对函数本身进行二次处理，该函数会被覆盖为符合分支条件的函数，这样对原函数的调用就不用再经过执行的分支了，我们可以用下面的方式使用惰性载入重写addEvent()。function addEvent (type, element, fun) { if (e...

高阶函数 函数作为参数传递 函数作为返回值输出 练习题 柯里化 定义 实际应用 实现currying函数 扩展：函数参数 length 高阶函数高阶函数英文叫 Higher-order function，它的定义很简单，就是至少满足...

Zhuangbility.js 百度翻译： 1. 先来做几个题目 2. 隐式转换 2.1 特殊的 “ + ” 有如下规则： 2.2 ToPrimitive 2.3 使用 == 比较...

this值在进入上下文的时候确定，并且在上下文运行期间永久保持不变。 全局代码中的this： 函数代码中的this： 所以对于this的理解，下面从应用角度和规范角度分别去理解。 1. 应用角度（一般情况） 1.1 默认绑定 1.2 隐式绑定 1.3 显式绑定...

1. 下面的问题你能准确回答出来么？ 2. 静态作用域和动态作用域 3. 执行上下文栈 顺序执行？ 可执行代码 执行上下文栈 4. 变量对象 全局上下文 函数上下文 执行过程 a. 进入执行上下文 b. 代码执行 ...

1. 从JS创建一个对象开始说起： 1.1 工厂模式创建对象 （缺点是无法知道创建出来的对象是一个什么类型的对象） 1.2 构造函数创建对象 优点：没有显示创建对象，只有在new 的时候在内存里创建一个新对象；person1 和person2都...

1. 工厂模式 2. 构造函数模式 3. 原型模式 3.1 原型模式优化 4. 组合模式 4.1 动态原型模式 5.1 寄生构造函数模式 5.2 稳妥构造函数模式1. 工厂模式function createPerson(name) { var o = new Object() 0.name ...

1、自省 2、自我修改 3、 调解 4、 生成代码 5、 总结 公开符号 1. Symbol.iterator 2. Symbol.toStringTag 与 Symbol.hasInstance 3. Symbol.species 4. Symbol...

1. 原型链继承 2. 经典继承（借用构造函数（使用call）） 3. 组合继承 4. 原型式继承 （Object.create） 5. 寄生式继承 6. 寄生组合继承1. 原型链继承function Parent() { this.name = 'xwk'}Parent.prototype.ge...

1. 浅拷贝 常见的浅拷贝场景： 2. 深拷贝 常见的深拷贝场景： 3. 总结1. 浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中...

js 编译基础（babel） 什么是编译器？ 什么是解释器？ js 编译基础（babel）babel目前是前端领域的必备工具了，他可以让我们使用一些新的语法和api。babel会在编译的过程中，将一些不支持的api添加polyfill以支持当前环境。babel更像一种，从...

分析 BUT ，闭包真的就是上述这样么？ 回忆作用域链[[Scopes]] 闭包对象 Closure 内存泄漏 总结MDN 对闭包的定义： 闭包是指那些能够访问 自由变量 的 函数。 两个点，首先闭包必须是 函数，其次必须要能访问 自由变量自由变量指哪...

层叠和bfc

定义 01背包 暴力解法 二维dp数组（动规五步法） 1. 确定dp数组以及下标意义 2. 确定递推公式 3. db数组初始化 4. db数组遍历顺序 5. 举例演示dp数组...

给你两个 没有重复元素 的数组 nums1 和 nums2 ，下标从 0 开始计数，其中nums1 是 nums2 的子集。 输入：nums1 = [4, 1, 2], nums2 = [ 1, 3, 4, 2]输出：[-1, 3, -1]解释：找出nums1中的每项值在nums2中的下一个...

任务中断和复原任务中断和复原linux中，Control + z 和 Control + c 都是中断 命令。不同点： Control+z是任务中断，但任务并没有结束，它还在进程中，但状态是维持 挂起 状态，可以使用fg或者bg来继续前台或者后台的任务。（fg是重新启动前台被中断的任务，bg是后台重新执行）。

编译过程 LHS和RHS 为什么需要区分LHS和RHS 小结 编译过程整个编译过程，️有3个重要角色，分别是：引擎从头到尾负责整个 javascript 程序的编译和执行过程。编译器负责语法分析及代码生成等作用域负责收集并维护由所有声明的标识符（变量）组成的一系...

定义 协变（Covariant） 逆变（Contravariant） 双变（Bivariant） 不变（Invariant） 总结 逆变协变对 infer 的影响 练习定义「Subtyping」 是一个面向对象编程中非常重要的概念，用于描述一个类型和另一个类型之间的关系。一个类型可以被看作是另一...

step1. ts简单实现前半部分要求 step2. 修改默认返回类型使其为精准类型 step3. 解决Zip<Target, Source>类型不匹配的问题 step4. 实现去除 readonly 的高级类型 step5. 最终 使用 ts 实现一个 zip 函数，对两个数组的元素按...

回顾Vue2 的响应式 Vue3 的响应式从 Reactive 开始 createReactiveObject： baseHandlers: Proxy.get Proxy.set Proxy.deleteProperty Proxy.ha...

从一个简单例子开始 Vue.createApp packages/runtime-core/src/index.ts ensureRenderer 执行render方法从一个简单例子开始<div id="app"> <button></but...

1. Vue 2和Vue 3的项目结构比较 1.1 核心库 1.2 运行时 1.3 编译器 1.4 辅助工具和插件 1.1 核心库 1.2 运行时 1.3 编译器 1.4 辅助工具和插件 2. Monorep...

介绍和应用 keep-alive是什么 它的使用场景 源码解析 keep-alive不会生成真正的DOM节点，这是怎么做到的？ keep-alive包裹的组件是如何使用缓存的？ 介绍和应用keep-alive是什么 keep-a...

定义 可能的疑问？ 1. 虚拟DOM为何能提高页面更新性能？ 2. 虚拟DOM的节点信息怎么和真实DOM联系起来的 3. vue是怎么做到批量修改dom的，如何优化的。 VNnode patch 1. 新增节点 2. 删除节点 3. 更新节点 ...

1. 使数据“可观测” （Observer） 2. 依赖管理器 (Dep) 3. 依赖到底是谁？（Watcher） 验证 总结1. 使数据“可观测” （Observer）class Observer { value: any constructor(value: any) { this.va...

定义 策略模式的优点 策略模式的缺点 举个例子 1. 策略三角色 — 策略接口()： 2. 策略三角色 — 实现策略类(ConcreteStategy)： 3. 策略三角色 — 引用策略类(Context)： 定义当我们需要在运行时根据不同的情境选择不同的...

定义 命令模式的优点 命令模式的缺点 举个例子 1. 命令四角色 —命令接口： 2. 命令四角色 — 实现命令接口：(ConcreteCommand)： 3. 命令四角色 — 接收者(Receiver)： 3. 命令四角色 — 调用者(Invoker)： ...