视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 1M，未 Gzip） 和 图片等静态资源，缺少 JS 拆包、文件 Hash、资源上传 CDN 等优 化工作，极大影响了页面的加载性能。 ● 由于 Flutter Web 自身实现了一套页面滚动机制，页面滚动过程中，会频繁计 算位置信息，引起滚动区域内容被重新创建，最终导致页面滚动性能较差。 2.2 MTFlutter 现状 虽然 MTFlutter 做了诸多 Flutter Native js 体积依然维持在 1.1M。单一文件加载、解析时间过长， 且静态资源缺少 CDN 化的支持，势必会影响首屏的渲染时间。 ● 滚动性能较差。 Flutter Web 自身实现了一套页面滚动机制，在页面滚动过程 中，会频繁的创建 Canvas，最终导致滚动性能问题，甚至引起页面 Crash。 通过下图对浏览器网络监控情况的展示，可以清晰的反映出以上问题： 浏览器网络监控 页面滚动过程中，内存的占用情况

这实际上说明，对象的解构赋值是下面形式的简写（参见《对象的扩展》一章）。 let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; 也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变 量。真正被赋值的是后者，而不是前者。 let { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" 对象。否则，回调函数运行 时， this.doSomething 这一行会报错，因为此时 this 指向 document 对象。 this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因 是箭头函数根本没有自己的 this ，导致内部的 this 就是外层代码块 的 this 。正是因为它没有 this ，所以也就不能用作构造函数。 所以，箭头函数转成 ES5 indexOf(afterValue) + 1, 0, value); return array; }})}); insert(2).into([1, 3]).after(1); //[1, 2, 3] 下面是一个部署管道机制（pipeline）的例子，即前一个函数的输出是后一个函数 的输入。 const pipeline = (...funcs) => val => funcs.reduce((a, b) =>

null，undefined 和布尔值 数值 字符串 对象 函数 数组 运算符 算术运算符 比较运算符 布尔运算符 二进制位运算符 其他运算符，运算顺序 语法专题 数据类型的转换 错误处理机制 编程风格 console 对象与控制台 标准库 Object 对象 属性描述对象 Array 对象 包装对象 Boolean 对象 - 1 - 本文档使用 书栈(BookStack JavaScript 里面， null 就像在 Java 里一 样，被当成一个对象，Brendan Eich 觉得表示“无”的值最好不是对 象。其次，那时的 JavaScript 不包括错误处理机制，Brendan Eich 觉得，如果 null 自动转为0，很不容易发现错误。 因此，他又设计了一个 undefined 。区别是这样的： null 是一个表 示“空”的对象，转为数值时为 length // 2 上面代码定义了空函数 f ，它的 length 属性就是定义时的参数个 数。不管调用时输入了多少个参数， length 属性始终等于2。 length 属性提供了一种机制，判断定义时和调用时参数的差异，以便 实现面向对象编程的”方法重载“（overload）。 函数的 toString 方法返回一个字符串，内容是函数的源码。 1. function f() {

实际上即使使用回调方式的写法也能完成上面同样的工作，而使用Promise方式的话有 什么优点么？在本小节中我们没有讲到两者的对比及Promise的优点。在接下来的章节 中，我们将会对Promise优点之一，即错误处理机制进行介绍，以及和传统的回调方式 的对比。 Chapter.2 - 实战Promise 本章我们将会学习Promise提供的各种方法以及如何进行错误处理。 Promise.resolve 一般情况下我们都会使用 就像我们有时称具有 .length 方法的非数组对象为Array like一样，thenable指的是一个 具有 .then 方法的对象。 这种将thenable对象转换为promise对象的机制要求thenable对象所拥有的 then 方法应 该和Promise所拥有的 then 方法具有同样的功能和处理过程，在将thenable对象转换为 promise对象的时候，还会巧妙的利用thenable对象原来具有的 Promises标准，所 以即使看上去这个对象转换成了一个promise对象，但是会出现缺失 部分信息的问题。 这个问题的根源在于jQuery的 Deferred Object21 的 then 方法机制与 promise不同。 所以我们应该注意，即使一个对象具有 .then 方法，也不一定就能 作为ES6 Promises对象使用。 • JavaScript Promises: There and

如果感觉以下内容理解困难，可以在读完“栈”章节后再来复习。 那么，迭代和递归具有什么内在联系呢？以上述递归函数为例，求和操作在递归的“归”阶段进行。这意味 着最初被调用的函数实际上是最后完成其求和操作的，这种工作机制与栈的“先入后出”原则异曲同工。 事实上，“调用栈”和“栈帧空间”这类递归术语已经暗示了递归与栈之间的密切关系。 1. 递：当函数被调用时，系统会在“调用栈”上为该函数分配新的栈帧，用于存储函数的局部变量、参数、 。有了这些地址，程序便可以访问内存中的数据。 图 3‑2 内存条、内存空间、内存地址 Tip 值得说明的是，将内存比作 Excel 表格是一个简化的类比，实际内存的工作机制比较复杂，涉及地址 空间、内存管理、缓存机制、虚拟内存和物理内存等概念。 内存是所有程序的共享资源，当某块内存被某个程序占用时，则通常无法被其他程序同时使用了。因此在数 据结构与算法的设计中，内存资源是一个重要的考虑 选择 10 作为初始容量。 ‧ 数量记录：声明一个变量 size ，用于记录列表当前元素数量，并随着元素插入和删除实时更新。根据 此变量，我们可以定位列表尾部，以及判断是否需要扩容。 ‧ 扩容机制：若插入元素时列表容量已满，则需要进行扩容。先根据扩容倍数创建一个更大的数组，再将 当前数组的所有元素依次移动至新数组。在本示例中，我们规定每次将数组扩容至之前的 2 倍。 // === File:

如果感觉以下内容理解困难，可以在读完“栈”章节后再来复习。 那么，迭代和递归具有什么内在联系呢？以上述递归函数为例，求和操作在递归的“归”阶段进行。这意味 着最初被调用的函数实际上是最后完成其求和操作的，这种工作机制与栈的“先入后出”原则异曲同工。 事实上，“调用栈”和“栈帧空间”这类递归术语已经暗示了递归与栈之间的密切关系。 1. 递：当函数被调用时，系统会在“调用栈”上为该函数分配新的栈帧，用于存储函数的局部变量、参数、 编号，确保每个内存空间都有唯一的内存地址。有了这些地址，程序便可以访问内存中的数据。 图 3‑2 内存条、内存空间、内存地址 � 值得说明的是，将内存比作 Excel 表格是一个简化的类比，实际内存的工作机制比较复杂，涉 及地址空间、内存管理、缓存机制、虚拟内存和物理内存等概念。 内存是所有程序的共享资源，当某块内存被某个程序占用时，则无法被其他程序同时使用了。因此在数据结 构与算法的设计中，内存资源是一个重要的考虑因素 选择 10 作为初始容量。 ‧ 数量记录：声明一个变量 size ，用于记录列表当前元素数量，并随着元素插入和删除实时更新。根据 此变量，我们可以定位列表尾部，以及判断是否需要扩容。 ‧ 扩容机制：若插入元素时列表容量已满，则需要进行扩容。先根据扩容倍数创建一个更大的数组，再将 当前数组的所有元素依次移动至新数组。在本示例中，我们规定每次将数组扩容至之前的 2 倍。 // === File:

如果感觉以下内容理解困难，可以在读完“栈”章节后再来复习。 那么，迭代和递归具有什么内在联系呢？以上述递归函数为例，求和操作在递归的“归”阶段进行。这意味 着最初被调用的函数实际上是最后完成其求和操作的，这种工作机制与栈的“先入后出”原则异曲同工。 事实上，“调用栈”和“栈帧空间”这类递归术语已经暗示了递归与栈之间的密切关系。 1. 递：当函数被调用时，系统会在“调用栈”上为该函数分配新的栈帧，用于存储函数的局部变量、参数、 。有了这些地址，程序便可以访问内存中的数据。 图 3‑2 内存条、内存空间、内存地址 Tip 值得说明的是，将内存比作 Excel 表格是一个简化的类比，实际内存的工作机制比较复杂，涉及地址 空间、内存管理、缓存机制、虚拟内存和物理内存等概念。 内存是所有程序的共享资源，当某块内存被某个程序占用时，则无法被其他程序同时使用了。因此在数据结 构与算法的设计中，内存资源是一个重要的考虑因素 选择 10 作为初始容量。 ‧ 数量记录：声明一个变量 size ，用于记录列表当前元素数量，并随着元素插入和删除实时更新。根据 此变量，我们可以定位列表尾部，以及判断是否需要扩容。 ‧ 扩容机制：若插入元素时列表容量已满，则需要进行扩容。先根据扩容倍数创建一个更大的数组，再将 当前数组的所有元素依次移动至新数组。在本示例中，我们规定每次将数组扩容至之前的 2 倍。 // === File:

异常处理，更严密的出错定义，数字式输出格式以及一些次要变 更，为即将到来的国际化语言设施和语言未来发展的作提前准备。 关于这个语言的工作并没有结束。技术委员会正在致力于作出意义重大的优化，这包括脚 本在互联网上创建和使用的机制，以及与其它标准实 体（如万维网联盟(W3C)及无线应用协议 论坛的等团体）间更紧密的配合。 1 作用范围 此标准定义了 ECMAScript 脚本语言。 2 前言 符合标准的 ECMAScript 脚本语言(script language)是一类被 用于操控、自定义和自动控制现有系统设施的编程语 言。在这些系统中，实用的功能可通过一个用户界面来使用，脚本语言就是一种通过程序控制 那些功能的机制。 于是，我们就说此系统为对象和设施提供了一个宿主环境，它们使得脚本语 言的能力变得完备。脚本语言是为了能被专业或非专业程序员所使用而设计的。为了适应 非专 业程序员，语言的一些方面会多少有些不严格。 。 ECMAScript 从一开始就被设计成一种网页脚本语言(Web scripting language)作为基于网页 的、客户端—服务器端(C/S)构架的建筑师，它能提供一 种机制，用来使浏览器中的网站页面更 加活跃，并展示服务器端的处理情况。ECMAScript 能够为各种主机环境，以及这个文档所描述 的核心脚本编程语言之外任何特定的主机环境，提供基本的脚本编程能力。 ECMAScript

10 作为初始容量。 ‧ 数量记录：需要声明一个变量 size ，用来记录列表当前有多少个元素，并随着元素插入与删除实时更 新。根据此变量，可以定位列表的尾部，以及判断是否需要扩容。 ‧ 扩容机制：插入元素有可能导致超出列表容量，此时需要扩容列表，方法是建立一个更大的数组来替换 当前数组。需要给定一个扩容倍数 extendRatio ，在本示例中，我们规定每次将数组扩容至之前的 2 倍。 insert(index, num) { if (index < 0 || index >= this.#size) throw new Error('索引越界'); // 元素数量超出容量时，触发扩容机制 if (this.#size === this.#capacity) { this.extendCapacity(); } // 将索引 index 以及之后的元素都向后移动一位 for size = stack.length; /* 判断是否为空 */ const is_empty = stack.length === 0; 5.1.2. 栈的实现 为了更加清晰地了解栈的运行机制，接下来我们来自己动手实现一个栈类。 栈规定元素是先入后出的，因此我们只能在栈顶添加或删除元素。然而，数组或链表都可以在任意位置添加删 除元素，因此 栈可被看作是一种受约束的数组或链表。换言之，我们可以“屏蔽”数组或链表的部分无关操

念。如果读者对指针的概念比较模糊，建议最好选一本 C 语言教材认真阅读一下，相信一定 有很大的帮助。 2.3.2 变量赋值机制 根据 Ecma-262 规范，在为变量赋值时，ECMAScript 解释程序必须判断该值是原始类型 还是引用类型。ECMAScript 解释程序在处理原始类型和引用类型的变量赋值机制上，采用了 不同的方式。 ECMAScript 的原始类型包括 Undefined、Null、Boolean、Number 中类（class）的概念。如果 ECMAScript 解释程序判断出值不是原始类型，那么就是引用类型。 由于原始类型的值所占据的空间是固定的，因此可将其存储在占用较小内存区域的“栈” 中，这种存储机制便于 ECMAScript 解释程序迅速查找变量的值。而如果一个值是引用类型， 那么其存储空间将从“堆”中分配。 “栈”与“堆”是计算机操作系统中两个十分重要的概念，这是因为二者作用的重要性。从 “堆”是一种树形存储结 构。从计算机操作系统原理上理解，“栈”一般位于一级缓存中；而“堆”一般位于二级缓存 中，一级缓存的存取速度自然是快于二级缓存的。 “栈”与“堆”的结构关系到变量的存储机制。由于 ECMAScript 引用值的大小会改变， 因此不能将其存储在“栈”中，否则会降低变量查找访问的速度。而指向引用值的指针（pointer） 是存储在“栈”中的，该值是该引用值对象存储在堆中的地址，因为地址的大小是固定的，所