108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 端的实现 255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 自动化埋点探索 447 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React Native 组件库 beeshell 2.0 发布 473 React Native 在美团外卖客户端的实践 506 Android 静态代码扫描效率优化与实践 530 Probe：Android （HarmonyOS）是华为推出的一款面向未来、面向全场景的分布式操作系 统。在传统单设备系统能力的基础上，鸿蒙提出了基于同一套系统能力、适配多种终 端形态的分布式理念。自 2020 年 9 月 HarmonyOS 2.0 发布以来，华为加快了鸿 蒙系统大规模落地的步伐，预计 2021 年底，鸿蒙系统会覆盖包括手机、平板、智能 穿戴、智慧屏、车机在内数亿台终端设备。对移动应用而言，新的系统理念、新的交 互形式，也意味

本文档使用 书栈(BookStack.CN) 构建 就是在 Mosaic 的基础上，开发面向普通用户的新一代的浏览器 Netscape Navigator。 1994年12月，Navigator 发布了1.0版，市场份额一举超过90%。 Netscape 公司很快发现，Navigator 浏览器需要一种可以嵌入网 页的脚本语言，用来控制浏览器行为。当时，网速很慢而且上网费很 贵，有些操作不 可以像胶水一样，将各个部分连接起来。当然，后来的 历史是 Java 语言的浏览器插件失败了，JavaScript 反而发扬光 大。 1995年12月4日，Netscape 公司与 Sun 公司联合发布了 JavaScript 语言，对外宣传 JavaScript 是 Java 的补充，属 历史 - 20 - 本文档使用 书栈(BookStack.CN) 构建 于轻量级的 Java，专门用来操作网页。 别。JavaScript 语法要比 Java 自由得多。 另外，Java 语言需要编译，而 JavaScript 语言则是运行时由解释 器直接执行。 总之，JavaScript 的原始设计目标是一种小型的、简单的动态语 言，与 Java 有足够的相似性，使得使用者（尤其是 Java 程序员） 可以快速上手。 1996年8月，微软模仿 JavaScript 开发了一种相近的语言，取名为 JScript（J

com/xitu/front-end-handbook-2017 本文档基于 Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License 协议发布。 致谢 沪江Web前端团队 掘金翻译计划 Introduction 10 前端开发者是什么？ WEB 前端开发，也作客户端开发，是给网站或网页应用生产 HTML、CSS 和 JavaScript ESLint）进行语法检查。 开发者弃 Sublime 和 Atom 转投 Visual Studio Code 编辑器，这成为一种趋势。 jQuery 仍有热度，但使用率和关注度都在下滑。jQuery 3 已然发布 ，却无人问津。 Vue.js 理所应当地吸收更多追随者。 JavaScript 函数式编程和模式备受关注。 离线开发和渐进式 WEB 应用（PWA）步入主流。 微软发力。 基于 web 技术，使用 React 本身会被彻底重写（React Fiber）或者进化（Inferno） Angular 终于决定遵循 SEMVER 规范，所以 Angular4（甚至于 Angular5）有望在 2017 年发布。 参见 Roadmap 简单的网站即 Web 1.0 可能会重新流行，但会建立在 2017 年新工具的基础上。（例如 Static site generation） RESTful JSON

详细的法律条文请参见创意共享网站。 前言 6 ECMAScript 6简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015 年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应 用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系 一个常见的问题是，ECMAScript 要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语言能够成为国 际标准。次年，ECMA 发布262号标准文件（ECMA-262）的第一版，规定了浏览 器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1.0版。 该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 么关系呢？ 2011年，ECMAScript 5.1版发布后，就开始制定6.0版了。因此，ES6 这个词的原 意，就是指 JavaScript 语言的下一个版本。 但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个 人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要 引入的功能。常规的做法是先发布6.0版，过一段时间再发6.1版，然后是6.2版、

vaScript的诞生。 在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一 代互联网公司。 由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内 设计出了JavaScript语言。你没看错，这哥们只用了10天时间。 为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推 6标准（简称ES6） 已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript 标准的哪个版本。 JavaScript简介 JavaScript历史 ECMAScript JavaScript版本 1 JavaScript简介 - 7 - 本文档使用 书栈(BookStack.CN) 构建 由于浏览器在发布时就确定了JavaScript的版 反复赋值，而且可以是不同类型的变量，但是要注意只能用 var 申明一次，例如： 1. var a = 123; // a的值是整数123 2. a = 'ABC'; // a变为字符串 这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须 指定变量类型，如果赋值的时候类型不匹配，就会报错。例如Java是静态语言，赋值语句如下： 1. int a = 123; // a是整数类型变量，类型用int申明

. . . . . . . . . . . . . . . . . 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 致谢 本书在开源社区众多

. . . . . . . . . . . . . . . . . 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 致谢 本书在开源社区众多

. . . . . . . . . . . . . . . . . 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 致谢 在本书

1995：LiveScript/JavaScript 始于网景 网景通信公司（Netscape）开发 LiveScript 1.0，与 Sun 公司组成开发联盟。由于 Java 正流行，LiveScript 发布前临时改名 JavaScript. 1996：Microsoft 采用 在 Internet Explorer 3 中加入名为 JScript 的 JavaScript 实现. 1997：JavaScript 检测访客的浏览器信息  控制 cookies 和本地存储 JavaScript 功能、脚本语言 JavaScript 特点 • 脚本编写语言 • 基于对象的语言 • 简单性 • 安全性 • 动态性 • 跨平台 6 VCG JavaScript 2020/4/28 7  主要功能  向 HTML 页面添加交互行为  读写 HTML 元素  在数据被提交到服务器之前验证数据