- 博客(63)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue.js 3设计与实现 -- 双端 Diff 算法
哪些节点是新节点呢？因此，我们需要将节点 p-1 对应的真实 DOM 移动到旧的一组子节点的尾部节点 p-2 所对应的真实 DOM 后面，同时还需要更新相应的索引到下一个位置，如图 10-9 所示。 如上面的代码所示，如果旧的一组子节点的头部节点与新的一组子节点的尾部节点匹配， 则说明该旧节点所对应的真实 DOM 节点需要移动到尾部。于是我们尝试拿新的一组子节点中的头部节点 p-4 去旧的一组子节点中寻找具有相同 key 值的节点，但在旧的一组子节点中根本就没有 p-4 节点，如图 10-26 所示。
2025-02-05 12:02:36
1055
原创 vue.js 3设计与实现 -- 简单 Diff 算法
从本章开始，我们将介绍渲染器的核心 Diff 算法。简单来说，当新旧 vnode 的子节点都是一 组节点时，为了以最小的性能开销完成更新操作，需要比较两组子节点，用于比较的算法就叫作 Diff 算法。我们知道，操作 DOM 的性能开销通常比较大，而渲染器的核心 Diff 算法就是为了解决这个问题而诞生的。 核心 Diff 只关心新旧虚拟节点都存在一组子节点的情况。在上一章中，我们针对两组子节点的更新，采用了一种简单直接的手段，即卸载全部旧子节点，再挂载全部新子节点。这么做的确可以完成更新，但由于没有复用任
2025-02-05 12:02:19
776
原创 vue.js 3设计与实现 -- 挂载与更新（三）
在上一节中，我们介绍了基本的事件处理。本节我们将讨论事件冒泡与更新时机相结合所导 致的问题。 这个例子比较复杂。在上面这段代码中，我们创建一个响应式数据 bol，它是一个 ref，初 始值为 false。接着，创建了一个 effect，并在副作用函数内调用 renderer.render 函数来渲染 vnode。这里的重点在于该 vnode 对象，它描述了一个 div 元素，并且该 div 元素具有一个 p 元素 作为子节点。我们再来详细看看 div 元素以及 p 元素的特点。div 元素。
2025-02-05 12:01:51
575
原创 vue.js 3设计与实现 -- 挂载与更新（二）
在上一节中，我们讲解了如何正确地把 vnode.props 中定义的属性设置到 DOM 元素上。但在 Vue.js 中，仍然有一些属性需要特殊处理，比如 class 属性。为什么需要对 class 属性进行特殊处理呢？这是因为 Vue.js 对 calss 属性做了增强。 在 Vue.js 中为元素设置类名有以下几种方式。方式一：指定 class 为一个字符串值。</ 方式二：指定 class 为一个对象值。</ 方式三：class 是包含上述两种类型的数组。</
2025-02-05 12:01:29
587
原创 vue.js 3设计与实现 -- 挂载与更新（一）
在这章中，我们主要介绍了渲染器的基本概念和整体架构。本章，我们将讲解渲染器的核心功能：挂载与更新。
2025-02-05 12:01:01
668
原创 babel-插件
上节课补充：@babel/polyfill 已过时，目前被core-js和所取代通常情况下，只转换那些已经形成正式标准的语法，对于某些处于提案早期阶段、还没有确定的语法不做转换。如果要转换这些语法，就要单独使用插件，下面随便列举一些插件。
2025-02-05 11:58:32
240
原创 babel-安装和使用
babel 一词来自于希伯来语，直译为巴别塔。巴别塔象征的统一的国度、统一的语言。而今天的 JS 世界缺少一座巴别塔，不同版本的浏览器能识别的 ES 标准并不相同，就导致了开发者面对不同版本的浏览器要使用不同的语言，和古巴比伦一样，前端开发也面临着这样的困境。babel 的出现，就是用于解决这样的问题，它是一个编译器，可以把不同标准书写的语言，编译为统一的、能被各种浏览器识别的语言。官网：https://babeljs.io/ 中文网：https://www.babeljs.cn/
2025-02-04 13:17:21
404
原创 你不知道的JavaScript-this和对象原型（二）-全面解析this
在理解this的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。只有仔细分析调用位置才能回答这个问题：这个this到底引用的是什么？通常来说，寻找调用位置就是寻找“函数被调用的位置”，但是做起来并没有这么简单，因为某些编程模式可能会隐藏真正的调用位置。最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置就在当前正在执行的函数的前一个调用中。注意我们是如何（从调用栈中）分析出真正的调用位置的，因为它决定了 this 的绑定。
2025-02-04 13:06:00
916
原创 你不知道的JavaScript-this和对象原型（一）-关于this
这段代码可以在不同的上下文对象（me 和 you）中重复使用函数identify()和speak()，不用针对每个对象编写不同版本的函数。如果不使用this，那就需要给identify()和speak()显式传入一个上下文对象。然而，this提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计得更加简洁并且易于复用。随着你的使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用this则不会这样。
2025-02-04 13:04:51
302
原创 CSS module
通过命名规范来限制类名太过死板，而 css in js 虽然足够灵活，但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题。
2025-02-04 12:43:33
494
原创 CSS in JS
至于如何把样式应用到界面上，不是它所关心的事情，你可以用任何技术、任何框架、任何方式将它应用到界面。css in js 的核心思想是：用一个 JS 对象来描述样式，而不是 css 样式表。后续学习的 vue、react 都支持 css in js，可以非常轻松的应用到界面。由于这种描述样式的方式。，自然不会有类名冲突。
2025-02-04 12:41:11
324
原创 BEM规范
BEM（Block、Element、Modifier）是一种 CSS 类名命名规范。该规范的核心思想是将页面分解成独立的块（Blocks）、元素（Elements）以及修饰器（Modifiers），以提高开发的效率和质量。这些概念有助于团队协作，简化代码管理和维护，并减少CSS特异性的问题，从而降低样式冲突的风险。
2025-02-04 12:40:15
210
原创 CSS工程化概述
当你写一个 css 类的时候，你是写全局的类呢，还是写多个层级选择后的类呢？你会发现，怎么都不好一旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题。
2025-02-04 12:38:35
438
原创 跨域问题和解决方案
是一套浏览器，当一个的文档和脚本，与另一个的资源进行通信时，同源策略就会对这个通信做出不同程度的限制。简单来说，同源策略对，对因此限制造成的开发问题，称之为。
2025-02-04 12:31:11
1113
原创 浏览器的通信能力
大部分 GET 请求传递的数据都附带在 path 参数中，能够通过分享地址完整的重现页面，但同时也暴露了数据，若有敏感数据传递，不应该使用 GET 请求，至少不应该放到 path 中。最早是微软在IE浏览器中把这一能力向JS开放，让JS可以在代码中实现发送请求，并不会刷新页面，这项技术在2005年被正式命名为AJAX（刷新页面时，若当前的页面是通过 POST 请求得到的，则浏览器会提示用户是否重新提交。浏览器会拿到当前页面的地址，以及当前页面的请求方法，重新发一次请求，同时抛弃当前页面。
2025-02-04 12:23:03
553
原创 ESLint
ESLint 是一个针对 JS 的代码风格工具，当不满足其要求的风格时，会给予警告或错误。官网：https://eslint.org/中文网：https://eslint.nodejs.cn/
2025-02-04 12:14:48
1032
原创 webpack-bundle分析
使用交互式可缩放树状图可视化 webpack 输出文件的大小的插件，帮助使用者更加方便的分析打包结果，便于使用者优化项目构建。
2025-02-04 12:13:36
169
原创 webpack传输性能优化
手动打包的过程开启暴露公共模块用DllPlugin创建资源清单用使用资源清单手动打包的注意事项资源清单不参与运行，可以不放到打包目录中。记得手动引入公共 JS，以及避免被删除。不要对小型的公共 JS 库使用。优点极大提升自身模块的打包速度。极大的缩小了自身文件体积。有利于浏览器缓存第三方库的公共代码。缺点使用非常繁琐。如果第三方库中都导入了相同的依赖，则第三方库打包后都会包含重复的代码，效果不太理想。
2025-02-03 21:42:59
908
原创 webpack性能优化概述
因为你在开发的时候，无法完全预知最终的运行性能，过早的关注性能会极大的降低开发效率。构建性能会影响开发效率。构建性能越高，开发过程中时间的浪费越少。传输性能是指，打包后的 JS 代码传输到浏览器经过的时间。运行性能是指，JS 代码在浏览器端的运行速度。它主要取决于我们如何书写高性能的代码。性能优化主要从上面三个维度入手，，而不是生产环境的构建性能。这里所说的构建性能，是指在。
2025-02-03 21:31:01
229
原创 npm知识
npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个包（package）（即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
2025-02-03 21:16:05
986
原创 node模块查找策略
在路径 Y 中引入 X 模块：如果 X 是核心模块a. 返回核心模块b. 停止如果 X 以开头a. 将 Y 设置为文件系统根目录如果 X 以./或或../开头如果 X 以开头抛出 “not found” 错误如果 X 是一个文件，则按照其文件扩展名格式加载 X。停止如果 X.js 是一个文件a. 找到距离 X 最近的包作用域 SCOPE。b. 如果没有找到 scopec. 如果 SCOPE/package.json 包含type字段。
2025-02-03 21:13:07
961
原创 浏览器模块化难题
当使用require正是这两个步骤，使得 CommonJS 在 node 端可以良好的被支持可以认为，，必须要等到加载完文件并执行完代码后才能继续向后执行。
2025-02-03 21:10:14
430
原创 AMD模块
在介绍 AMD 之前，我们需要了解 CommonJS 规范。CommonJS 是服务器端 JavaScript（如Node.js）的模块化标准，它使用同步方式加载模块。然而，这种方式并不适用于浏览器环境，因为 JavaScript 文件需要从服务器异步加载。AMD 规范应运而生，AMD 全称 Asynchronous module definition，意为异步的模块定义 ，不同于 CommonJS 规范的同步加载，AMD 正如其名所有模块默认都是异步加载，它允许模块异步加载，不会阻塞浏览器的其他操作。
2025-02-03 21:07:21
293
原创 ESmodule工作机制
在 index.html 导入 main.js</在 main.js 中导入 bar.js在 bar.js 中导入 foo.js 然后动态导入 async.js首先浏览器使用 ESModule 导入了 main.js，在这 main.js 里面又间接或直接导入了其他的 js。形成了模块化的依赖。
2025-02-03 21:05:57
311
原创 CommonJS 和 ES6module 的区别
CommonJS 与 ES6 Module 最本质的区别在于前者对模块依赖的解决是“动态的”，而后者是“静态的”。在这里“动态”的含义是，模块依赖关系的建立发生在代码运行阶段：而“静态”则表示模块依赖关系的建立发生在代码编译阶段。模块 A 在加载模块 B 时会执行 B 中的代码，并将其对象作为require函数的返回值返回。require的模块路径可以动态指定，支持传入一个表达式，甚至可以通过if语句判断是否加载某个模块。
2025-02-03 21:04:05
803
原创 ES6Module
JavaScript 之父 Brendan Eich 在最初设计这门语言时，并没有包含模块的概念。基于越来越多的工程需求，为了使用模块化进行开发，JavaScript 社区涌现出了多种模块标准，其中也包括 CommonJS。一直到 2015 年 6 月，由 TC39 标准委员会正式发布 ES6(ECMAScript6.0)，自此 JavaScript 语言才具备了模块这一特性。
2025-02-03 21:02:24
821
原创 CommonJS
CommonJS 是由 JavaScript 社区于 2oo9 年提出的包含模块、文件、IO、控制台在内的一系列标准。Node.js 的实现中采用了 CommonJS 标准的一部分，并在其基础上进行了一些调整。我们所说的 CommonJS 模块和 Node.js 中的实现并不完全一样，现在一般谈到 CommonJS 其实是 Node.js 中的版本，而非它的原始定义。
2025-02-03 20:53:37
675
原创 事件循环EventLoop
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
2025-02-03 20:41:20
704
原创 浏览器渲染原理
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算，即将回流任务推向消息队列。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，为了获取元素最新的布局属性，最终决定读取布局属性时会立即进行 reflow。
2025-02-03 20:34:03
964
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人