JavaScript 错误报告／监控 性能工具 寻找工具的工具 5 前端开发者指南（2017） Introduction 6 作者：科迪·林黎（Cody Lindley），由「前端大师（Frontend Masters）」倾情赞助。 这是一本可供任何人使用的指南，用于学习前端开发实践。该指南大体上勾勒出了前端工程 的轮廓，同时也讨论了前端工程的实践：2017 年，如何学习前端工程，用什么工具来实践？ (ECMAScript 262) 6. JavaScript 对象表示法 (JSON) 7. 文档对象模型(DOM) 8. 网络 APIs (HTML5 或者浏览器 APIs) 9. 网络内容可达性指南 (WCAG) & 可访问的富互联网应用 (ARIA) 下面的介绍涵盖了以上技术的定义，相关文档以及具体规范。至于更加详尽的网络开发规范 请参看 platform.html5.org。 超文本标记语言 网络内容无障碍指南 (WCAG) & 可无障碍访问的富互联网应用 (ARIA) 可达性讨论的是对残障人士友好的产品设计，设备，服务或者环境。无障碍设计通过使 用对残障人士友好的技术（例如计算机屏幕读取仪）对“直接访问”（例如，普通人的访 问）和“间接访问”进行兼容。 — 维基百科 可无障碍访问的富互联网应用 (WAI-ARIA) 现状 网络无障碍倡议 (WAI) 网络内容无障碍指南 (WCAG)

外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 352 积木 Sketch 插件进阶开发指南 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 是将嵌入层移植到鸿蒙上，确切地说，我们要通过鸿蒙原生提供的平台能力，重新实 前端 < 3 现一遍 Flutter 嵌入层。 对于 Flutter 嵌入层的适配，Flutter 官方有一份不算详细的指南，实际操作起来成本 很高。由于鸿蒙的业务开发语言仍然可用 Java，在很多基础概念上与 Android 也有 相似之处（如下表所示），我们可以从 Android 的实现入手，完成对鸿蒙的移植。 框架注册 VSync 回调之后，通过 C++ 侧的 VsyncWaiter 类等待 VSync 前端 < 5 信号，后者通过 JNI 等一系列调用，最终 Java 侧的 VsyncWaiter 类调用 Android SDK 的 Choreographer.postFrameCallback 方 法， 再 通 过 JNI 一 层 层 传 回 Flutter 引擎消费掉此回调。Java 侧的 VsyncWaiter

它是基于并列/并行处理设计的一种编程语言。 现在JavaScript也拥有了这种特性，这就是本书所介绍的JavaScript Promise。 另外，如果说到基于JavaScript的异步处理，我想大多数都会想到利用回调函数。 使用了回调函数的异步处理 ---- getAsync("fileA.txt", function(error, result){ if(error){// 取得失败时的处理 throw Promise 迷你书（中文版） 6 // 取得成功时的处理 }); ---- <1> 传给回调函数的参数为(error对象， 执行结果)组合 Node.js等则规定在JavaScript的回调函数的第一个参数为 Error 对象，这也是它的一个 惯例。 像上面这样基于回调函数的异步处理如果统一参数使用规则的话，写法也会很明了。 但是，这也仅是编码规约而已，即使采用不同的写法也不会出错。 注册这个promise对象执行成功 时和失败时相应的回调函数。 这和回调函数方式相比有哪些不同之处呢？ 在使用promise进行一步处理的时候，我们 必须按照接口规定的方法编写处理代码。 也就是说，除promise对象规定的方法(这里的 then 或 catch )以外的方法都是不可以使 用的， 而不会像回调函数方式那样可以自己自由的定义回调函数的参数，而必须严格 遵守固定、统一的编程方式来编写代码。

RegExp#exec JavaScript 正则表达式迷你书 7. 第七章 正则表达式编程 | 第 65 页 本章不打算详细地讲解它们的方方面面细节，具体可以参考《JavaScript 权威指南》的第三部分。本章重点 列出一些容易忽视的地方，以飨读者。 7.2.1. search 和 match 的参数问题 我们知道字符串实例的那 4 个方法参数都支持正则和字符串。 但 search string.split(/(,)/) ); // =>["html", ",", "css", ",", "javascript"] 7.2.7. replace 是很强大的 《JavaScript 权威指南》认为 exec 是这 6 个 API 中最强大的，而我始终认为 replace 才是最强大的。 因为它也能拿到该拿到的信息，然后可以假借替换之名，做些其他事情。 总体来说 replace 有两 = 替换成 =2+3=5=，其中，$& 匹配的是 =， $` 匹配的是 2+3，$' 匹配的是 5。因此使用 "$&$`$&$'$&" 便达成了 目的。 当第二个参数是函数时，我们需要注意该回调函数的参数具体是什么： "1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function (match, $1, $2, index, input) {

RegExp#exec JavaScript 正则表达式迷你书 7. 第七章 正则表达式编程 | 第 65 页 本章不打算详细地讲解它们的方方面面细节，具体可以参考《JavaScript 权威指南》的第三部分。本章重点 列出一些容易忽视的地方，以飨读者。 7.2.1. search 和 match 的参数问题 我们知道字符串实例的那 4 个方法参数都支持正则和字符串。 但 search string.split(/(,)/) ); // =>["html", ",", "css", ",", "javascript"] 7.2.7. replace 是很强大的 《JavaScript 权威指南》认为 exec 是这 6 个 API 中最强大的，而我始终认为 replace 才是最强大的。 因为它也能拿到该拿到的信息，然后可以假借替换之名，做些其他事情。 总体来说 replace 有两 = 替换成 =2+3=5=，其中，$& 匹配的是 =， $` 匹配的是 2+3，$' 匹配的是 5。因此使用 "$&$`$&$'$&" 便达成了 目的。 当第二个参数是函数时，我们需要注意该回调函数的参数具体是什么： "1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function (match, $1, $2, index, input) {

还是全局作用域，因此输出的 a 为全局变量。这样的话，引擎就能确 认 e() 不会对当前的函数作用域产生影响，优化的时候就可以把这一 行排除掉。 eval 的别名调用的形式五花八门，只要不是直接调用，都属于别名调 用，因为引擎只能分辨 eval() 这一种形式是直接调用。 1. eval.call(null, '...') 2. window.eval('...') 3. (1, eval)('.. forEach() 方法的，但是通过 call() ，可以把 forEach() 嫁接 到 arrayLike 上面调用。 下面的例子就是通过这种方法，在 arguments 对象上面调 用 forEach 方法。 1. // forEach 方法 2. function logArgs() { 3. Array.prototype.forEach.call(arguments 顺便说一下，圆括号不是运算符，而是一种语法结构。它一共有两种用 法：一种是把表达式放在圆括号之中，提升运算的优先级；另一种是跟 在函数的后面，作用是调用函数。 注意，因为圆括号不是运算符，所以不具有求值作用，只改变运算的优 先级。 1. var x = 1; 2. (x) = 2; 上面代码的第二行，如果圆括号具有求值作用，那么就会变成 1 = 圆括号的作用 其他运算符，运算顺序 - 197 - 本文档使用

const square = n => n * n; 上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就 要占用多行，而且还不如现在这样写醒目。 箭头函数的一个用处是简化回调函数。 函数的扩展 146 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x 向运行时所在的作用域（即全局对象）。所以，3100毫秒之后， timer.s1 被更 新了3次，而 timer.s2 一次都没更新。 箭头函数可以让 this 指向固定化，这种特性很有利于封装回调函数。下面是一个 例子，DOM 事件的回调函数封装在一个对象里面。 var handler = { id: '123456', init: function() { document.addEventListener('click' this.id); } }; 函数的扩展 149 上面代码的 init 方法中，使用了箭头函数，这导致这个箭头函数里面 的 this ，总是指向 handler 对象。否则，回调函数运行 时， this.doSomething 这一行会报错，因为此时 this 指向 document 对象。 this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因

'B', 'C' 5. } 这就是为什么要引入新的 for … of 循环。 然而，更好的方式是直接使用 iterable 内置的 forEach 方法，它接收一个函数，每次迭代就自动 回调该函数。以 Array 为例： 1. var a = ['A', 'B', 'C']; 2. a.forEach(function (element, index, array) { 3. Array 类似，但 Set 没有索引，因此回调函数的前两个参数都是元素本身： 1. var s = new Set(['A', 'B', 'C']); 2. s.forEach(function (element, sameElement, set) { 3. alert(element); 4. }); Map 的回调函数参数依次为 value 、 key 和 map 原因 分析 由于 map() 接收的回调函数可以有3个参数： callback(currentValue, index, array) ，通常 我们仅需要第一个参数，而忽略了传入的后面两个参数。不幸的是， parseInt(string

变量量读写冲突 异步任务1 异步任务2 共享变量量 读、写 读、写 IO阻塞 回调地狱 Future也有不不⾜足 • get 很容易易导致另⼀一个对象阻塞 • 不不⽀支持多值、⾼高级错误处理理 next: 多任务求解1-10,000,000的和 序号 语⾔言 关键点 1 JavaScript 不不再有回调地狱，变异步为顺序化思维，程序更更加可读 2 Go ⾼高并发调度，通道让异步编程更更简单 （1）fork/join （2）CompletableFuture （3）反应式编程（Reactive Programming ) next: JavaScript 关键点：不不再有回调地狱，变异步为顺序化思维，程序更更加可读 2010年年 ECMAScript 5 2015年年 ECMAScript 6 2017年年 ECMAScript 2017 单线程事件循环 异步，callback elastic() Schedulers.single() Schedulers.single() 例例⼦子Reactor实现 总结 序号 语⾔言 关键点 1 JavaScript 不不再有回调地狱，变异步为顺序化思维，程序更更加可读 2 Go ⾼高并发调度，通道让异步编程更更简单 3 Scala （1）简洁的异步编程 （2）AKKA：分布式计算框架 4 Java （1）fork/join

创建⼀一个新的Promise px，其resolve/ reject函数对将⽤用作参数调⽤用p.then()。 即Promise.resolve(p)。 为px创建⼀一对新的onFulfilled/onRjected 响应函数，使[[asyncContext]]指向当前 栈顶执⾏行行上下⽂文。 3 将响应函数onXX作参数调⽤用px.then()， 使onXX函数添加到Jobs队列列。 4 将当前执⾏行行上下⽂文从栈顶移除。 创建⼀一个新的Promise px，其resolve/ reject函数对将⽤用作参数调⽤用p.then()。 即Promise.resolve(p)。 为px创建⼀一对新的onFulfilled/onRjected 响应函数，使[[asyncContext]]指向当前 栈顶执⾏行行上下⽂文。 3 将响应函数onXX作参数调⽤用px.then()， 使onXX函数添加到Jobs队列列。 4 将当前执⾏行行上下⽂文从栈顶移除。