- 博客(62)
- 收藏
- 关注
RSS订阅原创 第 7 章 渲染器的设计
7.1 渲染器与响应系统的结合顾名思义，渲染器是用来执行渲染任务的。在浏览器平台上，用它来渲染器中的真实DOM元素。渲染器不仅能够渲染真实DOM元素，还是框架跨平台能力的关键。因此，在设计渲染器的时候一定要考虑好可自定义的能力。本节，暂定将渲染器限定在DOM平台，下面的函数就是一个合格的渲染器function renderer(doString, container) { container.innerHTML = doString}我们可以如下所示使用它：renderer('<h1&
2022-03-06 10:56:00
384
原创 第 4 章 - 响应式系统的作用与实现
4.1 响应式数据与副作用函数副作用函数指的是会产生副作用的函数，如下面的代码所示function effect() { document.body.innerText = 'hello vue3'}当 effect 函数执行时，它会设置 body 的文本内容，但除了 effect 函数之外的任何函数都可以读取或设置 body 的文本内容。也就是说，effect 函数的执行会直接或间接影响其他函数的执行，这时，我们说 effect 函数产生了副作用。副作用很容易产生，例如一个函数修改了全局变量，
2022-03-01 22:25:14
468
原创 第 3 章 Vue.js3的设计思路
3.1 声明式地描述 UIVue.js3是一个声明式的UI框架，意思说用户在使用 Vue.js3开发页面时是声明式地描述UI的。我们需要了解编写前端页面都设计哪些内容，具体如下。DOM元素：例如是 div 标签还是 a 标签属性：如 a 标签的 href 属性，再如 id、class等通用属性事件：如 click、keydown等元素的层级结构：DOM树的层级结构，既有字节点，又有父节点如何声明式的描述上述内容呢？这是框架设计者需要思考的问题。其实方案有很多。拿 Vue.j 来说：使用
2022-02-26 12:13:35
632
原创 webpack 中 Tree Shaking 概念详解_15
webpack tree shaking概念。ES module导出的代码打包的时候进行tree shaking 摇晃掉多余的代码
2022-02-09 21:17:26
800
原创 手把手实现vue响应式原理 - Reflect 中receiver的作用（五）
代理对象中拦截 get 和 set，通过receiver，改变obj 中 get /set 函数中的 this 为 代理对象
2021-12-14 22:01:44
1772
原创 标记清除算法实现原理 和 优缺点
标记清除算法核心思想：分标记和清除第二个阶段完成遍历所有对象找到标记活动（可达）对象 遍历所有对象清除没有标记对象 回收相应的空间第一个解读那遍历所有对象，找到可达对象并标记，第二个阶段遍历所有对象清除没有标记的对象，并抹除可达对象的标记在全局上可以找A、B、C三个可达对象，找到之后发现下面还有D、E子引用，GC算法会用递归的方式继续找到可达对象。而 a1 和 b2 可能位于局部作用域中，在函数执行完后被回收了，global找不到 a1 和 b2的，GC机制认为它就是一个垃圾..
2021-08-11 08:56:41
1374
原创 引用计数算法优缺点
引用计数算法的优点发现垃圾时立即回收：根据当前的引用数是否为 0 来决定这个对象是不是垃圾，如果找到了可以立即释放 最大限度减少程序暂停：应用程序在执行的过程中，必然会对内存进行消耗，而当前的执行平台内存肯定是有上限的，内存有占满的时候，不过由于引用计数算法是时刻监控着引用对象，当内存要占满的时候，引用计数立马找到数字为 0 的对象，对其进行释放，所以保证了内存不会有占满的时候。引用计数算法的缺点无法回收循环引用的对象:fn函数调用结束后，在全局下找不到 obj1 和 obj2 但是 fn
2021-08-11 08:19:58
858
原创 引用计数算法实现原理 和 优缺点
引用计数算法核心思想：设置引用数，判断当前引用数是否为 0 引用计数器 引用关系改变时修改引用数字 应用数字为 0 时立即回收// reference countconst user1 = {age: 11}const user2 = {age: 22}const user3 = {age: 33}const nameList = [user1.age, user2.age, user3.age]function fn() { num1 = 1 num2 = .
2021-08-10 09:03:36
407
原创 GC算法介绍
GC 定义与作用GC 就是垃圾回收机制的简写 GC 可以找到内存中的垃圾、并释放和回收空间GC 里的垃圾是什么程序中不再需要使用对象function func() { name = "deyang" return `${name} is a coder`}func()从程序需求的角度，上述程序中的 name，再函数调用后 其实已经不在需要name了，从我们需求的角度应该是被当作垃圾回收的。至于有没有被回收，现在不做讨论function func() {.
2021-08-10 08:48:30
125
原创 JavaScript 中的垃圾回收
JavaScript 中的垃圾JavaScript 中的内存管理是自动的 对象不再被引用时是垃圾 对象不能从根本上访问到时是垃圾每当我们创建一个对象、数组或者函数的时候会自动的分配相应的内存空间，后面执行的过程中，通过引用关系无法找到某些对象的时候，这些个对象就会被看作是垃圾。但是由于代码当中不合适的语法或者是结构性的错误，让我们没有办法找到对应的对象，这种对象也是垃圾JavaScript 中的可达对象可以访问到的对象就是可达对象（引用、作用域链） 可达的标注就是从根触发是否能够被找
2021-08-10 08:30:56
170
原创 Javascript内存管理
内存为什么需要管理？function fn() { arrList = [] arrList = [100000] = 'dy is a coder'}fn()上面这段函数，从语法的层面来说，不存在任何问题的，不过当我们用相应的性能监测工具对脚本执行的过程进行监测的时候，我们会发现，他的内存变化，和我们看到的蓝色线条一样是持续升高的，在这个过程中并没有看到回落，这代表着：内存泄露。至于是如何泄漏的我们现在不需要纠结如果说我们在写代码的时候，不够了解内存管理的一些机制，
2021-08-09 23:54:26
160
原创 10 分钟搞懂 key 对vue3 diff性能提升
10分钟 搞懂 key 对 vue3 diff性能的提升（真的10分钟）没有 key 的源码操作没有 key 的过程如下有 key 的源码操作有 key 的diff 图解如下Talk is cheap, show you the code点击按钮时会在中间插入一个 f我们可以确定的是，这次更新对于ul和button是不需要进行的，需要更新的是我们li的列表：在 vue 中，对于相同父元素的子节点并不会重新渲染整个列表因为对于列表中的a、b、c、d 它们都是没有变化的在操作真实 DOM 的
2021-06-29 00:10:50
626
3
原创 element table 批量下载导出.csv文件
批量下载导出.csv文件根据以下线索自己分析，太简单没什么好说的multipleDownloadSource() { // 在table上打个ref直接通过这个方式获取table选中的值 let data = this.$refs.multipleTable.selection; let str = '来源名称，来源链接\n'; // 对数据进行处理，换列换行 for (let i = 0; i < data.length; i++) { if
2021-04-02 17:12:55
729
原创 element table展示二维码及下载
element table展示二维码及下载使用element ui 的table组件循环渲染二维码以及踩坑二维码单个下载封装使用element ui 的table组件循环渲染二维码以及踩坑下载安装依赖npm install qrcodejs --save-devimport QRCode from 'qrcodejs2'; <xx-table-column prop="qrcode_src" min-width="76" label="二维码"> <templa
2021-04-02 16:59:19
1760
1
原创 Vue源码分析-createComponent
import Vue from 'vue'import App from './App.vuevar app = new Vue({ el: 'app', render(h) { return h(App) }})我们这里的tag是一个组件对象，所以vnode是通过createComponent()生成，方法的定义是在/vdom/createComponent.js/文件中定义的Ctor可以是一个组件类型的类，或者是函数或对象，data是vnode相关的data,context是.
2021-02-19 12:23:02
728
原创 Vue源码分析-update
_update方法挂载在vue原型上，调用的时机有两个，一个是首次渲染的时候把我们的vnode映射成虚拟dom，另一个就是我们改变数据的时候，数据改变驱动视图的变化，同样也会调用_update初始化渲染的时候调用vm.__patch__因为vue也可以运行在服务端，是没有dom的。如果是浏览器环境就调用patch方法否则就是空函数，patch方法里面调用createPatchFunction，参数nodeOps是我们一些操作dom的方法，参数modules是platformModules和b.
2021-02-18 18:06:55
1029
原创 Vue源码分析-createElement
createElementcreateElement有6个属性，context是传入的vm实例，tag标签，data是跟vnode相关的数据，children是vnode的字节点，可以构建出整个vnode的tree，下面第一个判断是对参数个数的处理，如果没有传入data，就往前移，data是undefined。下面的是通过对awaysNormalize的判断，对normalizationType赋值常量，最终createElement对参数进行封装处理后返回_createElement调用_crea
2021-02-18 11:46:42
614
原创 Vue源码分析-render的实现
_render方法是在让render.js文件定义的，在原型上挂载了这个方法，方法中从$options上拿到render，render可以是手写，也可以是编译生成之后调用render.call(vm._renderProxy, vm.$createElement);，第一个参数是执行的上下文_renderProxy对象，第二个参数$createElement两个createElement的区别就是最后一个参数false和true,一个是手写render函数，另一个是编译生成的render函数。这个.
2021-02-18 10:29:29
1002
1
原创 Vue源码分析-实例挂载的实现
这里选用的是runtime and compile版本的vue，首先用mount变量缓存起来Vue的原型上挂载的$mount方法，然后又重新定义了$mount方法。这个$mount方法其实是在引入的./runtime/index文件中定义的，为什么要重新定义一遍，因为runtime only 版本是没有这个逻辑的，实际上是给runtime only版本用的当在初始化执行vm.$mount(vm.$options.el)挂载的时候，实际上调用的重写后的$mount函数，这个函数首先对el参数做了一个处理.
2021-02-18 09:42:35
203
原创 vue源码分析-new Vue发生了什么
简单描述new Vue发生了什么Vue是function实现的class，当执行new Vue()的时候，会进入到这个function，执行this._init()初始化，同时传入options参数，_init方法是在原型上挂载的方法，它是在什么时候被定义的呢？实际上我们初始化的时候下面会执行initMixin()混入，这个方法是在init.js中被定义的，方法中在原型上挂载_init方法_init方法做了一堆初始化的操作，比如定义uid，合并options，它会把传入的options合并到$op
2021-02-17 22:05:49
4891
5
原创 webpackDevServer的使用_11
使用WebpackDevServer提升开发效率WebpackDevServer的使用搭建WebpackDevServer的使用修改webpack配置文件如下我们现在有一个问题，就是每次我修改完代码，想在浏览器上运行都需要手动的打开命令行，执行 npm run bundle 这个命令重新打包一次，然后再手动的打开dist目录下的index.html。这样的话，我们的开发效率是非常低下的。我们目前想要实现的是：如果我修改了src下面的源代码，dist目录下面的文件自动被打包修改，我再去页面看效果就简
2020-12-02 11:47:57
454
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人