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

. . . . . . . . . . . . . . . . . 298 第 14 章 动态规划 299 14.1 初探动态规划 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 14.2 动态规划问题特性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 14.3 动态规划解题思路 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 14.4 0‑1 背包问题 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ‧ 数据结构：基本数据类型和数据结构的分类方法。数组、链表、栈、队列、哈希表、树、堆、图等数据 结构的定义、优缺点、常用操作、常见类型、典型应用、实现方法等。 ‧ 算法：搜索、排序、分治、回溯、动态规划、贪心等算法的定义、优缺点、效率、应用场景、解题步骤 和示例问题等。 第 0 章 前言 www.hello‑algo.com 3 图 0‑1 本书主要内容 0.1.3 致谢 本书在开源

. . . . . . . . . . . . . . . . . 297 第 14 章 动态规划 299 14.1 初探动态规划 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 14.2 动态规划问题特性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 14.3 动态规划解题思路 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 14.4 0‑1 背包问题 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ‧ 数据结构：基本数据类型和数据结构的分类方法。数组、链表、栈、队列、哈希表、树、堆、图等数据 结构的定义、优缺点、常用操作、常见类型、典型应用、实现方法等。 ‧ 算法：搜索、排序、分治、回溯、动态规划、贪心等算法的定义、优缺点、效率、应用场景、解题步骤 和示例问题等。 第 0 章 前言 hello‑algo.com 3 图 0‑1 本书主要内容 0.1.3 致谢 本书在开源社区众多

. . . . . . . . . . . . . . . . . 297 第 14 章 动态规划 299 14.1 初探动态规划 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 14.2 动态规划问题特性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 14.3 动态规划解题思路 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 14.4 0‑1 背包问题 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ‧ 数据结构：基本数据类型和数据结构的分类方法。数组、链表、栈、队列、哈希表、树、堆、图等数据 结构的定义、优缺点、常用操作、常见类型、典型应用、实现方法等。 ‧ 算法：搜索、排序、分治、回溯、动态规划、贪心等算法的定义、优缺点、效率、应用场景、解题步骤 和示例问题等。 第 0 章 前言 hello‑algo.com 3 图 0‑1 本书主要内容 0.1.3 致谢 本书在开源社区众多

L 在语义上描述了一个网 站的结构，并且隐含了其表现形式，因此是一种标记语言，而非程序语言。 — 维基百科 前端开发者所使用的技术 20 相关规范／文档： W3C HTML 规范大全 动态标准中的 HTML 元素 全局属性 W3C 的 HTML 5.2 HTML 属性参考资料 HTML 元素参考资料 HTML 语法 from the Living Standard 层叠样式表 的第三代事件规范 DOM 动态标准 W3C DOM4 JavaScript 编程语言 (ECMAScript 262) 前端开发者所使用的技术 21 JavaScript 是一个高级的、动态的、弱类型的解释性编程语言，被包含在 ECMAScript 的语言规范中。同 HTML 和 CSS 一样，它是万维网内容生产环节必不可少的三种技术 之一，被大多数网站所使用，并且在不需要使用插件的情况下被所有现代的浏览器所支 相关规范： 超文本传输协议 -- HTTP/1.1 HTTP/2 统一资源定位符 (URL) 统一资源定位符（URL）也被称为网址，是关于资源的引用，明确了计算机网络资源的 地址以及检索该资源的机制。URL 是统一资源标志符（URI）的一种特定类型，尽管许 多人认为这两个概念可以互换。URL 表明了获取所需资源的方式，然而并非每个 URI 都 会如此。URLs 通常被用于网页（http），

中的存储方式、数据结构分类方法。数组、链表、栈、队列、 散列表、树、堆、图等数据结构，内容包括定义、优劣势、常用操作、常见类型、典型应用、实现方法等。 ‧ 算法：查找算法、排序算法、搜索与回溯、动态规划、分治算法，内容包括定义、使用场景、优劣势、时 空效率、实现方法、示例题目等。 0. 写在前面 hello‑algo.com 2 Figure 0‑1. Hello 算法内容结构 0.1 个，分裂 两轮后为 4 个，⋯⋯，分裂 ? 轮后有 2? 个细胞。 指数阶增长得非常快，在实际应用中一般是不能被接受的。若一个问题使用「暴力枚举」求解的时间复杂度是 ?(2?) ，那么一般都需要使用「动态规划」或「贪心算法」等算法来求解。 // === File: time_complexity.js === /* 指数阶（循环实现） */ function exponential(n) { 的数组）等； ‧ 基于链表可实现：栈、队列、哈希表、树、堆、图等； 基于数组实现的数据结构也被称为「静态数据结构」，这意味着该数据结构在在被初始化后，长度不可变。相 反地，基于链表实现的数据结构被称为「动态数据结构」，该数据结构在被初始化后，我们也可以在程序运行 中修改其长度。 � 数组与链表是其他所有数据结构的“底层积木”，建议读者一定要多花些时间了解。 3.3. 小结 ‧ 整数 byte

. . . . . . . . . . . . . . . . . 299 第 14 章 动态规划 300 14.1 初探动态规划 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 14.2 动态规划问题特性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 14.3 动态规划解题思路 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 14.4 0‑1 背包问题 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ‧ 数据结构：基本数据类型，数据结构的分类方法。数组、链表、栈、队列、哈希表、树、堆、图等数据 结构的定义、优缺点、常用操作、常见类型、典型应用、实现方法等。 ‧ 算法：搜索、排序、分治、回溯、动态规划、贪心等算法的定义、优缺点、效率、应用场景、解题步骤、 示例题目等。 第 0 章 前言 hello‑algo.com 3 图 0‑1 Hello 算法内容结构 0.1.3 致谢 在本书

的、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对象原来具有的

vaScript的诞生。 在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一 代互联网公司。 由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内 设计出了JavaScript语言。你没看错，这哥们只用了10天时间。 为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推 反复赋值，而且可以是不同类型的变量，但是要注意只能用 var 申明一次，例如： 1. var a = 123; // a的值是整数123 2. a = 'ABC'; // a变为字符串 这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须 指定变量类型，如果赋值的时候类型不匹配，就会报错。例如Java是静态语言，赋值语句如下： 1. int a = 123; // a是整数类型变量，类型用int申明 a是整数类型变量，类型用int申明 2. a = "ABC"; // 错误：不能把字符串赋给整型变量 变量 2.2 数据类型和变量 - 20 - 本文档使用 书栈(BookStack.CN) 构建 和静态语言相比，动态语言更灵活，就是这个原因。 请不要把赋值语句的等号等同于数学的等号。比如下面的代码： 1. var x = 10; 2. x = x + 2; 如果从数学上理解 x = x + 2 那无论

null，undefined 和布尔值 数值 字符串 对象 函数 数组 运算符 算术运算符 比较运算符 布尔运算符 二进制位运算符 其他运算符，运算顺序 语法专题 数据类型的转换 错误处理机制 编程风格 console 对象与控制台 标准库 Object 对象 属性描述对象 Array 对象 包装对象 Boolean 对象 - 1 - 本文档使用 书栈(BookStack 下节），而是因为 Netscape 公司已经决定，使用 Java 语言开发网络应用程序， JavaScript 可以像胶水一样，将各个部分连接起来。当然，后来的 历史是 Java 语言的浏览器插件失败了，JavaScript 反而发扬光 大。 1995年12月4日，Netscape 公司与 Sun 公司联合发布了 JavaScript 语言，对外宣传 JavaScript 是 Java 别。JavaScript 语法要比 Java 自由得多。 另外，Java 语言需要编译，而 JavaScript 语言则是运行时由解释 器直接执行。 总之，JavaScript 的原始设计目标是一种小型的、简单的动态语 言，与 Java 有足够的相似性，使得使用者（尤其是 Java 程序员） 可以快速上手。 1996年8月，微软模仿 JavaScript 开发了一种相近的语言，取名为 JScript（J