可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必 须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。 Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理 器”。 var obj = new Proxy({}, { get: function (target, key, receiver) { console // 35 proxy.title // 35 上面代码中，作为构造函数， Proxy 接受两个参数。第一个参数是所要代理的目 标对象（上例是一个空对象），即如果没有 Proxy 的介入，操作原来要访问的就 是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一 个对应的处理函数，该函数将拦截对应的操作。比如，上面代码中，配置对象有一 个 get 方法，用来拦截对目标对象属性的访问请求。 的一个使用场景是，目标对象不允许直接访问，必须通过代理 访问，一旦访问结束，就收回代理权，不允许再次访问。 this 问题 虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做 任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代 理的情况下，目标对象内部的 this 关键字会指向 Proxy 代理。 const target = {

Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 端的实现 255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React Native 组件库 beeshell 2.0 发布 473 React Native 在美团外卖客户端的实践 506 Android 静态代码扫描效率优化与实践 530 Probe：Android 线上 OOM 问题定位组件 560 活动 Web 页面人机识别验证的探索与实践 580 React React Native 工程中 TSLint 静态检查工具的探索之路 589 ESLint 在中大型团队的应用实践 610 美团 iOS 工程 zsource 命令背后的那些事儿 627 客户端单周发版下的多分支自动化管理与实践 635 美团外卖前端容器化演进实践 643 Bifrost 微前端框架及其在美团闪购中的实践 664 Litho 的使用及原理剖析 680 Android

同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 本书旨在通过清晰易懂的动画图解和可运行的代码示例，使读者理解算法和数据结构的核心概念，并能够通 过编程来实现它们。在此基础上，本书致力于 语言设计之初，人们认 为 16 位足以表示所有可能的字符。然而，这是一个不正确的判断。后来 Unicode 规范扩展到了超过 16 位，所以 Java 中的字符现在可能由一对 16 位的值（称为“代理对”）表示。 ‧ JavaScript 和 TypeScript 的字符串使用 UTF‑16 编码的原因与 Java 类似。当 1995 年 Netscape 公司 首次推出 JavaScript 操作系统）都广泛使用 UTF‑16 编码。 由于以上编程语言对字符数量的低估，它们不得不采取“代理对”的方式来表示超过 16 位长度的 Unicode 字符。这是一个不得已为之的无奈之举。一方面，包含代理对的字符串中，一个字符可能占用 2 字节或 4 字 节，从而丧失了等长编码的优势。另一方面，处理代理对需要额外增加代码，这提高了编程的复杂性和调试 难度。 出于以上原因，部分编程语言提出了一些不同的编码方案。

同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 本书旨在通过清晰易懂的动画图解和可运行的代码示例，使读者理解算法和数据结构的核心概念，并能够通 过编程来实现它们。在此基础上，本书致力于 语言设计之初，人们认 为 16 位足以表示所有可能的字符。然而，这是一个不正确的判断。后来 Unicode 规范扩展到了超过 16 位，所以 Java 中的字符现在可能由一对 16 位的值（称为“代理对”）表示。 ‧ JavaScript 和 TypeScript 的字符串使用 UTF‑16 编码的原因与 Java 类似。当 1995 年 Netscape 公司 首次推出 JavaScript 操作系统）都广泛使用 UTF‑16 编码。 由于以上编程语言对字符数量的低估，它们不得不采取“代理对”的方式来表示超过 16 位长度的 Unicode 字符。这是一个不得已为之的无奈之举。一方面，包含代理对的字符串中，一个字符可能占用 2 字节或 4 字 节，从而丧失了等长编码的优势。另一方面，处理代理对需要额外增加代码，这提高了编程的复杂性和调试 难度。 出于以上原因，部分编程语言提出了一些不同的编码方案。

语言设计之初，人们认 为 16 位足以表示所有可能的字符。然而，这是一个不正确的判断。后来 Unicode 规范扩展到了超过 16 位，所以 Java 中的字符现在可能由一对 16 位的值（称为“代理对”）表示。 ‧ JavaScript 和 TypeScript 的字符串使用 UTF‑16 编码的原因与 Java 类似。当 JavaScript 语言在 1995 年被 Netscape 公司首次引入时，Unicode 操作系统，都广泛地使用 UTF‑16 编码。 由于以上编程语言对字符数量的低估，它们不得不采取“代理对”的方式来表示超过 16 位长度的 Unicode 字符。这是一个不得已为之的无奈之举。一方面，包含代理对的字符串中，一个字符可能占用 2 字节或 4 字节，从而丧失了等长编码的优势。另一方面，处理代理对需要增加额外代码，这增加了编程的复杂性和 Debug 难度。 出于以上原因，部分编程语言提出了一些不同的编码方案。 4‑8 常见链表种类 4.2.4 链表典型应用 单向链表通常用于实现栈、队列、哈希表和图等数据结构。 ‧ 栈与队列：当插入和删除操作都在链表的一端进行时，它表现出先进后出的的特性，对应栈；当插入操 作在链表的一端进行，删除操作在链表的另一端进行，它表现出先进先出的特性，对应队列。 ‧ 哈希表：链地址法是解决哈希冲突的主流方案之一，在该方案中，所有冲突的元素都会被放到一个链表 中。 ‧

语言设计之初，人们认 为 16 位足以表示所有可能的字符。然而，这是一个不正确的判断。后来 Unicode 规范扩展到了超过 16 位，所以 Java 中的字符现在可能由一对 16 位的值（称为“代理对”）表示。 ‧ JavaScript 和 TypeScript 的字符串使用 UTF‑16 编码的原因与 Java 类似。当 1995 年 Netscape 公司 首次推出 JavaScript 操作系统）都广泛使用 UTF‑16 编码。 由于以上编程语言对字符数量的低估，它们不得不采取“代理对”的方式来表示超过 16 位长度的 Unicode 字符。这是一个不得已为之的无奈之举。一方面，包含代理对的字符串中，一个字符可能占用 2 字节或 4 字 节，从而丧失了等长编码的优势。另一方面，处理代理对需要额外增加代码，这提高了编程的复杂性和调试 难度。 出于以上原因，部分编程语言提出了一些不同的编码方案。 图 4‑8 常见链表种类 4.2.4 链表典型应用 单向链表通常用于实现栈、队列、哈希表和图等数据结构。 ‧ 栈与队列：当插入和删除操作都在链表的一端进行时，它表现出先进后出的特性，对应栈；当插入操作 在链表的一端进行，删除操作在链表的另一端进行，它表现出先进先出的特性，对应队列。 ‧ 哈希表：链式地址是解决哈希冲突的主流方案之一，在该方案中，所有冲突的元素都会被放到一个链表 中。 ‧

同樣，資料結構無處不在：大到社會網絡，小到地鐵路線，許多系統都可以建模為“圖”；大到一個國家，小 到一個家庭，社會的主要組織形式呈現出“樹”的特徵；冬天的衣服就像“堆疊”，最先穿上的最後才能脫下； 羽毛球筒則如同“佇列”，一端放入、一端取出；字典就像一個“雜湊表”，能夠快速查找目標詞條。 本書旨在透過清晰易懂的動畫圖解與可執行的程式碼範例，使讀者理解演算法和資料結構的核心概念，並能 夠透過程式設計來實現它們。在此基礎上，本 語言設計之初，人們 認為 16 位足以表示所有可能的字元。然而，這是一個不正確的判斷。後來 Unicode 規範擴展到了超 過 16 位，所以 Java 中的字元現在可能由一對 16 位的值（稱為“代理對”）表示。 ‧ JavaScript 和 TypeScript 的字串使用 UTF‑16 編碼的原因與 Java 類似。當 1995 年 Netscape 公司 首次推出 JavaScript 作業系統）都廣泛使用 UTF‑16 編碼。 由於以上程式語言對字元數量的低估，它們不得不採取“代理對”的方式來表示超過 16 位長度的 Unicode 字元。這是一個不得已為之的無奈之舉。一方面，包含代理對的字串中，一個字元可能佔用 2 位元組或 4 位 元組，從而喪失了等長編碼的優勢。另一方面，處理代理對需要額外增加程式碼，這提高了程式設計的複雜 性和除錯難度。 出於以上原因，部分程式語言提出了一些不同的編碼方案。

能，比如操作本地文件、操作图片、调用摄像头和麦克风等等。这使得 JavaScript 可以完成许多以前无法想象的事情。 （2）Node Node 项目使得 JavaScript 可以用于开发服务器端的大型项目，网 站的前后端都用 JavaScript 开发已经成为了现实。有些嵌入式平台 （Raspberry Pi）能够安装 Node，于是 JavaScript 就能为这 些平台开发应用程序。 Windows、Mac OS 和 Android 等 多个桌面平台的程序，不依赖浏览器。 （7）小结 可以预期，JavaScript 最终将能让你只用一种语言，就开发出适应 不同平台（包括桌面端、服务器端、手机端）的程序。早在2013年9月 的统计之中，JavaScript 就是当年 Github 上使用量排名第一的 语言。 著名程序员 Jeff Atwood 甚至提出了一条 “Atwood 定律”： WebAssembly，就可以在浏览器里面运行。 （3）事件驱动和非阻塞式设计。 JavaScript 程序可以采用事件驱动（event-driven）和非阻塞式 （non-blocking）设计，在服务器端适合高并发环境，普通的硬件就 可以承受很大的访问量。 JavaScript 是一种开放的语言。它的标准 ECMA-262 是 ISO 国 际标准，写得非常详尽明确；该标准的主要实现（比如 V8 和

UI 组件 & 组件包 数据可视化工具（例如图表） 图形工具（例如 SVG、canvas、webGL） 动画工具 JSON 工具 占位符内容工具 测试工具 前端数据存储工具 (例如客户端的数据存储方案) 模块加载／打包工具 模块／包管理工具 托管工具 项目管理以及代码托管工具 协作与沟通工具 内容管理 托管／API 工具 后端即服务工具 离线工具 安全工具 构建工具 UI 组件 & 组件包 数据可视化工具（例如图表） 图形工具（例如 SVG、canvas、webGL） 动画工具 JSON 工具 占位符内容工具 测试工具 前端数据存储工具 (例如客户端的数据存储方案) 模块加载／打包工具 Introduction 9 模块／包管理工具 托管工具 项目管理以及代码托管工具 协作与沟通工具 内容管理 托管／API 工具 后端即服务工具 rivs 3.0 Unported License 协议发布。 致谢 沪江Web前端团队 掘金翻译计划 Introduction 10 前端开发者是什么？ WEB 前端开发，也作客户端开发，是给网站或网页应用生产 HTML、CSS 和 JavaScript 的过程，它让用户得以浏览网站或网页应用并与之交互。创建网站前端的工 具与技术时常变革，因此开发者应对业内发展近况保持清醒，这是前端开发者面对的挑

业程序员，语言的一些方面会多少有些不严格。 ECMAScript 从一开始就被设计成一种网页脚本语言(Web scripting language)作为基于网页 的、客户端—服务器端(C/S)构架的建筑师，它能提供一 种机制，用来使浏览器中的网站页面更 加活跃，并展示服务器端的处理情况。ECMAScript 能够为各种主机环境，以及这个文档所描述 的核心脚本编程语言之外任何特定的主机环境，提供基本的脚本编程能力。 ECMAScript Conference Proceedings,pp. 227-C241,Orlando,FL,October 1987. 4.1 网页脚本 网页浏览器为 ECMAScript 提供了一个宿主环境以进行客户端的计算，例如：代表窗口、 菜单、浮动条、对话框、文本区域、锚点、框架、历史、cookies，以及输入/输出功能的对 象。 深入说来，主机环境提供了一套向事件上附加脚本代码的方法，这些事件有焦点的改变，页面 之间出现，被显示的页面是一个用户界面元素和固定或处理后的文本和图像的组合。这种脚本 语言会响应用户的互交从而不需要主程序。 与浏览器不同，网页服务器为服务器端提供了另一种宿主环境，这包括代表请求、客户端、 文件的对象；以及锁定或共享数据的机制。通过同时使用浏览器端和客户端脚本，在客户端与 服务器之间分配计算将成为可能，这样就能为基于网页的应用提供一个自定义化的用户界面。 4.2 语言概述 接下来是一个 ECMAScript