一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 分实现细节的介绍，分享我们在移植和开发过程中的一些经验。希望能对大家有所启 发或者帮助。 背景知识和基础概念介绍 在适配开始之前，我们要明确好先做哪些事情。先来回顾一下 Flutter 的三层结构： 在 Flutter 的架构设计中，最上层为框架层，使用 Dart 语言开发，面向 Flutter 业务 的开发者；中间层为引擎层，使用 C/C++ 开发，实现了 Flutter 的渲染管线和 Flutter 实现多端复用成为了可能。而 Flutter Web 在美团外卖商家学院业务中也取得了阶 段性的成果，实现了 App、H5 侧的体验一致性，为后续推动更多业务线实现 App- Web 一体化打下了坚实的基础。 可以预见的是，基于 Flutter Web 实现的多端复用，势必会有效缩短项目交付周期。 但由于我们对页面加载性能、滚动性能做的仍不够完美，不足以应对更加复杂的业务 场景，因此我们依然还有许多工作：

ECMAScript 6简介 let 和 const 命令 变量的解构赋值 字符串的扩展 正则的扩展 数值的扩展 函数的扩展 数组的扩展 对象的扩展 Symbol Set 和 Map 数据结构 Proxy Reflect Promise 对象 Iterator 和 for...of 循环 Generator 函数的语法 Generator 函数的异步应用 async 函数 保存在变量指向 的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数 组），变量指向的内存地址，保存的只是一个指针， const 只能保证这个指针是 固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个 对象声明为常量必须非常小心。 const foo = {}; // 为 foo 添加一个属性，可以成功 foo.prop = 123; foo 觉地就创建了全局变量（比如打字出 错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一 方面， window 对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实 体含义的对象，也是不合适的。 ES6为了改变这一点，一方面规定，为了保持兼容性， var 命令和 function 命 令声明的全局变量，依旧是顶层对象的属性；另一方面规定， let 命 令、

Iterators 和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 书写.d.ts文件 JSX Decorators 混入 三斜线指令 如何书写声明文件 结构 规范 举例 深入 发布 使用 工程配置 tsconfig.json NPM包的类型 TypeScript Handbook（中文版） 2 5.3 5.4 5.5 5.6 Iterators 和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 书写.d.ts文件 JSX Decorators 混入 三斜线指令 如何书写声明文件 结构 TypeScript Handbook（中文版） 5 介绍 规范 举例 深入 发布 使用 工程配置 tsconfig.json NPM包的类型 编译选项 在MSBuild里使用编译选项 类似地，尝试删除 greeter 调用的所有参数。 TypeScript会告诉你使用了非期望 个数的参数调用了这个函数。 在这两种情况中，TypeScript提供了静态的代码分 析，它可以分析代码结构和提供的类型注解。 TypeScript Handbook（中文版） 10 5分钟了解TypeScript 要注意的是尽管有错误， greeter.js 文件还是被创建了。 就算你的代码里有错

要变 更，为即将到来的国际化语言设施和语言未来发展的作提前准备。 关于这个语言的工作并没有结束。技术委员会正在致力于作出意义重大的优化，这包括脚 本在互联网上创建和使用的机制，以及与其它标准实 体（如万维网联盟(W3C)及无线应用协议 论坛的等团体）间更紧密的配合。 1 作用范围 此标准定义了 ECMAScript 脚本语言。 2 前言 符合标准的 ECMAScript 实现必须提 个对象包含同名属性，被引用指向的就是这个属性；如果那个对象并没有包含 同名属性，接下来检查它的原型，如此继续下去。 通常，在基于类的面向对象语言中，实例装载状态，类装载方法，且继承的仅仅是结构和 行为。而在 ECMAScript 中，状态和方法均由对象装载，且结构、行为、状态都会被继承。 所有没有直接包含某个它们的原型所包含的特定属性的对象，与它们的原型共享那个属性 和它的值。下面的图表阐述了一切： CF 是一个构造函数（当然也是一个对象）。使用 构造函数是 一种创建并初始化对象的函数对象。每个工作；构造函数都拥有一个相关联的 原型对象，用它来实现继承和共享属性。 4.3.5 原型 原型是一 种对象，被用在 ECMAScript 中实现继承结构、状态和行为。当构造函数创建对 象时，那个对象隐含引用构造函数的关联原型，以此分解属性引用。通过程序中的表达式 constructor.prototype 可以引用到构造函数的关联原型，通过继承，添加给对象的属性

Decorators 混入 三斜线指令 JavaScript文件里的类型检查 - 2 - 本文档使用 书栈网 · BookStack.CN 构建 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合 混入 三斜线指令 JavaScript文件里的类型检查 实用工具类型 如何书写声明文件 介绍 目录 README - 8 - 本文档使用 书栈网 · BookStack.CN 构建 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合 命名空间 命名空间和模块 模块解析 声明合并 JSX Decorators 混入 三斜线指令 JavaScript文件里的类型检查 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合

5 AJAX 6.6 Promise 6.7 Canvas 7 jQuery 7.1 选择器 7.1.1 层级选择器 7.1.2 查找和过滤 7.2 操作DOM 7.2.1 修改DOM结构 7.3 事件 7.4 动画 7.5 扩展 8 underscore 8.1 Collections 8.2 Arrays 8.3 Functions 8.4 Objects 8.5 是JavaScript语法要求必须的，但缩 进有助于我们理解代码的层次，所以编写代码时要遵守缩进规则。很多文本编辑器具有“自动缩进”的功 能，可以帮助整理代码。 {…} 还可以嵌套，形成层级结构： 基本语法 语法 2.1 基本语法 - 13 - 本文档使用 书栈(BookStack.CN) 构建 1. if (2 > 1) { 2. x = 1; 3. y = - 本文档使用 书栈(BookStack.CN) 构建 2.8 Map和Set JavaScript的默认对象表示方式 {} 可以视为其他语言中的 Map 或 Dictionary 的数据结构， 即一组键值对。 但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为 键也是非常合理的。 为了解决这个问题，最新的ES6规范引入了新的数据类型

任何一个问题，JavaScript 都有多种解决方法。阅读本书的过程 中，你会诧异于 JavaScript 语法的灵活性。 JavaScript 的核心语法部分相当精简，只包括两个部分：基本的语 法构造（比如操作符、控制结构、语句）和标准库（就是一系列具有各 种功能的对象比如 Array 、 Date 、 Math 等）。除此之外，各种宿 主环境提供额外的 API（即只能在该环境使用的接口），以便 JavaScript t）。这些语法特性已 经被证明非常强大，可以用于许多场合，尤其适用异步编程。 JavaScript 的所有值都是对象，这为程序员提供了灵活性和便利 性。因为你可以很方便地、按照需要随时创造数据结构，不用进行麻烦 的预定义。 JavaScript 的标准还在快速进化中，并不断合理化，添加更适用的 语法特性。 （2）支持编译运行。 JavaScript 语言本身，虽然是一种解释型语言，但是在现代浏览器 现这种新语言。 1995年5月，Brendan Eich 只用了10天，就设计完成了这种语言的 第一版。它是一个大杂烩，语法有多个来源。 基本语法：借鉴 C 语言和 Java 语言。 数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大 历史 - 19 - 本文档使用 书栈(BookStack.CN) 构建 类。 函数的用法：借鉴 Scheme 语言和 Awk 语言，将函数当作第一

展前景等因素需要考虑。评估任何一个框架不仅要看其优势，还要看它给开发者挖的坑有 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular 5，其不变的最显著特征就 是其整合性。作为一个一体化框架，Angular 经过精心的前期设计，涵盖了开发中的各个 层面，层与层之间都经过精心调适。开发者借助这个“开箱即用”的框架，就可以完成大 部分的前端开发工作，而不需要费时费力去组合、评估其他前端技术。这可以有效降低开 章 准备工作 .....................................1 1.1 需要了解什么.............................1 1.2 本书结构.....................................1 1.2.1 第 1 部分：准备...................2 1.2.2 第 2 部分：使用 Angular 40 3.4 运行项目...................................42 3.5 理解合并项目和工具................44 3.5.1 理解项目结构.....................44 3.5.2 理解工具集成.....................44 3.5.3 理解项目变更系统..............45 3

力，啃厚重的书往往变成了一项艰巨的挑战。 如果你也面临类似的困扰，那么很幸运这本书“找”到了你。本书是我对这个问题给出的答案，即使不是最 优解，也至少是一次积极的尝试。本书虽然不足以让你直接拿到 Offer，但会引导你探索数据结构与算法的 “知识地图”，带你了解不同“地雷”的形状、大小和分布位置，让你掌握各种“排雷方法”。有了这些本领， 相信你可以更加自如地刷题和阅读文献，逐步构建起完整的知识体系。 我深深赞同费曼教授所言：“Knowledge 仓库。动画在 PDF 内的 展示效果受限，可访问 hello‑algo.com 网页版以获得更优的阅读体验。 推荐语 “一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读！” ——邓俊辉，清华大学计算机系教授 “如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！” ——李沐，亚马逊资深首席科学家 i 目 录 第 0 章 前言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 第 3 章 数据结构 51 3.1 数据结构分类 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 3.2 基本数据类型

力，啃厚重的书往往变成了一项艰巨的挑战。 如果你也面临类似的困扰，那么很幸运这本书“找”到了你。本书是我对这个问题给出的答案，即使不是最 优解，也至少是一次积极的尝试。本书虽然不足以让你直接拿到 Offer，但会引导你探索数据结构与算法的 “知识地图”，带你了解不同“地雷”的形状、大小和分布位置，让你掌握各种“排雷方法”。有了这些本领， 相信你可以更加自如地刷题和阅读文献，逐步构建起完整的知识体系。 我深深赞同费曼教授所言：“Knowledge 仓库。动画在 PDF 内的 展示效果受限，可访问 hello‑algo.com 网页版以获得更优的阅读体验。 推荐语 “一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读！” ——邓俊辉，清华大学计算机系教授 “如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！” ——李沐，亚马逊资深首席科学家 i 目 录 第 0 章 前言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 第 3 章 数据结构 51 3.1 数据结构分类 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 3.2 基本数据类型