- 博客(281)
- 收藏
- 关注
RSS订阅原创 【 自动化构建 】深入前端脚手架实现原理
前端脚手架正是这样的工具，它能够将繁琐的配置和基础代码生成自动化，让开发者将重点放在创造性的工作上。前端脚手架是当代前端开发者的得力助手，它通过自动化日常重复性任务，保证了开发流程的快速和稳定。前端脚手架不仅提高了开发效率，还帮助团队成员对项目有一个清晰的理解，减少了沟通成本和协作障碍。随着技术的不断进步，前端脚手架也在不断地演进，它将持续引领前端开发的高效和创新。本文希望能够让你对前端脚手架有一个清晰的认识，无论你是前端领域的新手还是资深专家，都可以利用脚手架提升你的工作效率，加速你的项目开发进程。
2024-03-29 10:38:02
294
原创 【 Vue 】Diff 算法上
上一章我们讨论了渲染器是如何更新各种类型的VNode的，实际上，上一章所讲解的内容归属于完整的Diff算法之内，但并不包含核心的Diff算法。那什么才是核心的Diff算法呢？看下图：我们曾在上一章中讲解子节点更新的时候见到过这张图，当时我们提到只有当新旧子节点的类型都是多个子节点时，核心Diff为了便于表述，我们把这个算法称为：简单Diff算法。简单Diff算法虽然能够达到目的，但并非最佳处理方式。我们经常会遇到可排序的列表，假设我们有一个由li列表中的li标签是ul。
2024-03-27 16:21:20
1316
原创 【 Vue 】渲染器之挂载
本章主要讲解渲染器将各种类型的VNode挂载为真实DOM的原理，阅读本章内容你将对Fragment和Portal有更加深入的理解，同时渲染器对有状态组件和函数式组件的挂载实际上也透露了有状态组件和函数式组件的实现原理，这都会包含在本章的内容之中。另外本章的代码将使用上一章所编写的h函数，所以请确保你已经阅读了上一章的内容。
2024-03-26 14:27:24
654
原创 【 Vue 】自定义渲染器和异步渲染
渲染器是围绕而存在的，在Web平台下它能够把渲染为浏览器中的真实DOM对象，通过前面几章的讲解，相信你已经能够认识到渲染器的实现原理，为了能够将渲染为真实DOM，渲染器内部需要调用浏览器提供的DOM编程接口，下面罗列了在出上一章中我们曾经使用到的那些浏览器为我们提供的DOM：创建标签元素。：创建文本元素。：修改文本元素的内容。：移除DOM元素。：插入DOM元素。：追加DOM元素。：获取父元素。：获取下一个兄弟元素。：挂载Portal类型的VNode时，用它查找挂载点。这些DOM。
2024-03-22 22:57:35
1001
原创 【 Vue 】辅助创建VNode的h函数
自从有了VNode，开发页面的方式就变成了书写VNode，但如果日常开发中需要手写VNode，那绝对是反人类的，在“组件的本质”一章中我们使用了snabbdom的h函数来辅助讲解一些小例子，h函数作为创建VNode对象的函数封装，在一定程度上改善了这个问题，但却没有解决本质问题，这也是为什么我们需要模板或jsx的原因。但h函数依然很重要，因为无论是模板还是jsx都需要经过编译，那么是直接编译成VNode树好呢？还是编译成由h函数组成的调用集合好呢？
2024-03-21 10:24:06
625
原创 【 Vue 】设计 VNode
上一章讲述了组件的本质，知道了一个组件的产出是 VNode，渲染器(Renderer)的渲染目标也是 VNode。可见 VNode 在框架设计的整个环节中都非常重要，甚至设计 VNode 本身就是在设计框架，VNode 的设计还会对后续算法的性能产生影响。本章我们就着手对 VNode 进行一定的设计，尝试用 VNode 描述各类渲染内容。
2024-03-20 08:15:00
838
1
原创 【 Vue 】组件的本质
当我们使用Vue或React时，往往会将页面拆分为各种组件，通过拼装组件来形成页面和应用，就像搭积木一样。那么，大家有没有思考过：“组件的产出是什么？
2024-03-19 09:43:38
905
原创 【Vue】从源码解读Vue生命周期
其实和回调是一个概念，当系统执行到某处时，检查是否有hook(钩子)，有的话就会执行回调。通俗的说，hook就是在程序运行中，在某个特定的位置，框架的开发者设计好了一个钩子来告诉我们当前程序已经运行到特定的位置了，会触发一个回调函数，并提供给我们，让我们可以在生命周期的特定阶段进行相关业务代码的编写。
2024-03-18 13:45:08
766
原创 【 JS 】参数按值传递
在《JavaScript高级程序设计》第三版 4.1.3，讲到传递参数：ECMAScript中所有函数的参数都是按值传递的。什么是按值传递呢？也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。
2024-03-17 08:15:00
321
原创 【 JS 】闭包
MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。那什么是自由变量呢？自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。由此，我们可以看出闭包共有两部分组成：闭包 = 函数 + 函数能够访问的自由变量var a = 1;foo();foo 函数可以访问变量 a，但是 a 既不是 foo 函数的局部变量，也不是 foo 函数的参数，所以 a 就是自由变量。那么，函数 foo + foo 函数访问的自由变量 a 不就是构成了一个闭包嘛……还真是这样的！
2024-03-16 08:15:00
918
原创 【 JS 】执行上下文
在中讲到，当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。然后分别在中讲解了这三个属性。
2024-03-15 08:30:00
340
原创 【 JS 】从 ECMAScript 规范解读 this
无论你面对怎样的挑战，记住心中的那团火焰，它将点燃你前进的道路，引领你走向成功的彼岸。在中讲到，当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性今天重点讲讲 this，然而不好讲。因为我们要从 ECMASciript5 规范开始讲起。先奉上 ECMAScript 5.1 规范地址：英文版：http://es5.github.io/#x15.1让我们开始了解规范吧！
2024-03-14 08:15:00
773
原创 【 JS 】作用链域
勇敢地面对困难，相信自己的能力，你将会创造出属于自己的辉煌。在中讲到，当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。今天重点讲讲作用域链。
2024-03-13 08:30:00
332
原创 【 JS 】变量对象
成功的关键在于相信自己能够做到，即使别人对你的能力表示怀疑。当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。今天重点讲讲创建变量对象的过程。
2024-03-12 08:30:00
779
原创 【 JS 】 执行上下文栈
打印的结果却是两个 foo2。刷过面试题的都知道这是因为 JavaScript 引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。当执行一段代码的时候，会进行一个“准备工作”，比如第一个例子中的变量提升，和第二个例子中的函数提升。但是本文真正想让大家思考的是：这个“一段一段”中的“段”究竟是怎么划分的呢？到底JavaScript引擎遇到一段怎样的代码时才会做“准备工作”呢？
2024-03-11 10:08:49
363
原创 【 JS 】深入之继承的多种方式和优缺点
生活是一幅绚丽的画，每一刻都是色彩的斑斓。在画布上，用坚韧的笔触勾勒出自己的世界，让每一幅画作都是奋斗的痕迹，成就属于自己的艺术之旅。” - 梵高。
2024-03-09 08:15:00
349
原创 【 JS 】从原型到原型链
生命是一篇深邃的诗，每一个字都蕴含着奋斗的力量。在诗篇的律动中，用坚持书写，让每一行都充满勇气的韵律，谱写出属于自己的辉煌诗歌。” - 罗伯特·弗罗斯特。
2024-03-08 08:45:00
1645
原创 【 HTML 及浏览器 】DOM 树
DOM（Document Object Model）树，是一个以树形结构呈现的HTML文档模型。它将网页构造成一个由节点构成的层级系统，就像家族谱一样，每个家庭成员在树状图中占有一席之地。首先我们介绍了 DOM 是如何生成的，然后又基于 DOM 的生成过程分析了 JavaScript 是如何影响到 DOM 生成的。因为 CSS 和 JavaScript 都会影响到 DOM 的生成，所以我们又介绍了一些加速生成 DOM 的方案，理解了这些，能让你更加深刻地理解如何去优化首次页面渲染。
2024-03-07 08:45:00
888
原创 【 HTML 及浏览器 】Hash 与 History 之争
当今的单页面应用（Single Page Application，简称SPA）在提供丝滑般用户体验的同时，也带来了前端路由管理的挑战。前端路由的核心在于，在不重新加载整个页面的情况下，能够更新视图与同步URL。这里，我们将深入探讨前端路由的两大模式：Hash模式与History模式。
2024-03-06 08:45:00
834
原创 【 HTML 及浏览器 】前端跨页面通信
在构建复杂的前端应用时，我们常常需要在不同的页面之间进行数据通信。无论是同源页面还是非同源页面，通信机制都是实现多页面数据同步和交互的关键。本文将探讨各种前端跨页面通信的方法，并提供最佳实践指南。
2024-03-05 08:30:00
392
原创 【 HTML 】行内元素与块级元素的奥秘
人生似一首悠扬的乐章，每一个音符都是勇气的诗句。在旋律的引导下，用坚韧的演奏，奏响属于自己的壮丽旋律，让生命之歌充满激情和意义。” - 莫扎特在网页布局的大舞台上，行内元素和块级元素是两类基础的表演者。了解他们的特性和行为，对于前端工程师来说，就如同建筑师熟知砖瓦和水泥的性能一样重要。
2024-03-04 10:05:45
419
原创 【 JS 进阶 】正则表达式
生命是一幅抽象画，每一笔都是独特的经历。在色彩的交织中，用坚定的画笔勾勒出自己的轨迹，让每一幅画作都成为奋斗的印记。” - 亚历山大·斯密斯。
2024-03-01 08:00:00
923
原创 【 JS 进阶 】Web APIs 本地存储
人生是一场精彩的演出，每一天都是独一无二的场景。在舞台上，用勇气的脚步跳出靓丽的舞姿，用梦想的旋律奏响自己的人生交响曲，让每一刻都成为不可复制的绚烂瞬间。” - 卡洛斯·卡斯塔内达。
2024-02-29 07:45:00
1748
原创 【 JS 进阶 】Web APIs（六）
生命是一首美妙的交响曲，每一刻都是音符的奏鸣。在旋律的激荡中，用心弹奏，创造出属于自己的和谐乐章。即便面对挑战，让坚韧成为旋律的一部分，奏响不可忽视的动人旋律。” - 德彪西。
2024-02-28 08:45:00
1739
原创 【 JS 进阶 】Web APIs （五）
人生如旅途，每一步都是向前的契机。在路上，用勇气的行囊装满梦想，用智慧的指南针引领方向，让每一段旅程都成为成长的足迹，每一站都是精彩的冒险。” - 卢梭进一步学习 DOM 相关知识，实现可交互的网页特效。
2024-02-27 08:30:00
892
原创 【 JS 进阶 】Web APIs （四）
人生如风，起伏莫测，而我们是风帆的驾驶者。在生命的航程中，用坚定的信念扬帆远航，让每一次风吹都成为前行的力量，创造属于自己的辉煌航迹。” - 爱默生进一步学习 DOM 相关知识，实现可交互的网页特效。
2024-02-27 08:15:00
842
原创 【 JS 进阶 】Web APIs （三）
生活是一本精彩的书，每一天都是一页。在翻阅的过程中，用勇气和智慧书写，创造一个充满冒险和奇迹的故事，让人生的篇章如诗如画。” - 卡尔·桑德堡进一步学习 事件进阶，实现更多交互的网页特效，结合事件流的特征优化事件执行的效率。
2024-02-26 08:30:00
882
原创 【 JS 进阶 】Web APIs （二）
人生如舞台，每一个瞬间都是一场精彩的表演。在舞台的灯光下，以坚韧为舞伴，跳出自己的独特舞步，创造属于自己的绚丽人生芳华。” - 露易丝·梭罗学习会为 DOM 注册事件，实现简单可交互的网页特交。事件是编程语言中的术语，它是用来描述程序的行为或状态的，例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片。
2024-02-25 08:15:00
821
原创 【 JS 进阶 】Web APIs （一）
知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。
2024-02-24 08:15:00
930
原创 【 JS 进阶 】防抖节流
人生如梦，每一次醒来都是一次新的开始。在梦想的绘卷中，用坚韧的笔触描绘，让每一刻都成为珍贵的画面，让人生之旅充满诗意与无限可能。” - 莎士比亚。
2024-02-23 08:15:00
351
原创 【 JS 进阶 】处理 this
生命是一部不断演进的故事，每一个瞬间都是独特的文字。在坎坷的篇章中，用坚韧的笔触书写，让每一页都散发出勇气的光芒，创造属于自己的壮丽传说。” - 马克·吐温了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。this是 JavaScript 最具“魅惑”的知识点，不同的应用场合this的取值可能会有意想不到的结果，在此我们对以往学习过的关于【this默认的取值】情况进行归纳和总结。
2024-02-22 08:15:00
803
原创 【 JS 进阶 】异常处理与 debugger 调试
异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行。了解 JavaScript 中程序异常处理的方法，提升代码运行的健壮性。// 不管异常是否被捕获，finally 子句中的代码都会执行；// try 代码段中执行有错误时，会执行 catch 代码段。// 通常，在 finally 子句中编写一些关闭资源的代码。// throw '参数不能为空!'如果出现错误，我的语句不会执行'// 查找 DOM 节点。// 终止代码继续执行。
2024-02-21 08:15:00
335
原创 【 JS 进阶 】深浅拷贝
首先浅拷贝和深拷贝只针对引用类型浅拷贝：拷贝的是地址如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题)
2024-02-20 08:15:00
1802
原创 【 JS 进阶 】原型对象、面向对象
了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。
2024-02-19 13:46:17
887
原创 【 JS 进阶 】面向对象、构造函数
生活是一场伟大的舞蹈，每一步都是对未知的迎接。在旋律中起舞，用梦想的脚步踏出绚烂的人生花纹，让每一个舞姿都是自由和勇气的表达。- 约瑟夫·坎贝尔。
2024-02-01 08:15:00
862
原创 【 JS 进阶 】作用域、变量提升、闭包
人生如诗，每一个瞬间都是一行句子。在逐字逐句的书写中，勾勒出属于自己的篇章，让生命的诗意，在坎坷中奏响，于欢笑中升华。- 罗曼·罗兰。
2024-01-31 12:51:31
777
原创 【 JS 】数组
script > // 1. 语法，使用 [] 来定义一个空数组 // 定义一个空数组，然后赋值给变量 classes // let classes = [];// 2. 定义非空数组 let classes = [ '小明' , '小刚' , '小红' , '小丽' , '小米' ] // 1. 语法，使用 [] 来定义一个空数组。
2024-01-28 08:30:00
777
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人