sbnns-CSDN博客

原创手写Vue2响应式原理，definePorperty，依赖收集

到这里仅仅只是对每个变量进行了重写，但是如果更新了数据，页面并不会发生改变，因为并没有重新调用change方法，所以页面的内容没有重新赋值仍是hello。如果能在每次set完之后，就去执行change函数，那就能做到页面更新，但如果多个函数依赖到此数据就麻烦了。都知道Vue2响应式原理用的是definePorperty，那到底是怎么实现的，下面就来逐步分析去实现响应式的页面更新。所以接下来，我们要收集依赖此数据的函数或变量（收集依赖），然后实现页面更新（派发更新）

2024-06-10 16:54:00 286

原创实现手写Promise

均返回一个新的promise对象，返回的promise对象状态与传的参数有关，这里不再细分，以后再说。promise有三个状态，分别是pending，fulfilled，rejected，在创建对象之初为pending（待定）状态，调用resolve后变为fullfilled（成功）状态，调用reject后变为rejected（失败）状态。在创建对象时，传入一个函数参数，同时函数立即执行，函数又接受两个函数作为参数，调用resolve或者reject后状态发生改变且不会再变。

2024-06-07 11:46:28 226

原创浏览器渲染顺序原理，reflow，repaint，transform

浏览器渲染过程有八个阶段：解析html，样式计算，布局，分层，绘制，分块，光栅化，画。循序渐进，每个环节都会成为下一个环节的准备。如下。

2024-06-05 11:18:50 992

原创 JS事件循环，浏览器进程、线程，渲染主线程，队列

也可以成为队列循环。他是浏览器渲染主进程的工作方式，在 Chrome 的源码中，它会开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，其它线程只需要在合适的时候将任务加到队列末尾即可。过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的方式：根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同任务可以属于不同队列。不同任务有不同的优先级，在一次事件循环中，由浏览器自行决定取哪个队列的任务。

2024-06-04 17:26:24 440

原创 es6本地文件直接模块导入跨域。commonjs，es6模块导入导出。

再来看CommonJs，他俩的区别，es6导出的相当于一个变量可以是对象也可以是其他类型，CommonJs导出的是一个对象，用module.exports和require实现导出导入。CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。接下来继续我刚才的思路，我想通过一个html页面去改变一个js文件的内容，达到去让另一个html页面得到改变的js文件内容，但忽略了页面跳转后上一个页面对数据改动不会影响后续页面。而本地打开的文件，而file协议并不支持。

2024-06-03 20:47:19 238 1

原创 dom和jquery基础（刷题版）

dom.classList.add（‘1’，‘2’，‘3’），dom.classList.remove（‘1’，‘2’，‘3’），dom.classList.toggle（‘类名’）切换类名（有则删除，无则添加）。$().addClass（‘类名1 类名2’），$().removeClass（‘类名1 类名2’），$().toggleClass("类名") 切换类;2.$().css（‘样式名’，‘值’），多个样式$().css（‘样式名1’：‘值’ ，‘样式名2’：‘值’）

2024-05-31 10:00:00 501 2

原创为什么要用虚拟DOM

第一点，由于vue或者是react能做到的最小程度的重新渲染程度范围是‘组件’，所以虚拟dom的出现是为了降低重新渲染颗粒度。而用虚拟dom，就会先生成一个虚拟dom树，使用diff算法，将之前的dom树与新的虚拟dom树去做对比，只重新渲染发生变化的部分。因为不同的运行环境如移动段或者pc端，只有浏览器才有真实dom，移动端就用不了真实dom。虚拟dom的本质就是一个js对象，里面有props，childrens，children里面又有props和childrens，像是标签一样嵌套。

2024-05-29 10:00:00 186

原创讲讲await

await等待他修饰的对象完成后，会把完成的结果添加到微队列中（没有返回值就是undefined），再把await后面的代码添加到微队列，如果后续没有代码，就是把await修饰的函数 ‘完成’（实际上还没执行完成）加到微队列，await修饰的代码没执行完之前不会执行后续代码。，拿出去就会把他后面的输出2添加到微队列，然后微队列下一个是asy3的输出6，然后再是输出2。至此微队列结束，看计时队列，先是一个promise对象，把输出3添加到微队列，然后输出4，最后剩下输出3。加进了微队列里，输出2也就不执行。

2024-05-27 18:08:35 167

sbnns的博客