255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 352 积木 Sketch 插件进阶开发指南 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 它产生及消费流程如下图所示： Flutter VSync Flutter 框架注册 VSync 回调之后，通过 C++ 侧的 VsyncWaiter 类等待 VSync 前端 < 5 信号，后者通过 JNI 等一系列调用，最终 Java 侧的 VsyncWaiter 类调用 Android SDK 的 Choreographer.postFrameCallback 方 法， 再 通 过 JNI 一 层 框架提供了很多常用视图组件（Component），比如按钮、文字、图 片、列表等，但我们需要抛开这些上层组件，获得直接绘制的能力。借助官方 媒体播 放器开发指导 文档，可以发现鸿蒙提供了 SurfaceProvider 类，它管理的 Surface 对象可以用于视频解码后的展示。而 Flutter 渲染与视频上屏从原理上是类似的，因 此我们可以借用 SurfaceProvider 实现 Surface 的管理和创建：

大体上保持软件技术的中流砥柱位置。 更多的开发者开始把工具化（比如自动化）和测试当回事了。 静态站点生成器被重视起来。 CSS 网格布局（CSS Grid）势头正旺且前途无量。 NPM 受到来自 Yarn 的挑战。 下一代类 React 方案的演化通过 Preact、Deku、Rax 和 inferno 的形式展现，并伴随着 少量 API 改动。 此前大多数人学习接受 JSX，而如今他们已经享受其中。 一种可用的 CSS 一致性而战的时代已离我 们远去。 2016 前端开发回顾 14 几乎人人都意识到开发网页的时候必须考虑多设备适配策略。 使用其他语言的开发者持续涌入 JS 领域，他们也带来了一些东西：例如类型检测，和对 类语法以及面向对象思想的执念。 前端开发引入了热模块替换技术和时间旅行调试。 原生 JS 浏览器模块加载器更受期待了。 Enforcing CSS 和 JS 格式规范变得更受重视（就 ES3 到 ES6 是一个高级的、动态的、弱类型的解释性编程语言，被包含在 ECMAScript 的语言规范中。同 HTML 和 CSS 一样，它是万维网内容生产环节必不可少的三种技术 之一，被大多数网站所使用，并且在不需要使用插件的情况下被所有现代的浏览器所支 持。Javascript 基于原型并且把函数视为头等公民，因此是一种多范式的编程语言，支持 面向对象，命令式以及函数式编程风格。它有一个可被用来操作文字，数组，日期以及

写在前面 hello‑algo.com 4 本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注释、内容 注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.3. 在动画图解中高效学习 视频和图片相比于文字的信息密度和结构化程度更高，更容易理解。在本书中，知识重难点会主要以动画、图 次调用函数都会在栈的顶部创建一个栈帧，函数返 回时，栈帧空间会被释放。 ‧「指令空间」用于保存编译后的程序指令，在实际统计中一般忽略不计。 Figure 2‑9. 算法使用的相关空间 /* 类 */ class Node { 2. 复杂度分析 hello‑algo.com 28 val; next; constructor(val) { this.val = val === undefined Node」包含两项数据，一是结点「值 Value」，二是指向下一结点的「指针 Pointer」（或称「引 用 Reference」）。 Figure 4‑5. 链表定义与存储方式 /* 链表结点类 */ class ListNode { val; next; constructor(val, next) { this.val = (val === undefined ? 0 : val);

本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注 释、内容注释、多行注释。 第 0 章 前言 www.hello‑algo.com 5 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 指令空间：用于保存编译后的程序指令，在实际统计中通常忽略不计。 在分析一段程序的空间复杂度时，我们通常统计暂存数据、栈帧空间和输出数据三部分，如图 2‑15 所示。 图 2‑15 算法使用的相关空间 相关代码如下： /* 类 */ class Node { val; next; constructor(val) { this.val = val === undefined ? 0 : val; // 节点值 this 度是 ?(?) 。 Q：函数和方法这两个术语的区别是什么？ 函数（function）可以被独立执行，所有参数都以显式传递。方法（method）与一个对象关联，被隐式传递给 调用它的对象，能够对类的实例中包含的数据进行操作。 下面以几种常见的编程语言为例来说明。 ‧ C 语言是过程式编程语言，没有面向对象的概念，所以只有函数。但我们可以通过创建结构体（struct） 来模拟面向对象编程，

为准，例如使用 None 来表示“空”。 ‧ 本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注 释、内容注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 略不计。 在分析一段程序的空间复杂度时，我们通常统计暂存数据、栈帧空间和输出数据三部分。 第 2 章 复杂度分析 hello‑algo.com 40 图 2‑15 算法使用的相关空间 /* 类 */ class Node { val; next; constructor(val) { this.val = val === undefined ? 0 : val; // 节点值 this 联，被隐式传递给调用它的对象，能够对类的实例中包含的数据进行操作。 下面以几个常见的编程语言来说明。 ‧ C 语言是过程式编程语言，没有面向对象的概念，所以只有函数。但我们可以通过创建 结构体（struct）来模拟面向对象编程，与结构体相关联的函数就相当于其他语言中的 方法。 ‧ Java 和 C# 是面向对象的编程语言，代码块（方法）通常都是作为某个类的一部分。静 态方法的行为类似于函数，因为它被绑定在类上，不能访问特定的实例变量。

本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注 释、内容注释、多行注释。 第 0 章 前言 hello‑algo.com 5 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 指令空间：用于保存编译后的程序指令，在实际统计中通常忽略不计。 在分析一段程序的空间复杂度时，我们通常统计暂存数据、栈帧空间和输出数据三部分，如图 2‑15 所示。 图 2‑15 算法使用的相关空间 相关代码如下： /* 类 */ class Node { val; next; constructor(val) { this.val = val === undefined ? 0 : val; // 节点值 this 度是 ?(?) 。 Q：函数和方法这两个术语的区别是什么？ 函数（function）可以被独立执行，所有参数都以显式传递。方法（method）与一个对象关联，被隐式传递给 调用它的对象，能够对类的实例中包含的数据进行操作。 下面以几种常见的编程语言为例来说明。 ‧ C 语言是过程式编程语言，没有面向对象的概念，所以只有函数。但我们可以通过创建结构体（struct） 来模拟面向对象编程，

为准，例如使用 None 来表示“空”。 ‧ 本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注 释、内容注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 第 0 章 前言 hello‑algo.com 5 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视 指令空间：用于保存编译后的程序指令，在实际统计中通常忽略不计。 在分析一段程序的空间复杂度时，我们通常统计暂存数据、栈帧空间和输出数据三部分，如图 2‑15 所示。 图 2‑15 算法使用的相关空间 相关代码如下： /* 类 */ class Node { val; next; constructor(val) { this.val = val === undefined ? 0 : val; // 节点值 this ?(?) 。 Q：函数和方法这两个术语的区别是什么？ 「函数 function」可以被独立执行，所有参数都以显式传递。「方法 method」与一个对象关联，被隐式传递 给调用它的对象，能够对类的实例中包含的数据进行操作。 下面以几种常见的编程语言为例来说明。 ‧ C 语言是过程式编程语言，没有面向对象的概念，所以只有函数。但我们可以通过创建结构体（struct） 来模拟面向对象编程，

..................................................................................... 56 Promise的实现类库（Library） .................................................................................... 56 Promise 的、Promise的相关知识为主要讲解内容。 在Firefox和Chrome这样技术比较超前的浏览器上，不需要安装额外的插件就能使用 Promise功能，此外ES6 Promises的规范来源于Promises/A+社区，它有很多版本的实 现。 我们将会从基础API开始介绍可以在浏览器的原生支持或者通过插件支持的Promise功 能。 也希望各位读者能了解这其中Promise适合干什么，不适合干什么，能根据实际需 60 Promise.resolve 只使用了共通的方法 then ，提供了在不同的类库之间进行promise对 象互相转换的功能。 这种转换为thenable的功能在之前是通过使用 Promise.cast 来完成的，从它的名字我们 也不难想象它的功能是什么。 除了在编写使用Promise的类库等软件时需要对Thenable有所了解之外，通常作为end- user使用的时候，我们可能不会用到此功能。

书栈(BookStack.CN) 构建 4 标准对象 在JavaScript的世界里，一切都是对象。 但是某些对象还是和其他对象不太一样。为了区分对象的类型，我们用 typeof 操作符获取对象的类 型，它总是返回一个字符串： 1. typeof 123; // 'number' 2. typeof NaN; // 'number' 3. typeof 'str'; // 'string' Java或C#，很好，你一定明白面向对象的两个基本概念： 类：类是对象的类型模板，例如，定义Student类来表示学生，类本身是一种类型，Student表 示学生类型，但不表示任何具体的某个学生； 实例：实例是根据类创建的对象，例如，根据Student类可以创建出xiaoming、xiaohong、 xiaojun等多个实例，每个实例表示一个具体的学生，他们全都属于Student类型。 所以，类和实例是大多数面向对象编程语言的基本概念。 '); 5. return false; 6. } 由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件 的网页不得不用Flash这样的第三方插件来实现。 随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。 HTML5的File API提供了 File 和 FileReader 两个主要对象，可以获得文件信息并读取文件。

等）。除此之外，各种宿 主环境提供额外的 API（即只能在该环境使用的接口），以便 JavaScript 调用。以浏览器为例，它提供的额外 API 可以分成三 大类。 浏览器控制类：操作浏览器 DOM 类：操作网页的各种元素 Web 类：实现互联网的各种功能 如果宿主环境是服务器，则会提供各种操作系统的 API，比如文件操 作 API、网络通信 API等等。这些你都可以在 Node 环境中找到。 本书主要介绍 第一版。它是一个大杂烩，语法有多个来源。 基本语法：借鉴 C 语言和 Java 语言。 数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大 历史 - 19 - 本文档使用 书栈(BookStack.CN) 构建 类。 函数的用法：借鉴 Scheme 语言和 Awk 语言，将函数当作第一 等公民，并引入闭包。 原型继承模型：借鉴 Self 语言（Smalltalk 的一种变种）。 正则表达式：借鉴 Perl 下节），而是因为 Netscape 公司已经决定，使用 Java 语言开发网络应用程序， JavaScript 可以像胶水一样，将各个部分连接起来。当然，后来的 历史是 Java 语言的浏览器插件失败了，JavaScript 反而发扬光 大。 1995年12月4日，Netscape 公司与 Sun 公司联合发布了 JavaScript 语言，对外宣传 JavaScript 是 Java