彻底搞懂EventLoop
1. 预备知识 [!IMPORTANT] JavaScript的运行机制： 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。 主线程之外，还存在"任务队列"(task queue)。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务于是结束等待状态，进入执行栈，开始执行。 主线程不断重复上面的第三步。 概括即是: **调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候...
Iterator-Generator协议与async、await实现原理推导
我们都知道，Promise解决了回调地狱的问题，但是如果遇到复杂的业务，代码里面会包含大量的 then 函数，使得代码依然不是太容易阅读。 基于这个原因，ES7 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰，而且还支持 try-catch 来捕获异常，非常符合人的线性思维。 所以，要研究一下如何实现 async/await。总的来说，async 是Generator函数的语法糖，并对Generator函数进行了改进。 Generator函数...
浏览器渲染流程篇
前言 想要成为一名合格的前端工程师，掌握相关浏览器的工作原理是必备的，这样子才会有一个完整知识体系，要是能参透浏览器的工作原理，你就能解决80%的前端难题。 这篇文章准备梳理一下渲染流程，也就是浏览器是怎么把HTML，CSS，JS，图片等资源最后显示漂亮的页面。 还是那句话，了解浏览器是如何工作的，能让你站在更高维度去理解前端 希望通过这篇文章，能够让你重新认识浏览器，并把JavaScript，网络，页面渲染，浏览器安全等知识串联起来，从而让你对整个前端体系有全新的认识。 **这篇主要是梳理了渲染流程中几个重要的步骤，以及从中有哪些优化的...
海外前端技术栈收集
目的 帮助独立开发者提升开发效率 帮助独立开发者降低成本 市场上足够流行 Web 开发模板 | 模板 | 特性 | | --- | --- | | smart-excel-ai（免费） | Next.js。集成了登录、支付（lemon squeezy）、AI功能 | | Opensaas（免费） | React + Node.js。集成了登录、支付（stripe）、邮件、AI功能 | ...
通用低代码平台处理少数特殊需求的方案列举
摘要： 通过拖拉拽方式生成配置化 JSON 的设计模式非常适用于快速开发和部署标准化的前端应用。针对那些无法完全由配置化平台覆盖的特殊需求（大约10%），这里有一些可以帮助开发者灵活处理这些情况的实践方法
在使用 Vue 构建低代码项目时，管理平台通过拖拉拽方式生成配置化 JSON 的设计模式非常适用于快速开发和部署标准化的前端应用。针对那些无法完全由配置化平台覆盖的特殊需求（大约10%），下面是一些可以帮助开发者灵活处理这些情况的实践方法： 1. 插件或扩展系统 建立一个插件系统，允许开发者编写自定义组件或逻辑，并将其作为插件集成到低代码平台中。这样，对于特殊的业务逻辑或用户界面需求，开发者可以通过添加插件来实现，而不是修改平台的核心代码。这种方式有利于保持平台的稳定性和可升级性。 2. 预留代码注入点 在低代码平台的框架中预留代码注入点（Hooks），...
Vue2/3 通用指令化弹窗组件封装
摘要： 这段代码是一个Vue组件，用于创建一个模态框（Modal）。模态框有默认的标题、内容和底部，以及一个确定按钮。样式定义了按钮、卡片和模态框的外观。代码还包含了Vue2和Vue3版本的组件实现。
Vue2.7解决方案 可用 Vue.extend 扩展出组件实例并挂载到DOM //useCommandComp.ts import Vue, { getCurrentInstance, type ComponentInstance } from 'vue'; import { hasOwn } from '@vueuse/core'; export interface Options { visible?: boolean; onclose?: () => void; appendTo?: HTMLElement | string; [key: st...
模板DSL编译器核心实现思路
摘要： 本文介绍了Vue模板编译的工作流程和实现思路。编译器是将一种语言翻译成另一种语言的程序，而DSL是针对特定领域的语言。Vue模板编译将模板语言翻译成渲染函数，包括词法分析和语法分析，将模板AST转换为Javascript AST，最后生成渲染函数的Javascript代码。词法分析和语法分析通过解析器完成，解析器根据有限自动状态机将模板切割为词法记号。最后给出了具体的代码实现示例。
前言 最近学习Vue源码的时候，对其模板编译这块涂生感兴趣，想多多研究，奈何编译技术是一门庞大的学科，不同用途的编译器或编译技术的难度相差可能很大，对知识的掌握要求也相差很多。但我后续知道了Vue模板是作为DSL而存在的，实现难度与GPL相比并不高，我个人认为还是有学习的必要。故梳理了以下核心实现思路，以便后续参考。 编译器 编译器简单来说其实只是一段程序，用来将一种语言A翻译成另一种语言B。其中语言A叫做源语言，语言B叫做目标语言。编译器将源语言翻译为目标语言的过程被称为编译。 DSL `DSL(Domain Specific...
双端diff算法详解
摘要： 双端diff算法是Vue渲染器的核心算法，用于比较新旧节点并找出最小的更新代价。算法通过四个索引值来标记新旧子节点的两个端点，然后进行双端比较。比较过程中，如果找到可以复用的节点，则将其移动到正确的位置。移动完成后，更新索引值，继续下一轮比较。算法通过循环来实现多轮比较，直到所有节点都被比较完。
前言 Diff算法是Vue渲染器的核心算法，也是Vue的精髓所在。简单来说，当新旧vnode的子节点都是一组节点时，为了以最小的性能开销完成更新操作，需要比较新旧两组子节点，进而找出最小的更新代价，用于比较的算法就是diff算法。本节文章将详细介绍Vue2的双端diff算法。 原理介绍 顾名思义，双端diff算法是一种同时对新旧子节点的两个端点比较的算法。因此，我们需要四个索引值来标记新旧子节点的两个端点，如下图所示： diff1.png 使用代码来表示四个端点 ...
JavaScript 设计模式核心原理与应用实践
摘要： 能够决定一个工程师的本质的，不是那些瞬息万变的技术点，而是那些不变的东西 所谓“不变的东西”，说的就是这种驾驭技术的能力。 具体来说，它分为以下三个层次： - 能用健壮的代码去解决具体的问题； - 能用抽象的思维去应对复杂的系统； - 能用工程化的思想去规划更大规模的业务。
SOLID设计原则 "SOLID" 是由罗伯特·C·马丁在 21 世纪早期引入的记忆术首字母缩略字，指代了面向对象编程和面向对象设计的五个基本原则。 设计原则是设计模式的指导理论，它可以帮助我们规避不良的软件设计。SOLID 指代的五个基本原则分别是： 单一功能原则（Single Responsibility Principle） 一个对象应该只包含单一的职责，并且该职责被完整地封装在一个类中，即又定义有且仅有一个原因使类变更。（甲类负责两个不同的职责：职责A，职责B。当由于职责A需求发生改变而需要修改类T时，有可能会导致原本运行正常的职责B功能发生故障。也就是说职责...
响应式系统的构建思路
摘要： 该系统是参考vuejs2.7.14源码搭建的，旨在实现一个简单的响应式框架MiniVue。框架的搭建思路是先初始化数据和方法，然后将数据代理到实例的第一层，接着将数据设置为响应式对象，最后实例化订阅者Watcher并更新数据状态。订阅者的管理由Dep类完成，它负责依赖的收集和更新的派发。
tips: 该系统搭建思路参考自vuejs2.7.14源码 Vue的响应式系统的构建是比较复杂的，在深入探究vue整体实现思路之前，我认为在尽可能保留源码设计逻辑下，自己动手实现一个基础的响应式系统是有必要的。这样对Dep、Watcher和Observer等概念也会有初步的认识。 框架搭建 接下来我们将模拟Vue源码的实现思路，实现一个简单的类响应式框架MiniVue。 参照vue的使用方法，我们在实例化MiniVue时可传递一个配置项。这个配置项需要尽可能简单化。定义入参只由挂载元素el，数据对象data和方法对象methods构成。模拟...