在美团外卖的实践 14 FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 Probe：Android 线上 OOM 问题定位组件 560 活动 Web 页面人机识别验证的探索与实践 580 React Native 工程中 TSLint 静态检查工具的探索之路 589 ESLint 在中大型团队的应用实践 610 美团 iOS 工程 zsource 命令背后的那些事儿 627 客户端单周发版下的多分支自动化管理与实践 635 美团外卖前端容器化演进实践 643 MTFlutter 是美团外卖搭建起的公司级 Flutter 研发生态，它的架构图如下图所示： MTFlutter 架构图 如图所示，MTFlutter 已涵盖研发、调试、测试、发布、线上运维及工程管理整套闭 环，同时落地了动态化解决方案，支撑了公司多个业务发展。在大前端融合的趋势 下，美团外卖商家端持续在探索更优的多端复用方案，通过 MTFlutter 生态的建设， 目前 Flutter

作者：科迪·林黎（Cody Lindley），由「前端大师（Frontend Masters）」倾情赞助。 这是一本可供任何人使用的指南，用于学习前端开发实践。该指南大体上勾勒出了前端工程 的轮廓，同时也讨论了前端工程的实践：2017 年，如何学习前端工程，用什么工具来实践？ 笔者有意将本书打造为一份专业资料，为想要或正在实践的前端开发者们提供学习材料和开 发工具。其次，它同样可供主管、CTO、讲师和猎头们深入探索前端开发实践。 领。其价值在于为恰好够用的分类信息搜罗简 洁、聚焦且符合时宜的甄选内容，以免在特别话题下钻了牛角尖。 预期本书每年都迭代一次内容。 本书分为三部分。 第一部分：前端实践 第一部分概述了前端工程实践。 第二部分：学习前端开发 第二部分指出了学习成为一个前端开发者所需的自学资源和教学资源（译者注：教学资源包 括有讲师指导的付费课程、计划、学院和训练营）。 第三部分：前端开发工具 第 app" 这些理念可以归结为一个概念："JAM Stack"。 展望 2017 16 第一部分. 前端实践 第一部分概述了前端工程实践。 第一部分. 前端实践 17 前端职称 以下是前端职称的描述清单。前端开发者最常用的称呼是 “前端开发者” 或 “前端工程师” 。注 意，通常在名称里包含 “前端”、“客户端”、“web UI”、“HTML”、“CSS” 和 “JavaScript”

或令人惊叹的事物背后，都隐藏着精 妙的算法思想。 同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 本书旨在通过清晰易懂的动画图解和可运行的代码示例， 位数的整数（例如学号），那么我们就可以用效率更高的“基数排序”来做，将时间复杂度降为 ?(??) ， 其中 ? 为位数。当数据体量很大时，节省出来的运行时间就能创造较大价值（成本降低、体验变好等）。 在工程领域中，大量问题是难以达到最优解的，许多问题只是被“差不多”地解决了。问题的难易程度一方 面取决于问题本身的性质，另一方面也取决于观测问题的人的知识储备。人的知识越完备、经验越多，分析 问题就会越深入，问题就能被解决得更优雅。 非常贵，随 CPU 打包计价 我们可以将计算机存储系统想象为图 4‑9 所示的金字塔结构。越靠近金字塔顶端的存储设备的速度越快、容 量越小、成本越高。这种多层级的设计并非偶然，而是计算机科学家和工程师们经过深思熟虑的结果。 ‧ 硬盘难以被内存取代。首先，内存中的数据在断电后会丢失，因此它不适合长期存储数据；其次，内存 的成本是硬盘的几十倍，这使得它难以在消费者市场普及。 ‧ 缓存的大容量和高速度难以兼得。随着

Association），希望 JavaScript 能够成为国际标准，以此抵抗 微软。ECMA 的39号技术委员会（Technical Committee 39）负 责制定和审核这个标准，成员由业内的大公司派出的工程师组成，目前 共25个人。该委员会定期开会，所有的邮件讨论和会议记录，都是公开 的。 1997年7月，ECMA 组织发布262号标准文件（ECMA-262）的第一 版，规定了浏览器脚本语言的标准，并将这种语言称为 虚拟机，可以运行 Dart 程 序，但 Dart 程序也可以被编译成 JavaScript 程序运行。 历史 - 27 - 本文档使用 书栈(BookStack.CN) 构建 2011年，微软工程师Scott Hanselman提出，JavaScript 将是互 联网的汇编语言。因为它无所不在，而且正在变得越来越快。其他语言 的程序可以被转成 JavaScript 语言，然后在浏览器中运行。 obj 就是一个类似数组的对象。但是，“类似数组的 对象”并不是数组，因为它们不具备数组特有的方法。对象 obj 没有数 组的 push 方法，使用该方法就会报错。 “类似数组的对象”的根本特征，就是具有 length 属性。只要 有 length 属性，就可以认为这个对象类似于数组。但是有一个问题， 这种 length 属性不是动态值，不会随着成员的变化而变化。 1. var

或令人惊叹的事物背后，都隐藏着精 妙的算法思想。 同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 本书旨在通过清晰易懂的动画图解和可运行的代码示例， 非常贵，随 CPU 打包计价 我们可以将计算机存储系统想象为图 4‑9 所示的金字塔结构。越靠近金字塔顶端的存储设备的速度越快、容 量越小、成本越高。这种多层级的设计并非偶然，而是计算机科学家和工程师们经过深思熟虑的结果。 ‧ 硬盘难以被内存取代。首先，内存中的数据在断电后会丢失，因此它不适合长期存储数据；其次，内存 的成本是硬盘的几十倍，这使得它难以在消费者市场普及。 ‧ 缓存的大容量和高速度难以兼得。随着 两种实现的对比结论与栈一致，在此不再赘述。 5.2.3 队列典型应用 ‧ 淘宝订单。购物者下单后，订单将加入队列中，系统随后会根据顺序处理队列中的订单。在双十一期 间，短时间内会产生海量订单，高并发成为工程师们需要重点攻克的问题。 ‧ 各类待办事项。任何需要实现“先来后到”功能的场景，例如打印机的任务队列、餐厅的出餐队列等， 队列在这些场景中可以有效地维护处理顺序。 5.3 双向队列 在队列中

非常贵，随 CPU 打包计价 我们可以将计算机存储系统想象为图 4‑9 所示的金字塔结构。越靠近金字塔顶端的存储设备的速度越快、容 量越小、成本越高。这种多层级的设计并非偶然，而是计算机科学家和工程师们经过深思熟虑的结果。 ‧ 硬盘难以被内存取代。首先，内存中的数据在断电后会丢失，因此它不适合长期存储数据；其次，内存 的成本是硬盘的几十倍，这使得它难以在消费者市场普及。 ‧ 缓存的大容量和高速度难以兼得。随着 两种实现的对比结论与栈一致，在此不再赘述。 5.2.3 队列典型应用 ‧ 淘宝订单。购物者下单后，订单将加入队列中，系统随后会根据顺序处理队列中的订单。在双十一期 间，短时间内会产生海量订单，高并发成为工程师们需要重点攻克的问题。 ‧ 各类待办事项。任何需要实现“先来后到”功能的场景，例如打印机的任务队列、餐厅的出餐队列等， 队列在这些场景中可以有效地维护处理顺序。 5.3 双向队列 在队列中 数据完整性检查：数据发送方可以计算数据的哈希值并将其一同发送；接收方可以重新计算接收到的 数据的哈希值，并与接收到的哈希值进行比较。如果两者匹配，那么数据就被视为完整。 对于密码学的相关应用，为了防止从哈希值推导出原始密码等逆向工程，哈希算法需要具备更高等级的安全 特性。 ‧ 单向性：无法通过哈希值反推出关于输入数据的任何信息。 ‧ 抗碰撞性：应当极难找到两个不同的输入，使得它们的哈希值相同。 ‧ 雪崩效应：输入的微小

两种实现的对比结论与栈一致，在此不再赘述。 5.2.3 队列典型应用 ‧ 淘宝订单。购物者下单后，订单将加入队列中，系统随后会根据顺序依次处理队列中的订单。在双十一 期间，短时间内会产生海量订单，高并发成为工程师们需要重点攻克的问题。 ‧ 各类待办事项。任何需要实现“先来后到”功能的场景，例如打印机的任务队列、餐厅的出餐队列等。 队列在这些场景中可以有效地维护处理顺序。 5.3 双向队列 在队列中 数据完整性检查：数据发送方可以计算数据的哈希值并将其一同发送；接收方可以重新计算接收到的 数据的哈希值，并与接收到的哈希值进行比较。如果两者匹配，那么数据就被视为完整的。 对于密码学的相关应用，为了防止从哈希值推导出原始密码等逆向工程，哈希算法需要具备更高等级的安全 特性。 ‧ 抗碰撞性：应当极其困难找到两个不同的输入，使得它们的哈希值相同。 第 6 章 哈希表 hello‑algo.com 123 ‧ 雪崩效应：输入的 足无后效性。对于这类问题，我们通常会选择 使用其他方法，例如启发式搜索、遗传算法、强化学习等，从而在有限时间内得到可用的局部最优解。 14.3 动态规划解题思路 上两节介绍了动态规划问题的主要特征，接下来我们一起探究两个更加实用的问题。 1. 如何判断一个问题是不是动态规划问题？ 2. 求解动态规划问题该从何处入手，完整步骤是什么？ 14.3.1 问题判断 总的来说，如果一个问题包含

.....................................................................................40 8.6.1 属性的特征................................................................................................... ECMAScript 程 序是一组可通信的对象。ECMAScript 对象(object)都是未排序的属性 (properties)集合，零个或 多个特征(attributes)来分别确定其中的各属性应如何使用——举个例子：当某个 属性的 ReadOnly（只读）特征被设为真(true)时， 任何通过执行 ECMAScript 代码来改变这个属性值 的企图都不会生效。属性是装载其它对象的容器，如原语值 (primitive 对象类型 对象是未排序是属性容器。每个属性由名字、值和一个特征的集合组成。 8.6.1 属性的特征 属性可以拥有下表中零个或多个特征。 特征 描述 ReadOnly 该属性是一个只读属性。使用 ECMAScript 代码写入该属性的企图将被忽 略。（不过，要注意的是，在某些情况下，由于宿主环境做出的动作，有 ReadOnly 特征的属性可能会随着时间的推移改变；"ReadOnly" 不代表“一成

是JavaScript全栈教程！ 可以在线免费学习！ JavaScript教程 - 5 - 本文档使用 书栈(BookStack.CN) 构建 不要再犹豫了，立刻从现在开始，零基础迈向全栈开发工程师！ 原文: https://wizardforcel.gitbooks.io/liaoxuefeng/content/js/1.html 可以在线编写JavaScript代码并直接运行！ JavaScript教程 研几个月，也未必搞得清楚 XML的规范。 终于，在2002年的一天，道格拉斯·克罗克福特（Douglas Crockford）同学为了拯救深陷水深火热 同时又被某几个巨型软件企业长期愚弄的软件工程师，发明了JSON这种超轻量级的数据交换格式。 道格拉斯同学长期担任雅虎的高级架构师，自然钟情于JavaScript。他设计的JSON实际上是 JavaScript的一个子集。在JSON中，一共就这么几种数据类型： 却是JavaScript世界中使用最广泛的一个库。 江湖传言，全世界大约有80~90%的网站直接或间接地使用了jQuery。鉴于它如此流行，又如此好用， 所以每一个入门JavaScript的前端工程师都应该了解和学习它。 jQuery这么流行，肯定是因为它解决了一些很重要的问题。实际上，jQuery能帮我们干这些事情： 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代

扩展运算符背后调用的是遍历器接口（ Symbol.iterator ），如果一个对象没有 部署这个接口，就无法转换。 Array.from 方法还支持类似数组的对象。所谓类 似数组的对象，本质特征只有一点，即必须有 length 属性。因此，任何 有 length 属性的对象，都可以通过 Array.from 方法转为数组，而此时扩展运 算符就无法转换。 Array.from({ }; } }; 上面代码中，对象 obj 是可遍历的（iterable），因为具有 Symbol.iterator 属 性。执行这个属性，会返回一个遍历器对象。该对象的根本特征就是具有 next 方 法。每次调用 next 方法，都会返回一个代表当前成员的信息对象，具 有 value 和 done 两个属性。 ES6 的有些数据结构原生具备 Iterator rator 函数除了状态 机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。 形式上，Generator 函数是一个普通函数，但是有两个特征。一是， function 关 键字与函数名之间有一个星号；二是，函数体内部使用 yield 表达式，定义不同 的内部状态（ yield 在英语里的意思就是“产出”）。 function*