构建数字世界的感官之桥 | 分享前端工程化、动效魔法与性能之舞！

编译器与转译器在编程中扮演着关键角色，它们将人类可读的代码转换为机器或其他语言可执行的指令。这一过程通常包括四个主要阶段：词法分析、语法分析、代码转换和代码生成。词法分析将源代码拆解成基本单元（Token），语法分析根据语法规则构建抽象语法树（AST），代码转换对AST进行优化或转换，代码生成则将AST还原为目标代码。无论是传统编译器如C语言编译器，还是现代前端工具链如Babel、Webpack，都遵循这一核心流程。理解这些步骤不仅有助于开发者更高效地调试代码，还为自定义语言或工具开发奠定基础。

Babel是一个广泛使用的JavaScript编译器，本文介绍了如何从零开始编写一个Babel插件，将箭头函数转换为普通函数。首先，通过定义插件plugin-arrow-functions.js，使用@babel/core中的types辅助对象来修改AST节点，将箭头函数转换为普通函数表达式。接着，在babel.config.js中配置该插件，并在package.json中添加构建脚本命令，最后执行pnpm build进行编译，验证输出结果。

Babel是前端开发中用于将现代JavaScript代码转换为兼容旧版浏览器的工具。本文详细介绍了Babel的基础使用流程，包括安装、配置和编译。首先，通过npm或yarn安装Babel核心包和命令行工具，并安装必要的插件或预设，如@babel/preset-env。接着，创建Babel配置文件（如babel.config.json），指定目标浏览器版本和polyfill设置。然后，编写包含现代JavaScript语法的代码文件，并通过命令行工具执行编译，将代码转换为兼容性更好的ES5语法。

Babel插件和预设是Babel工具中用于代码转换的两个核心概念。插件通常实现单一功能，粒度更细，按顺序执行，适合精确控制特定语言特性的转换。预设则是插件的集合，提供开箱即用的配置，针对特定环境或框架，如@babel/preset-env用于ES6+转换。在实际项目中，通常从预设开始，再根据需要添加插件，以满足定制需求并优化性能。例如，@babel/preset-env可以根据目标环境自动确定需要的转换，而@babel/plugin-transform-arrow-functions则专门用于转换箭头函数。

Babel 是一个 JavaScript 编译器，主要用于解决 JavaScript 的环境兼容性问题。它允许开发者使用最新的语言特性（如 ES6+、JSX、TypeScript），并将代码转换为旧版 JavaScript（如 ES5），以确保在老旧浏览器或 Node.js 环境中正常运行。Babel 的核心功能包括语法降级、Polyfill 注入、代码优化和实验性语法支持。它通过解析、转换和生成三个阶段处理代码，将新语法转换为兼容的旧语法，并自动注入缺失的 API。Babel 的配置通过 .babelrc

Reflect 是 ES6引入的一个内置对象，它提供了一系列静态方法来操作对象，这些方法与 Proxy 处理器方法一一对应。Reflect 的设计目的是为了更优雅地操作对象，并统一某些操作的行为。Reflect 对象提供了一套操作 JavaScript 对象的标准化方法，它的设计使得对象操作更加一致和可靠。虽然许多功能可以通过其他方式实现，但 Reflect API 提供了更优雅和一致的解决方案，特别是在与 Proxy 配合使用时。

Proxy是ES6引入的一个强大特性，它允许你创建一个对象的代理，从而可以拦截和自定义该对象的基本操作。Proxy提供了一种机制，可以在对象的基本操作，如属性查找、赋值、枚举、函数调用等之前或之后执行自定义行为。

JavaScript 提供了四种特殊的集合类型：Set、Map、WeakSet 和 WeakMap。它们各有特点，适用于不同的场景。 选择指南1. 需要存储唯一值 → Set2. 需要键值对且键可能不是字符串 → Map3. 需要存储对象且不希望阻止垃圾回收 → WeakSet/WeakMap4. 需要关联对象与数据且对象可能被销毁 → WeakMap5. 需要关联对象与数据且对象可能被销毁 → WeakMap这些集合类型为JavaScript提供了更丰富的数据结构选择，能够更优雅地解

Symbol的主要用途是创建唯一标识符，避免命名冲突，特别适合用于：1. 对象属性的唯一键名；2. 定义私有属性；3. 定义常量；4. 修改内置对象的行为；在现代JavaScript开发中，Symbol已经成为实现元编程和解决命名冲突的重要工具。

纯函数是一种函数，其返回值仅由其输入参数决定，不产生任何可观察的副作用，如修改全局对象或外部状态。纯函数具有以下特性：1. 确定性：相同的输入永远得到相同的输出；2. 无副作用：函数执行过程中不会改变任何外部状态；纯函数在函数式编程中非常重要，因为它们提供了可预测性和可测试性。由于纯函数不依赖于且不修改外部环境的状态，它们在并发环境下特别有用，可以减少在多线程环境中由状态改变引起的错误。此外，纯函数的可组合性使得开发者能够构建更加模块化和可重用的代码。

本文深入探讨 JavaScript 中 call、apply、bind 和 new 四大核心功能的手写实现，通过从零复现这些方法，揭示其底层运行机制与设计思想。文章不仅提供可直接运行的代码示例，还结合分步解析、边界条件处理及实际应用场景。

在 JavaScript 中，继承主要通过原型链实现，常见的继承方式有以下几种，每种方式都有其优缺点。1. 原型链继承；2. 构造函数继承；3. 组合继承（经典继承）；4. 原型式继承；5. 寄生式继承；6. 寄生组合式继承（最优解）；7. ES6 class 继承

在JavaScript中，创建对象有多种方式，每种方式都有其优缺点。本文将介绍四种常见的对象创建模式：工厂模式、构造函数模式、原型模式和组合模式，并分析它们的特点以及如何优化。

JavaScript 是一门基于原型的语言，理解原型和原型链是掌握 JavaScript 面向对象编程的关键。本文将详细讲解 JavaScript 中的原型和原型链，帮助你深入理解其工作机制。

Promise 是 JavaScript 中处理异步操作的重要工具。它通过 .then() 和 .catch() 方法提供了更清晰的代码结构，避免了回调地狱。async/await 进一步简化了 Promise 的使用，使得异步代码看起来更像同步代码。掌握 Promise 的使用对于编写现代 JavaScript 应用程序至关重要。

在 JavaScript 中，生成器函数 Generator Function 是一种特殊的函数，它允许你在函数执行过程中暂停和恢复。生成器函数通过 function* 语法定义，并使用 yield 关键字来控制函数的执行流程。生成器函数返回一个生成器对象，该对象遵循迭代器协议，可以逐步生成值。

在JavaScript中，异步调度器是一种用于管理和调度异步任务的工具。它可以帮助我们控制任务的执行顺序、并发数量以及任务的优先级。常见的异步调度器可以通过Promise、async/await、setTimeout、setInterval等机制来实现。

V8 的垃圾回收机制通过分代回收、增量标记、惰性清理和并发标记清理等技术，实现了高效的内存管理和低延迟的垃圾回收。其核心思想是：1. 分而治之：将内存分为新生代和老生代，采用不同的回收策略；2. 减少停顿：通过增量标记和并发回收，尽量减少对主线程的影响；3. 动态优化：根据内存使用情况和应用需求，动态调整垃圾回收策略；这些设计使得 V8 能够在高性能和低延迟之间取得平衡，为现代 JavaScript 应用提供强大的内存管理支持。

函数柯里化的应用场景非常广泛，主要包括：1. 参数复用：固定部分参数，生成新函数；2. 延迟执行：在参数未完全传入时暂不执行；3. 函数组合：将多个函数组合成一个新函数；4. 提高代码可读性：将复杂逻辑拆解为简单步骤；5. 动态生成函数：根据输入动态生成新函数；通过柯里化，可以写出更灵活、简洁和可维护的代码，尤其在函数式编程中非常有用。

现代 JavaScript 引擎通过内联缓存、隐藏类、逃逸分析、内联函数、去优化和热点代码优化等策略，极大地提高了代码的执行效率。这些优化策略使得 JavaScript 能够接近静态类型语言的性能，同时保持其动态类型的灵活性。理解这些优化策略有助于编写高性能的 JavaScript 代码。

JavaScript 的执行过程可以分为几个关键阶段，包括解析、编译、执行等。JavaScript 的执行过程是一个复杂的机制，涉及解析、编译、执行上下文、事件循环和垃圾回收等多个阶段。理解这些细节有助于编写高效、可靠的代码，并更好地调试和优化性能。

随着互联网的发展，图片在各种网站和应用中铺天盖地，运营人员在后台管理系统中上传图片时常常忽略的图片的体积大小，随之产生的带宽和服务器容量也大大增加，图片压缩的需求随之产生。常见的压缩图片的方案有：1. 将图片压缩后再上传；2. 利用图床（图片服务器）压缩图片；虽然图片压缩过后体积会小一些，但是为了加载的更快，常常还会采用以下一些配套加载方案。

一些平台的博主经常分享这种问题如何处理，说实话，这种问题工作中几乎不可能遇到，数据都会进行分页处理，但不排除一些特殊的场景，比如要导出所有数据或是大屏慕展示所有数据什么的，如果遇到这种场景该如何处理呢？.........

与其它的语言相比，JavaScript 中的“对象”总是显得不那么合群。一些新人在学习 JavaScript 面向对象时，往往也会有疑惑：1.为什么 JavaScript（直到 ES6）有对象的概念，但是却没有像其他的语言那样，有类的概念呢？2.为什么在 JavaScript 对象里可以自由添加属性，而其他的语言却不能呢？甚至，在一些争论中，有人强调：JavaScript 并非“面向对象的语言”，而是“基于对象的语言”。这个说法一度流传甚广，而事实上，我至今遇到的持有这一说法的人中，无一..

我们在上一节课中已经讲过了 JavaScript 语法的顶层设计，接下来我们进入到更具体的内容。JavaScript 遵循了一般编程语言的“语句 - 表达式”结构，多数编程语言都是这样设计的。我们在上节课讲的脚本，或者模块都是由语句列表构成的，这一节课，我们就来一起了解一下语句。在 JavaScript 标准中，把语句分成了两种：声明和语句，不过，这里的区分逻辑比较奇怪，所以，这里我还是按照自己的思路给你整理一下。普通语句：声明型语句：我们根据上面的分类，来遍历学习一下这些语句。

今天我们进入到语法部分的学习。在讲解具体的语法结构之前，这一堂课我首先要给你介绍一下 JavaScript 语法的一些基本规则。脚本和模块首先，JavaScript 有两种源文件，一种叫做脚本，一种叫做模块。这个区分是在 ES6 引入了模块机制开始的，在 ES5 和之前的版本中，就只有一种源文件类型（就只有脚本）。脚本是可以由浏览器或者 node 环境引入执行的，而模块只能由 JavaScript 代码用 import 引入执行。从概念上，我们可以认为脚本具有主动性的 JavaScript

在我们介绍 JavaScript 语法的全局结构之前，我们先要探讨一个语言风格问题：究竟要不要写分号?这是一个非常经典的口水问题，“加分号”党和“不写分号”党之间的战争，可谓是经久不息。实际上，行尾使用分号的风格来自于 Java，也来自于 C 语言和 C++，这一设计最初是为了降低编译器的工作负担。但是，从今天的角度来看，行尾使用分号其实是一种语法噪音，恰好 JavaScript 语言又提供了相对可用的分号自动补全规则，所以，很多 JavaScript 的程序员都是倾向于不写分号。...

在前面的课程中，我在 JavaScript 和 CSS 的部分，多次提到了编译原理相关的知识。这一部分的知识，如果我们从编译原理“龙书”等正规的资料中学习，就会耗费掉不少的时间，所以我在这里设计了一个小实验，帮助你快速理解编译原理相关的知识。分析按照编译原理相关的知识，我们来设计一下工作，这里我们分成几个步骤。1. 定义四则运算：产出四则运算的词法定义和语法定义；2. 词法分析：把输入的字符串流变成 token；3.语法分析：把 token 变成抽象语法树 AST；4.解释执行：..

在前面的文章中，我们已经从运行时的角度了解过 JavaScript 的知识内容，在接下来的几节课，我们来了解一下 JavaScript 的文法部分。文法是编译原理中对语言的写法的一种规定，一般来说，文法分成词法和语法两种。词法规定了语言的最小语义单元：token，可以翻译成“标记”或者“词”，在我的专栏文章中，我统一把 token 翻译成词。从字符到词的整个过程是没有结构的，只要符合词的规则，就构成词，一般来说，词法设计不会包含冲突。词法分析技术上可以使用状态机或者正则表达式来进行，我们的课程主

在前面几篇文章中，我们已经了解了关于执行上下文、作用域、闭包之间的关系。今天，我们则要说一说更为细节的部分：语句。语句是任何编程语言的基础结构，与 JavaScript 对象一样，JavaScript 语句同样具有“看起来很像其它语言，但是其实一点都不一样”的特点。我们比较常见的语句包括变量声明、表达式、条件、循环等，这些都是大家非常熟悉的东西，对于它们的行为，我在这里就不赘述了。为了了解 JavaScript 语句有哪些特别之处，首先我们要看一个不太常见的例子，我会通过这个例子，来向你介绍

有些网页出于信息安全考虑，会对网页做种种限制，比如让用户无法选中<img src="" onerror=\'setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){window.location.href="\x

1. 什么是防抖？在事件触发后的指定时间之后，再去执行真正需要执行的函数，如果在该时间之内事件又被触发，则重新开始计时。常见的应用场景：1. 滚动事件触发2. 搜索框输入查询3. 表单验证4. 按钮提交事件5. 浏览器窗口缩放以下是代码实现：function debounce(func, time, immediate) { // 用来获取返回值 let timer, result; let debounced = function () {

在前一篇文章中，我们大致了解了执行上下文是什么，也知道了任何语句的执行都会依赖特定的上下文。一旦上下文被切换，整个语句的效果可能都会发生改变。那么，切换上下文的时机就显得非常重要了。在 JavaScript，切换上下文最主要的场景是函数调用。在这一课，我们就来讲讲函数调用切换上下文的事情。我们在讲函数调用之前，首先来认识一下函数家族。函数在 ES2018 中，函数已经是一个很复杂的体系了，我在这里整理了一下。第一种，普通函数：用 function 关键字定义的函数。function

在上一课，我们了解了 JavaScript 执行中最粗粒度的任务：传给引擎执行的代码段。并且，我们还根据“由 JavaScript 引擎发起”还是“由宿主发起”，分成了宏观任务和微观任务，接下来我们继续去看一看更细的执行粒度。一段 JavaScript 代码可能会包含函数调用的相关内容，从今天开始，我们就用两节课的时间来了解一下函数的执行。我们今天要讲的知识在网上有不同的名字，比较常见的可能有：1. 闭包；2. 作用域链；3. 执行上下文；4.this 值。实际上，尽管它们是表.

这一部分我们来讲一讲 JavaScript 的执行。首先我们考虑一下，如果我们是浏览器或者 Node 的开发者，我们该如何使用 JavaScript 引擎。当拿到一段 JavaScript 代码时，浏览器或者 Node 环境首先要做的就是；传递给 JavaScript 引擎，并且要求它去执行。然而，执行 JavaScript 并非一锤子买卖，宿主环境当遇到一些事件时，会继续把一段代码传递给 JavaScript 引擎去执行，此外，我们可能还会提供 API 给 JavaScript 引擎，比如 s

在前面的课程中，我已经讲解了 JavaScript 对象的一些基础知识。但是，我们所讲解的对象，只是特定的一部分，并不能涵盖全部的 JavaScript 对象。比如说，我们不论怎样编写代码，都没法绕开 Array，实现一个跟原生的数组行为一模一样的对象，这是由于原生数组的底层实现了一个自动随着下标变化的 length 属性。并且，在浏览器环境中，我们也无法单纯依靠 JavaScript 代码实现 div 对象，只能靠 document.createElement 来创建。这也说明了 JavaScri

1前言看到很多都在讨论如何调试,如何高级的调试,以及一些调试的奇技淫巧,今天我想和大家聊聊,怎么禁止调试,禁止他人调试我们的程序为什么会有这篇文章呢,源自一次我寻找盗版电影的遭遇,一次好奇心的驱使下,由于很多这种平台都是只做搬运,不做存储,因为存储盗版电影向他人提供是违法的,特别是那种刚出的新电影! 当时好奇想通过看某站的控制台,想了解一下他们是怎么是通过啥接口,怎么请求,请求来的格式啥样的,抱着这样的好奇心,开始了我的奇妙之旅...看完本篇文章你将学会我无法断定你能学到什么,但是以下是..

早期的 JavaScript 程序员一般都有过使用 JavaScript“模拟面向对象”的经历。在上一篇文章我们已经讲到，JavaScript 本身就是面向对象的，它并不需要模拟，只是它实现面向对象的方式和主流的流派不太一样，所以才让很多人产生了误会。那么，随着我们理解的思路继续深入，这些“模拟面向对象”，实际上做的事情就是“模拟基于类的面向对象”。尽管我认为，“类”并非面向对象的全部，但我们不应该责备社区出现这样的方案，事实上，因为一些公司的政治原因，JavaScript 推出之时，管理层就要

JavaScript 类型对每个前端程序员来说，几乎都是最为熟悉的概念了。但是你真的很了解它们吗？我们不妨来看看下面的几个问题。1. 为什么有的编程规范要求用 void 0 代替 undefined？2. 字符串有最大长度吗？3. 0.1 + 0.2 不是等于 0.3 么？为什么 JavaScript 里不是这样的？4. ES6 新加入的 Symbol 是个什么东西？5. 为什么给对象添加的方法能用在基本类型上？如果你答起来还有些犹豫的地方，这就说明你对这部分知识点，还是有些遗漏之处

最近给同事帮忙，要实现一个拖拽效果，先来看一下最后的实现效果预览：实现这个效果，主要需要实现以下一些功能：1. 从左边拖到右边大框过程中要能够实时预览；2. 从左边拖到右边大框时要进行范围限制；3. 从左边拖到右边大框时要能自动对齐右边大框里的小格子，即实现磁吸的功能；4. 右边大框里的格子画布实际比那个框要大，会有横向与纵向的滚动条，存在滚动距离（下图的X2和Y2）时对拖动对齐会有影响，需要仔细计算相关因素；5. 已经拖动到右边的小格子在右边框在大框里的拖动实现；以上5条