视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 352 积木 Sketch 插件进阶开发指南 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 行和交互能力之上，我们更需要关注 Flutter 与鸿蒙自身生态的结合：如何优雅地适配鸿蒙的分布式技术？如何用 Flutter 实现设备之间的快速连接、资源共享？现有的众多 Flutter 插件如何应用到鸿蒙系统 上？未来 MTFlutter 团队将在这些方面做更深入的探索，因为解决好这些问题，才是 真正能让应用覆盖用户生活的全场景的关键。 参考文献 ● https://developer

是一个高级的、动态的、弱类型的解释性编程语言，被包含在 ECMAScript 的语言规范中。同 HTML 和 CSS 一样，它是万维网内容生产环节必不可少的三种技术 之一，被大多数网站所使用，并且在不需要使用插件的情况下被所有现代的浏览器所支 持。Javascript 基于原型并且把函数视为头等公民，因此是一种多范式的编程语言，支持 面向对象，命令式以及函数式编程风格。它有一个可被用来操作文字，数组，日期以及 相关规范： 超文本传输协议 -- HTTP/1.1 HTTP/2 统一资源定位符 (URL) 统一资源定位符（URL）也被称为网址，是关于资源的引用，明确了计算机网络资源的 地址以及检索该资源的机制。URL 是统一资源标志符（URI）的一种特定类型，尽管许 多人认为这两个概念可以互换。URL 表明了获取所需资源的方式，然而并非每个 URI 都 会如此。URLs 通常被用于网页（http）， WebSockets） HTTP - 超文本传输协议（HTTP）是分布式、协作、超媒体信息系统的应用协议。HTTP 是万维网数据通信的基础。 — Wikipedia CORS - 跨域资源共享（CORS）是一种机制，允许网页向非本域下的资源提供者请求受 限制的资源（比如字体）。 — Wikipedia WebSockets - WebSocket是一种在单个 TCP 连接上进行全双工通讯的协议。 We

如果感觉以下内容理解困难，可以在读完“栈”章节后再来复习。 那么，迭代和递归具有什么内在联系呢？以上述递归函数为例，求和操作在递归的“归”阶段进行。这意味 着最初被调用的函数实际上是最后完成其求和操作的，这种工作机制与栈的“先入后出”原则异曲同工。 事实上，“调用栈”和“栈帧空间”这类递归术语已经暗示了递归与栈之间的密切关系。 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:

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. 栈的实现 为了更加清晰地了解栈的运行机制，接下来我们来自己动手实现一个栈类。 栈规定元素是先入后出的，因此我们只能在栈顶添加或删除元素。然而，数组或链表都可以在任意位置添加删 除元素，因此 栈可被看作是一种受约束的数组或链表。换言之，我们可以“屏蔽”数组或链表的部分无关操

们选择 10 作为初始容量。 ‧ 数量记录：声明一个变量 size，用于记录列表当前元素数量，并随着元素插入和删除实时更新。根据此 变量，我们可以定位列表尾部，以及判断是否需要扩容。 ‧ 扩容机制：若插入元素时列表容量已满，则需要进行扩容。首先根据扩容倍数创建一个更大的数组，再 将当前数组的所有元素依次移动至新数组。在本示例中，我们规定每次将数组扩容至之前的 2 倍。 // === File: insert(index, num) { if (index < 0 || index >= this.#size) throw new Error('索引越界'); // 元素数量超出容量时，触发扩容机制 if (this.#size === this.#capacity) { this.extendCapacity(); } // 将索引 index 以及之后的元素都向后移动一位 for const size = stack.length; /* 判断是否为空 */ const is_empty = stack.length === 0; 5.1.2 栈的实现 为了深入了解栈的运行机制，我们来尝试自己实现一个栈类。 栈遵循先入后出的原则，因此我们只能在栈顶添加或删除元素。然而，数组和链表都可以在任意位置添加和 删除元素，因此栈可以被视为一种受限制的数组或链表。换句话说，我们可以“屏蔽”数组或链表的部分无

的、Promise的相关知识为主要讲解内容。 在Firefox和Chrome这样技术比较超前的浏览器上，不需要安装额外的插件就能使用 Promise功能，此外ES6 Promises的规范来源于Promises/A+社区，它有很多版本的实 现。 我们将会从基础API开始介绍可以在浏览器的原生支持或者通过插件支持的Promise功 能。 也希望各位读者能了解这其中Promise适合干什么，不适合干什么，能根据实际需 实际上即使使用回调方式的写法也能完成上面同样的工作，而使用Promise方式的话有 什么优点么？在本小节中我们没有讲到两者的对比及Promise的优点。在接下来的章节 中，我们将会对Promise优点之一，即错误处理机制进行介绍，以及和传统的回调方式 的对比。 Chapter.2 - 实战Promise 本章我们将会学习Promise提供的各种方法以及如何进行错误处理。 Promise.resolve 一般情况下我们都会使用 就像我们有时称具有 .length 方法的非数组对象为Array like一样，thenable指的是一个 具有 .then 方法的对象。 这种将thenable对象转换为promise对象的机制要求thenable对象所拥有的 then 方法应 该和Promise所拥有的 then 方法具有同样的功能和处理过程，在将thenable对象转换为 promise对象的时候，还会巧妙的利用thenable对象原来具有的

apply(null, args)); 20. } else { 21. alert('测试通过!'); 22. } 前面我们讲到了JavaScript引擎有一个在行末自动添加分号的机制，这可能让你栽到return语句的 一个大坑： 1. function foo() { 2. return { name: 'foo' }; 3. } 4. 5. foo(); return 3. { name: 'foo' }; 4. } 5. 6. foo(); // undefined 要小心了，由于JavaScript引擎在行末自动添加分号的机制，上面的代码实际上变成了： 1. function foo() { 2. return; // 自动添加了分号，相当于return undefined; 3. { name: 当然不是！闭包有非常强大的功能。举个栗子： 在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以 用 private 修饰一个成员变量。 在没有 class 机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。我们用 JavaScript创建一个计数器： 1. 'use strict'; 2. 3. function create_counter(initial)

null，undefined 和布尔值 数值 字符串 对象 函数 数组 运算符 算术运算符 比较运算符 布尔运算符 二进制位运算符 其他运算符，运算顺序 语法专题 数据类型的转换 错误处理机制 编程风格 console 对象与控制台 标准库 Object 对象 属性描述对象 Array 对象 包装对象 Boolean 对象 - 1 - 本文档使用 书栈(BookStack 下节），而是因为 Netscape 公司已经决定，使用 Java 语言开发网络应用程序， JavaScript 可以像胶水一样，将各个部分连接起来。当然，后来的 历史是 Java 语言的浏览器插件失败了，JavaScript 反而发扬光 大。 1995年12月4日，Netscape 公司与 Sun 公司联合发布了 JavaScript 语言，对外宣传 JavaScript 是 Java JavaScript 里面， null 就像在 Java 里一 样，被当成一个对象，Brendan Eich 觉得表示“无”的值最好不是对 象。其次，那时的 JavaScript 不包括错误处理机制，Brendan Eich 觉得，如果 null 自动转为0，很不容易发现错误。 因此，他又设计了一个 undefined 。区别是这样的： null 是一个表 示“空”的对象，转为数值时为