2019-2021美团技术年货 CODE A BETTER LIFE 【前端篇】 前端 | 2021 1 让 Flutter 在鸿蒙系统上跑起来 1 FlutterWeb 在美团外卖的实践 14 FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 Flutter 在鸿蒙系统上跑起来 作者：杨超 前言 鸿蒙系统 （HarmonyOS）是华为推出的一款面向未来、面向全场景的分布式操作系 统。在传统单设备系统能力的基础上，鸿蒙提出了基于同一套系统能力、适配多种终 端形态的分布式理念。自 2020 年 9 月 HarmonyOS 2.0 发布以来，华为加快了鸿 蒙系统大规模落地的步伐，预计 2021 年底，鸿蒙系统会覆盖包括手机、平板、智能 年底，鸿蒙系统会覆盖包括手机、平板、智能 穿戴、智慧屏、车机在内数亿台终端设备。对移动应用而言，新的系统理念、新的交 互形式，也意味着新的机遇。如果能够利用好鸿蒙的开发生态及其特性能力，可以让 应用覆盖更多的交互场景和设备类型，从而带来新的增长点。 与面临的机遇相比，适配鸿蒙系统带来的挑战同样巨大。当前手机端，尽管鸿蒙系统 仍然支持安卓 APK 安装及运行，但长期来看，华为势必会抛弃 AOSP，逐步发展出 自己的生态，这

力，啃厚重的书往往变成了一项艰巨的挑战。 如果你也面临类似的困扰，那么很幸运这本书“找”到了你。本书是我对这个问题给出的答案，即使不是最 优解，也至少是一次积极的尝试。本书虽然不足以让你直接拿到 Offer，但会引导你探索数据结构与算法的 “知识地图”，带你了解不同“地雷”的形状、大小和分布位置，让你掌握各种“排雷方法”。有了这些本领， 相信你可以更加自如地刷题和阅读文献，逐步构建起完整的知识体系。 我深深赞同费曼教授所言：“Knowledge PDF 内的展示效果受限，可访问 www.hello‑algo.com 网页版以获得更优的阅读体验。 推荐语 “一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读！” ——邓俊辉，清华大学计算机系教授 “如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！” ——李沐，亚马逊资深首席科学家 计算机的出现给世界带来了巨大变革 事实上，在计算机问世之前，算法和数据结构就已经存在于世界的各个角落。早期的算法相对简单，例如古 代的计数方法和工具制作步骤等。随着文明的进步，算法逐渐变得更加精细和复杂。从巧夺天工的匠人技艺、 到解放生产力的工业产品、再到宇宙运行的科学规律，几乎每一件平凡或令人惊叹的事物背后，都隐藏着精 妙的算法思想。 同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小

力，啃厚重的书往往变成了一项艰巨的挑战。 如果你也面临类似的困扰，那么很幸运这本书“找”到了你。本书是我对这个问题给出的答案，即使不是最 优解，也至少是一次积极的尝试。本书虽然不足以让你直接拿到 Offer，但会引导你探索数据结构与算法的 “知识地图”，带你了解不同“地雷”的形状、大小和分布位置，让你掌握各种“排雷方法”。有了这些本领， 相信你可以更加自如地刷题和阅读文献，逐步构建起完整的知识体系。 我深深赞同费曼教授所言：“Knowledge 动画在 PDF 内的展示效果受限，可访问 hello‑algo.com 网页版以获得更优的阅读体验。 推荐语 “一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读！” ——邓俊辉，清华大学计算机系教授 “如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！” ——李沐，亚马逊资深首席科学家 计算机的出现给世界带来了巨大变革 事实上，在计算机问世之前，算法和数据结构就已经存在于世界的各个角落。早期的算法相对简单，例如古 代的计数方法和工具制作步骤等。随着文明的进步，算法逐渐变得更加精细和复杂。从巧夺天工的匠人技艺、 到解放生产力的工业产品、再到宇宙运行的科学规律，几乎每一件平凡或令人惊叹的事物背后，都隐藏着精 妙的算法思想。 同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小

力，啃厚重的书往往变成了一项艰巨的挑战。 如果你也面临类似的困扰，那么很幸运这本书“找”到了你。本书是我对这个问题给出的答案，即使不是最 优解，也至少是一次积极的尝试。本书虽然不足以让你直接拿到 Offer，但会引导你探索数据结构与算法的 “知识地图”，带你了解不同“地雷”的形状、大小和分布位置，让你掌握各种“排雷方法”。有了这些本领， 相信你可以更加自如地刷题和阅读文献，逐步构建起完整的知识体系。 我深深赞同费曼教授所言：“Knowledge 仓库。动画在 PDF 内的 展示效果受限，可访问 hello‑algo.com 网页版以获得更优的阅读体验。 推荐语 “一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读！” ——邓俊辉，清华大学计算机系教授 “如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！” ——李沐，亚马逊资深首席科学家 i 目 录 第 0 章 前言 . . . . . . . . . . . . . . . . . 49 第 3 章 数据结构 51 3.1 数据结构分类 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 3.2 基本数据类型 . . . . . . . . . . . . . . . . . . . . . . .

精力，厚重的书籍往往变成了一项艰巨的挑战。 如果你也面临类似的困扰，那么很幸运这本书找到了你。本书是我对此问题的给出的答案，即使不是最优解， 也至少是一次积极的尝试。这本书虽然不足以让你直接拿到 Offer ，但会引导你探索数据结构与算法的“知 识地图”，带你了解不同“地雷”的形状大小和分布位置，让你掌握各种“排雷方法”。有了这些本领，相信 你可以更加自如地应对刷题和阅读文献，逐步构建起完整的知识体系。 本书中的代码附有可一键运行的源文件，托管于 仓库。动画在 PDF 内的 展示效果受限，可访问 hello‑algo.com 网页版以获得更优的阅读体验。 推荐语 “一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读。” ——邓俊辉，清华大学计算机系教授 “如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！” ——李沐，亚马逊资深首席科学家 致谢 本书在开源社区众多贡献者 . . . . . . . . . . . . . . . . . 46 第 3 章 数据结构 48 3.1 数据结构分类 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 3.2 基本数据类型 . . . . . . . . . . . . . . . . . . . . . . .

重的书本也因此成为巨大的挑战。 如果你也有上述烦恼，那么很幸运这本书找到了你。本书是我对于该问题给出的答案，虽然不一定正确，但至 少代表一次积极的尝试。这本书虽然不足以让你直接拿到 Offer ，但会引导你探索数据结构与算法的“知识地 图”，带你了解不同“地雷”的形状大小和分布位置，让你掌握各种“排雷方法”。有了这些本领，相信你可以 更加得心应手地刷题与阅读文献，逐步搭建起完整的知识体系。 书内的代码配有可一键运行的源文件，托管在 justin‑tse, krahets, nuomi1, Reanon, sjinzh 完成，感谢他们的辛勤付出！ 推荐语 “一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读。” ——邓俊辉，清华大学计算机系教授 “如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！” ——李沐，亚马逊资深首席科学家 i 目 录 0. 写在前面 1 . . . . . . . . . . . . . . . . . 35 3. 数据结构简介 37 3.1. 数据与内存 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 3.2. 数据结构分类 . . . . . . . . . . . . . . . . . . . . .

目 录 致谢 介绍 前言 入门篇 导论 历史 基本语法 数据类型 概述 null，undefined 和布尔值 数值 字符串 对象 函数 数组 运算符 算术运算符 比较运算符 布尔运算符 二进制位运算符 其他运算符，运算顺序 语法专题 数据类型的转换 错误处理机制 编程风格 console 对象与控制台 标准库 Object 对象 属性描述对象 广泛的使用领域 易学性 强大的性能 开放性 社区支持和就业机会 实验环境 JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”（script language），指的是它不具备开发操作系统的能力，而是只用来编写 控制其他大型应用程序（比如浏览器）的“脚本”。 JavaScript 也是一种嵌入式（embedded）语言。它本身提供的核 心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 任何一个问题，JavaScript 都有多种解决方法。阅读本书的过程 中，你会诧异于 JavaScript 语法的灵活性。 JavaScript 的核心语法部分相当精简，只包括两个部分：基本的语 法构造（比如操作符、控制结构、语句）和标准库（就是一系列具有各 种功能的对象比如 Array 、 Date 、 Math 等）。除此之外，各种宿 主环境提供额外的 API（即只能在该环境使用的接口），以便 JavaScript

目 录 致谢 JavaScript教程 1 JavaScript简介 2 快速入门 2.1 基本语法 2.2 数据类型和变量 2.3 字符串 2.4 数组 2.5 对象 2.6 条件判断 2.7 循环 2.8 Map和Set 2.9 iterable 3 函数 3.1 函数定义和调用 3.2 变量作用域 3.3 方法 3.4 高阶函数 3.4.1 map/reduce 5 AJAX 6.6 Promise 6.7 Canvas 7 jQuery 7.1 选择器 7.1.1 层级选择器 7.1.2 查找和过滤 7.2 操作DOM 7.2.1 修改DOM结构 7.3 事件 7.4 动画 7.5 扩展 8 underscore 8.1 Collections 8.2 Arrays 8.3 Functions 8.4 Objects 8.5 是JavaScript语法要求必须的，但缩 进有助于我们理解代码的层次，所以编写代码时要遵守缩进规则。很多文本编辑器具有“自动缩进”的功 能，可以帮助整理代码。 {…} 还可以嵌套，形成层级结构： 基本语法 语法 2.1 基本语法 - 13 - 本文档使用 书栈(BookStack.CN) 构建 1. if (2 > 1) { 2. x = 1; 3. y =

团队里的前端 全能型人才/全栈神话 前端面试 前端开发职位公示 前端开发薪资 前端开发者是如何诞生的 第二部分：学习前端开发 自学 关于互联网／WEB 学习 Web 浏览器 学习域名系统（又叫 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习数据（例如，JSON）API 的设计 学习 React & Redux 学习渐进式 Web 应用 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 团队里的前端 全能型人才/全栈神话 前端面试 前端开发职位公示 前端开发薪资 前端开发者是如何诞生的 第二部分：学习前端开发 自学 关于互联网／WEB 学习 Web 浏览器 学习域名系统（又叫 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS

ECMAScript 6简介 let 和 const 命令 变量的解构赋值 字符串的扩展 正则的扩展 数值的扩展 函数的扩展 数组的扩展 对象的扩展 Symbol Set 和 Map 数据结构 Proxy Reflect Promise 对象 Iterator 和 for...of 循环 Generator 函数的语法 Generator 函数的异步应用 async 函数 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址 不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向 的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数 组），变量指向的内存地址，保存的只是一个指针， const 只能保证这个指针是 固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个 对象声明为常量必须非常小心。 const [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4 上面两个例子，都属于不完全解构，但是可以成功。 如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一 章），那么将会报错。 // 报错 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] =