- 博客(58)
- 收藏
- 关注
RSS订阅原创 手写一个Virtual DOM及源码解析
/ 1秒后，由elNode变化成elNodeNew，elRoot本身没有重新挂载，实现虚拟dom更新。// 调用VNode原型上的render方法，创建相应节点。// 调用VNode原型上的render方法，创建相应节点。// 调用VNode原型上的render方法，创建相应节点。如果替换文本（肯定无 children），则记录。// 页面可渲染与注掉相同的内容。// 页面可渲染与注掉相同的内容。// 执行patch方法。// 没有props。如果标签不同，则记录。// 没有props。
2024-04-16 10:57:16
336
原创 详解virtual-dom中的list-diff算法
该算法采用列表对比的思路，针对列表进行按照有相近顺序的指定排序需要有key作为排序关键将列表使用算法和不使用算法的分成两部分核心方法，记录列表进行指定排序的完整操作相关代码 →。
2024-03-28 16:25:51
347
原创 《javascript高级程序设计》学习笔记 | 23.JSON
JSON 支持哪些类型的值？各种类型相比 JS 分别有哪些不同的语法？如何利用 JSON 序列化进行深拷贝？哪些情况下序列化后对象的属性会被省略？JSON.stringify()的第二个参数为数组或函数时，分别对结果进行了怎样的过滤？JSON.stringify()的第三个参数为数值或字符串时，分别对结果进行了怎样的缩进？写一段代码，使用 toJSON()结合过滤函数对 JSON 进行序列化写一段代码，利用 JSON.parse()的第二个参数（还原函数）进行字符串解析。
2024-03-05 17:36:10
977
原创 《javascript高级程序设计》学习笔记 | 21.2.错误处理
错误对象中的哪些属性在全部浏览器中都向用户显示？finally 对 try 或 catch 中的非 return 语句和 return 语句分别有什么影响？请举例说明有哪些常见错误类型及其出现的原因请写一段代码，在 try/catch 块中，确定错误的类型throw 操作符必须有值嘛？需要什么数据类型的值？如何才能既使用该操作符又不影响后续代码执行？写一段代码，通过继承 Error 创建一个自定义的错误类型，创建其实例并用 throw 将其抛出。
2024-02-28 10:19:19
922
原创 Promise源码渐进式解读（五）
关注[前端小讴]，阅读更多原创技术文章回顾：Promise源码渐进式解读（一）回顾：Promise源码渐进式解读（二）回顾：Promise源码渐进式解读（三）回顾：Promise源码渐进式解读（四）完整代码+注释，可对照阅读Promise源码解读系列的最后 1 篇，详解Promise构造函数的最后几个方法及.finally，封装isArray判断对象是否为数组：/* isArray方法：判断对象是否为数组 */function isArray(x) { return Boolean(.
2021-10-28 10:00:32
244
原创 Promise源码渐进式解读（四）
关注[前端小讴]，阅读更多原创技术文章回顾：Promise源码渐进式解读（一）回顾：Promise源码渐进式解读（二）回顾：Promise源码渐进式解读（三）完整代码+注释，可对照阅读多个 then 串联 - 遗留的问题/* 暂时还未实现：不少于2个的.then()链式调用 */new Promise((resolve, reject) => { resolve(3)}) .then((res) => { /* 调用第1个then时，prom为当前then前返.
2021-10-20 17:31:49
218
原创 Promise源码渐进式解读（三）
关注[前端小讴]，阅读更多原创技术文章回顾：Promise源码渐进式解读（一）回顾：Promise源码渐进式解读（二）完整代码+注释，可对照阅读Promise.prototype.then - 源码/** Promise原型的then属性，指向函数 * 参数onFulfilled：onResolved处理程序，在期约兑现时执行的回调 * 参数onRejected：onRejected处理程序，在期约拒绝时执行的回调 * 支持无限链式回调，每个then()方法返回新的Promise实例 .
2021-10-18 14:51:09
259
原创 Promise源码渐进式解读（二）
关注[前端小讴]，阅读更多原创技术文章回顾：Promise源码渐进式解读（一）完整代码+注释，可对照阅读Promise.resolve - 源码/** Promise构造函数的resolve属性，指向函数 * 参数value：解决值 */Promise.resolve = function (value) { /* 如果解决值的constructor属性指向Promise构造函数（即解决值是Promise实例） */ if (value && typeof valu.
2021-10-14 15:35:27
146
原创 Promise源码渐进式解读（一）
关注[前端小讴]，阅读更多原创技术文章市面上有很多 Promise 库，本文选取一个轻量级的Promise polyfill，逐步实现解析如果对Promise还不熟悉，请先移步完整代码+注释，可对照阅读Promise 构造函数 - 源码/** Promise构造函数 * 参数fn：执行器函数(resolve,reject)=>{resolve(),reject()} * 执行器函数又接收2个参数：resolve和reject回调函数 */function Promi.
2021-10-12 14:03:20
232
原创 《javascript高级程序设计》学习笔记 | 11.3.异步函数
关注[前端小讴]，阅读更多原创技术文章异步函数ES8 新增异步函数（async/await），是 ES6 期约模式在 ECMAScript 函数中的应用以同步方式的代码执行异步相关代码 →异步函数ES8 对函数进行了扩展，新增 2 个关键字async和awaitasyncasync关键字用于声明异步函数，可用在函数声明、函数表达式、箭头函数和方法上async function foo() {} // 用在函数声明let bar = async function () {}.
2021-09-29 15:56:15
273
原创 《javascript高级程序设计》学习笔记 | 11.2.期约
关注[前端小讴]，阅读更多原创技术文章期约期约是对尚不存在结果的一个替身，是一种异步程序执行的机制相关代码 →Promises/A+规范ES6 新增了Promise类型，其成为主导性的异步编程机制，所有现代浏览器都支持期约期约基础Promise类型通过new操作符实例化，需传入执行器（executor）函数作为参数// let p = new Promise() // TypeError: Promise resolver undefined is not a functio.
2021-09-16 15:10:51
154
原创 《javascript高级程序设计》学习笔记 | 11.1.异步编程
关注[前端小讴]，阅读更多原创技术文章异步编程ES6 新增了正式的Promise引用类型，支持更优雅地定义和组织异步逻辑接下来的几个版本，使用async和await关键字定义异步函数的机制相关代码 →同步与异步同步行为在内存中顺序执行处理器指令每条指令都在单个线程中按出现顺序执行每条指令执行后，都可以推断出程序的状态，并立即获得存储在系统本地（或寄存器或系统内存）的信息let x = 3 // 操作系统在栈内存上分配一个存储浮点数值的空间x = x + 4 // 针对这.
2021-09-01 16:57:20
135
原创 《javascript高级程序设计》学习笔记 | 10.14-10.16.闭包
关注[前端小讴]，阅读更多原创技术文章相关代码 →10.14 闭包闭包是指引用了另一个函数作用域中变量的函数，通常在嵌套函数中实现（如果一个函数访问了它的外部变量，那么它就是一个闭包）闭包中函数的作用域链中，有对外部函数变量的引用为了在全局作用域可以访问到闭包函数，通常在外部函数内返回内部闭包函数因此外部函数被闭包引用的活动对象，并不能在外部函数执行后被销毁，仍保留在内存中若要释放内存，需解除闭包函数对外部函数活动对象的引用function arraySort(key, sor.
2021-08-20 15:29:06
247
4
原创 《javascript高级程序设计》学习笔记 | 10.12-10.13.递归
关注[前端小讴]，阅读更多原创技术文章相关代码 →10.12 递归递归函数是一个函数通过名称调用自己function factorial(num) { if (num <= 1) { return 1 } else { return num * factorial(num - 1) }}函数逻辑与函数名是藕和的，因此将递归函数赋值给其他变量，并解除原函数名与函数之间的关系后，会报错let anotherFactorial = factorial .
2021-08-11 09:27:59
179
原创 《javascript高级程序设计》学习笔记 | 10.9-10.11.函数内部
关注[前端小讴]，阅读更多原创技术文章相关代码 →10.9 函数内部ES5 中函数内部有 2 个特殊对象 arguments 和 this，1 个内部属性 callerES6 新增new.target属性10.9.1 argumentsarguments是一个类数组对象，包含调用函数时传入的所有参数只有以funciton关键字定义函数时才会有arguments对象（箭头函数没有）对象有一个callee属性，指向arguments所在函数的指针（注意：是指针即函数名，而非函数）严.
2021-08-04 10:12:07
154
2
原创 《javascript高级程序设计》学习笔记 | 10.1-10.8.函数基础
关注[前端小讴]，阅读更多原创技术文章函数是对象，每个函数都是 Function 类型的实例，都与其他引用类型一样具有属性和方法函数名是指向函数对象的指针，不会与某个函数绑定（一个函数可能会有多个名字）相关代码 →4 种定义方式// 1.函数声明定义function sum(num1, num2) { return num1 + num2}// 2.函数表达式定义let sum = function (num1, num2) { return num1 + num2}.
2021-07-16 09:36:06
231
原创 《javascript高级程序设计》学习笔记 | 9.3.代理模式
关注[前端小讴]，阅读更多原创技术文章代理模式相关代码 →跟踪属性访问通过捕获get、set、has等操作，可以监控对象何时何处被访问过const user = { name: 'Jake',}const proxy = new Proxy(user, { get(target, property, receiver) { console.log(`Getting ${property}`) return Reflect.get(...arguments) .
2021-06-29 14:13:35
104
原创 《javascript高级程序设计》学习笔记 | 9.2.代理捕获器与反射方法
关注[前端小讴]，阅读更多原创技术文章代理捕获器与反射方法代理可以捕获13 种不同的基本操作，代理对象上执行的任一种操作只会有一种捕获处理程序被调用，不存在重复捕获现象只要在代理上操作，所有捕获器都会拦截对应的反射 API 操作相关代码 →get()在获取属性值的操作中被调用，对应的反射 API 方法为Reflect.get(target, property, receiver)返回值无限制拦截的操作proxy.propertyproxy[property]Obj.
2021-06-17 09:43:55
178
原创 《javascript高级程序设计》学习笔记 | 9.1.代理基础
关注[前端小讴]，阅读更多原创技术文章代理基础ES6 为的代理和反射为开发者提供拦截并向基本操作嵌入额外行为的能力代理是目标对象的抽象，其可以用作目标对象的替身，但完全独立于目标对象目标对象既可直接被操作，也可通过代理来操作，直接操作会绕过代理施予的行为相关代码 →创建空代理使用Proxy构造函数创建代理，接收目标对象和处理程序对象两个参数（缺一不可）空代理是最简单的代理，可用空对象作为处理程序对象，空代理对象仅作为一个抽象的目标对象const target = { // .
2021-06-10 14:26:12
167
2
原创 《javascript高级程序设计》学习笔记 | 8.4.类
关注[前端小讴]，阅读更多原创技术文章类ES6 新引入class关键字具有正式定义类的能力，其背后使用的仍然是原型和构造函数的概念相关代码 →类定义与函数类型类似，定义类也有 2 种主要方式：类声明和类表达式，2 种方式都是用class关键字加大括号class Person {} // 类声明var animal = class {} // 类表达式类表达式在被求值前不能引用（同函数表达式），类定义不能声明提升（与函数表达式不同）console.log(FunctionD.
2021-06-01 14:45:58
148
原创 《javascript高级程序设计》学习笔记 | 8.3.继承
关注[前端小讴]，阅读更多原创技术文章继承面向对象语言支持 2 种继承方式：接口继承和实现继承JS 函数没有签名（不必提前声明变量的类型），只支持实现继承，依靠原型链相关代码 →原型链子类型构造函数的原型，被重写为超类型构造函数的实例function SuperType() { this.property = true}SuperType.prototype.getSuperValue = function () { return this.property}fun.
2021-05-25 10:07:33
177
8
原创 《javascript高级程序设计》学习笔记 | 8.2.创建对象
关注[前端小讴]，阅读更多原创技术文章创建对象创建单个对象：Object 构造函数 和 对象字面量缺点：使用一个接口创建很多对象，产生大量重复代码相关代码 →工厂模式抽象创建特定对象的过程，按照特定接口创建对象function createPerson(name, age, job) { var o = new Object() o.name = name o.age = age o.job = job o.sayName = function () { .
2021-05-10 09:59:40
113
原创 《javascript高级程序设计》学习笔记 | 8.1.理解对象
关注[前端小讴]，阅读更多原创技术文章理解对象ECMAScript 定义对象：无序属性的集合（一组没有特定顺序的值），其属性可以包含基本值、对象、函数，整个对象可以想象成一个散列表相关代码 →创建自定义对象的 2 种方法：Object 构造函数和对象字面量：用构造函数创建一个 Object 实例，然后为它添加属性和方法var person = new Object()person.name = 'Nicholas'person.age = 29person.job = 'S.
2021-04-23 15:21:39
122
原创 《javascript高级程序设计》学习笔记 | 7.3.生成器
关注[前端小讴]，阅读更多原创技术文章生成器ES6 新增的结构，可以在一个函数块内暂停和恢复代码执行，可以自定义迭代器和实现协程相关代码 →生成器基础生成器的形式是一个函数，函数名称前加一个星号*可以定义函数的地方，都可以定义生成器（箭头函数除外）function* generatorFn() {} // 生成器函数声明let gfn = function* () {} // 生成器函数表达式let foo = { *generatorFn() {}, // 生成器函数作为.
2021-04-20 16:05:08
364
4
原创 《javascript高级程序设计》学习笔记 | 7.2.迭代器模式
关注[前端小讴]，阅读更多原创技术文章迭代器模式ES6 新增了 2 个高级特性：迭代器和生成器迭代方法优/缺点for① 需知道如何使用数据结构 ② 遍历顺序不是固有的forEach()① 无法标识迭代终止 ② 只适用数组 ③ 回调结构较笨拙Iterator接口无需了解可迭代对象的结构，只需知道如何取得连续的值相关代码 →可迭代协议实现 Iterable 接口要求同时具备：① 支持迭代的自我识别 ② 创建实现 Iterator 接口的对象必须暴.
2021-04-13 15:52:35
132
原创 《javascript高级程序设计》学习笔记 | 6.5.WeakMap
关注[前端小讴]，阅读更多原创技术文章WeakMapWeakMap 是 ECMAScript6 的新增特性，是一种新的集合类型，是 Map 的“兄弟”类型，也是 Map 的子集“weak” 描述的是 JS 垃圾回收程序对待“弱映射”中键的方式相关代码 →基本 API使用new 关键字和WeakMap 构造函数可以创建一个空的弱映射const wm = new WeakMap()console.log(wm) // WeakMap {}若映射的键只能是Object或者.
2021-04-08 16:44:37
353
原创 《javascript高级程序设计》学习笔记 | 6.4.Map
关注[前端小讴]，阅读更多原创技术文章MapMap 是 ECMAScript6 的新增特性，是一种新的集合类型，其大多数特性都可以通过 Object 类型实现相关代码 →基本 API使用new 关键字和Map 构造函数可以创建一个空映射const m = new Map()console.log(m) // Map(0) {}可以给 Map 构造函数传入一个可迭代对象，需要包含键/值对数组// 嵌套数组初始化映射const m1 = new Map([ ['key1.
2021-03-26 10:32:55
118
原创 《javascript高级程序设计》学习笔记 | 6.2.Array
关注[前端小讴]，阅读更多原创技术文章ArrayECMAScript 的数组是一组有序的数据（和其他语言相同），每个槽位可以存储任意类型的数据（和其他语言不同）ECMAScript 的数组是动态大小的，随着数据添加而自动增长相关代码 →创建数组使用 Array 构造函数let colors = new Array()console.log(colors) // []给构造函数传入一个参数：若参数是数值，则 length 属性会被自动创建并设置为这个值；若参数不是数值，则创建.
2021-03-19 15:51:06
121
原创 实战：vue仿dos命令界面
欢迎关注[前端小讴的github][1]，阅读更多原创技术文章业务需求vue项目中弹出窗口，在窗口中执行dos命令技术栈vue + nodejs（child_process+koa）child_process是nodejs的子进程模块，child_process.exec可创建shell，然后在shell里执行命令。然而，child_process并不在webpack打包中，页面中打印child_process是一个不包含任何方法的空对象{}，因此需要用nodejs做服务端完成效果服.
2021-03-09 16:29:26
1561
原创 《javascript高级程序设计》学习笔记 | 4.1.原始值与引用值
关注[前端小讴]，阅读更多原创技术文章原始值与引用值JS 变量是松散类型的：① 不必规定变量的数据类型 ② 变量的值和数据类型可随时改变JS 变量可以包含 2 种类型的数据：原始值和引用值原始值是简单数据（6 种原始值：Undefined、Null、Boolean、Number、String、Symbol)，按值访问，操作实际值引用值是保存在内存中的对象，按引用访问，操作对该对象的引用（而非对象本身）相关代码 →动态属性对于引用值，可以随时添加、修改、删除其属性和方法le.
2021-03-01 10:06:19
302
7
原创 《javascript高级程序设计》学习笔记 | 3.3.变量
关注[前端小讴]，阅读更多原创技术文章变量ECMAScript 变量是松散类型的：变量可以保存任何类型的数据3 个声明变量的关键字：var、const、let相关代码 →var 关键字不初始化时，变量保存 undefinedvar messageconsole.log(message) // undefined初始化变量只是设置变量的值，可以改变保存的值，也可以改变值的类型var message = 'hi'message = 100 // 合法，但不推荐conso.
2021-02-03 15:28:20
91
原创 《javascript高级程序设计》学习笔记 | 6.2.创建对象
欢迎关注[前端小讴的github]，阅读更多原创技术文章创建对象创建单个对象：Object 构造函数 和 对象字面量缺点：使用一个接口创建很多对象，产生大量重复代码相关代码 →工厂模式抽象了创建具体对象的过程用函数来封装以特定接口创建对象的细节function createPerson(name, age, job) { var o = new Object() o.name = name o.age = age o.job = job o.sayName =.
2021-01-04 17:20:05
132
原创 《javascript高级程序设计》学习笔记 | 6.1.理解对象
欢迎关注[前端小讴的github]，阅读更多原创技术文章理解对象面向对象的语言标志：类的概念ECMAScript 中没有类的概念ECMAScript 定义对象：无序属性的集合（一组没有特定顺序的值），其属性可以包含基本值、对象、函数，整个对象可以想象成一个散列表相关代码 →创建一个 Object 实例，然后为它添加属性和方法var person = new Object()person.name = 'Nicholas'person.age = 29person.job = .
2020-11-30 14:19:48
85
原创 《javascript高级程序设计》学习笔记 | 5.7.单体内置对象
欢迎关注[前端小讴的github]，阅读更多原创技术文章单体内置对象相关代码 →由 ECMAScript 实现提供的，不依赖于宿主环境的对象，在 ECMAScript 程序执行之前就已经存在Global 和 MathGlobal 对象不属于任何其他对象的属性和方法，最终都是 Global 的属性和方法isNan()，isFinite()，parseInt()，parseFloat()URI 编码方法返回值encodeURI()URI 编码，冒号、正斜杠、问号.
2020-09-21 13:31:00
149
原创 小程序重构 [cnode社区]：mpvue + 开源api，现已上线！
欢迎关注[前端小讴的github]，阅读更多原创技术文章闲暇时光表浪费，由于技术栈一直用的vue，因此用 mpVue 开发了小程序版本的 cnode 社区，api 也都是官网开源的。有人会问 “mpvue不是已经停止维护了嘛？”——的确是的，而且使用起来有很有坑。但这是我第一次写小程序，找个最相近的语言最适合——无论选择哪种技术栈，产品要完整做出来才行。小程序现已上线，后续还将逐步尝试在taro、wepy、uni-app等框架开发，毕竟代码需要修改的比较少，争取实现“一套代码，多端通用”欢迎sta.
2020-08-26 11:39:11
368
原创 《javascript高级程序设计》学习笔记 | 5.6.基本包装类型
欢迎关注[前端小讴的github]，阅读更多原创技术文章基本包装类型相关代码 →3 个特殊的引用类型 Boolean、Number、String每读取一个基本类型值，后台就创建一个对应的基本包装类型的对象var s1 = 'some text'var s2 = s1.substring(2) // 基本类型不是对象，本不应该有方法// 因为后台自动完成了下列处理：var s1 = new String('some text') // 1.创建String类型的实例var s2 =.
2020-08-25 14:52:03
170
原创 解决 mpvue 经典 bug：同路由切换时，上次的数据会保留
关注前端小讴，阅读更多原创技术文章由于一直在用vue技术栈，因此初次开发小程序尝试使用【mpvue】。尽管听闻框架已停止维护，为了上手迅速，不顾可能存在的众多bug，毅然用起来。果不其然，一个大bug出现了：[同一路由切换时，上一次的页面数据会保留]项目实战bug：mpvue重构cnode社区github用户已在mpvue的issues给出相关原因：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gAyaUmec-1596778852857)(/img/bVbK.
2020-08-07 13:43:03
555
原创 手摸手，封装一个vue分页组件
关注前端小讴，阅读更多原创技术文章【组件化】是每一个前端工程师的必备技能，诚然我们将element、iview、vant等UI组件库运用得娴熟自如，实际开发中还是经常需要封装更适合的业务组件，既帮助快速开发、又让代码简洁明了、还能锻炼我们的组件化能力。梳理思路以node.js官网的分页组件为例，假设我们要实现下面这样的分页：从产品角度梳理思路后，要实现的分页组件有以下特点：1.当前页页码颜色变化2.最多显示5个页码，不足5个显示实际数量3.总页数超过5个时：总页码-当前页>2，则末.
2020-07-30 14:10:08
302
原创 《javascript高级程序设计》学习笔记 | 5.5.Function类型
欢迎关注[前端小讴的github]，阅读更多原创技术文章Function 类型函数是对象，每个函数都是 Function 类型的实例，都与其他引用类型一样具有属性和方法函数名是指向函数对象的指针，不会与某个函数绑定（一个函数可能会有多个名字）相关代码 →3 种声明方式// 1.函数声明定义function sum(num1, num2) { return num1 + num2}// 2.函数表达式定义var sum = function (num1, num2) { .
2020-07-20 15:49:11
185
原创 iview-dynamicRouter：基于 iview-admin 的“后端动态路由模板”，自由配置路由、自由更改菜单
欢迎关注[前端小讴的github]，阅读更多原创技术文章iView DynamicRouteriView-DynamicRouter 基于 iview-admin(branch:template)，由“后端动态提供路由数据，经前端处理后生成动态路由和菜单”的【后端动态路由模板】，内置“权限管理”业务模型，可任意调整左侧菜单栏、修改其相关权限、监听当前路由和菜单，是一套更安全、更智能的后台管理系统模板。项目地址在线预览 →github地址 →如果你想快速使用，请看 配置文档 →如果你想和我.
2020-06-28 16:01:00
1002
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人