美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 端的实现 255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 352 积木 Sketch 插件进阶开发指南 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 MTFlexbox 自动化埋点探索 447 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React Native 组件库 beeshell 2.0 发布 473 React Native 在美团外卖客户端的实践 506 Android 静态代码扫描效率优化与实践 530 Probe：Android 线上 OOM 问题定位组件 560 活动 Web

应用 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 JavaScript 工具 静态网页构建工具 无障碍访问工具 应用程序框架工具（台式机、手机、平板电脑等） 渐进式 Web 应用工具 脚手架工具 常规前端开发工具 模版／数据绑定工具 UI 组件 & 组件包 数据可视化工具（例如图表） 图形工具（例如 SVG、canvas、webGL） 动画工具 JSON 工具 占位符内容工具 测试工具 前端数据存储工具 (例如客户端的数据存储方案) 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 Introduction 8 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具

词法文法和正则表达式文法.....................................................................................15 5.1.3 数字化字符串文法............................................................................................... ....................................................................................55 10.1.3 变量实例化.................................................................................................... 目前的文档定义了该标准的第三版，这包含了强大的正则表达式，更优秀的字符串处理， 新的流程控制语句，try/catch 异常处理，更严密的出错定义，数字式输出格式以及一些次要变 更，为即将到来的国际化语言设施和语言未来发展的作提前准备。 关于这个语言的工作并没有结束。技术委员会正在致力于作出意义重大的优化，这包括脚 本在互联网上创建和使用的机制，以及与其它标准实 体（如万维网联盟(W3C)及无线应用协议

上网体验、各种基于浏览器的便捷功能、前后端之间紧密高效的联系， JavaScript 是必不可少的工具。 近年来，JavaScript 的使用范围，慢慢超越了浏览器，正在向通用 的系统语言发展。 （1）浏览器的平台化 随着 HTML5 的出现，浏览器本身的功能越来越强，不再仅仅能浏览网 页，而是越来越像一个平台，JavaScript 因此得以调用许多系统功 为什么学习 JavaScript？ 操控浏览器的能力 JavaScript 和 HTML5 打包在一个容器之 中，使得它能同时在 iOS 和安卓上运行。Facebook 公司的 React Native 项目则是将 JavaScript 写的组件，编译成原生组件，从 而使它们具备优秀的性能。 Mozilla 基金会的手机操作系统 Firefox OS，更是直接将 JavaScript 作为操作系统的平台语言，但是很可惜这个项目没有成 导论 的入门会非常容易。 必须说明的是，虽然核心语法不难，但是 JavaScript 的复杂性体现 在另外两个方面。 首先，它涉及大量的外部 API。JavaScript 要发挥作用，必须与其 他组件配合，这些外部组件五花八门，数量极其庞大，几乎涉及网络应 用的各个方面，掌握它们绝非易事。 其次，JavaScript 语言有一些设计缺陷。某些地方相当不合理，另 一些地方则会出现怪异的运行结果。学习 JavaScript，很大一部分

= new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); 2. m.get('Michael'); // 95 初始化 Map 需要一个二维数组，或者直接初始化一个空 Map 。 Map 具有以下方法： Map和Set Map 2.8 Map和Set - 42 - 本文档使用 书栈(BookStack.CN) 构建 1. var 如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在 JavaScript中直接使用这个对象了。 让我们先把小明这个对象序列化成JSON格式的字符串： JSON 序列化 4.3 JSON - 107 - 本文档使用 书栈(BookStack.CN) 构建 1. var xiaoming = { 2. name: '小明', 3. age: 14 "JAVA", 11. "PYTHON", 12. "LISP" 13. ] 14. } 如果我们还想要精确控制如何序列化小明，可以给 xiaoming 定义一个 toJSON() 的方法，直接返 回JSON应该序列化的数据： 4.3 JSON - 109 - 本文档使用 书栈(BookStack.CN) 构建 1. var xiaoming = { 2.

本章将主要对JavaScript中的Promise进行入门级的介绍。 什么是Promise 首先让我们来了解一下到底什么是Promise。 Promise是抽象异步处理对象以及对其进行各种操作的组件。 其详细内容在接下来我们 还会进行介绍，Promise并不是从JavaScript中发祥的概念。 Promise最初被提出是在 E语言12中， 它是基于并列/并行处理设计的一种编程语言。 现在 像上面这样基于回调函数的异步处理如果统一参数使用规则的话，写法也会很明了。 但是，这也仅是编码规约而已，即使采用不同的写法也不会出错。 而Promise则是把类似的异步处理对象和处理规则进行规范化， 并按照采用统一的接口 来编写，而采取规定方法之外的写法都会出错。 下面是使用了Promise进行异步处理的一个例子 ---- var promise = getAsyncPromise("fileA // 获取文件内容成功时的处理 }).catch(function(error){ // 获取文件内容失败时的处理 }); ---- <1> 返回promise对象 我们可以向这个预设了抽象化异步处理的promise对象， 注册这个promise对象执行成功 时和失败时相应的回调函数。 这和回调函数方式相比有哪些不同之处呢？ 在使用promise进行一步处理的时候，我们 必须按照接口规定的方法编写处理代码。

和 JavaScript 到底是什么关系？ 要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语言能够成为国 际标准。次年，ECMA 发布262号标准文件（ECMA-262）的第一版，规定了浏览 器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1 其实都是一个新的变量，所以最后输出的是 6 。你可能会问，如果每一 轮循环的变量 i 都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本 轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的 变量 i 时，就在上一轮循环的基础上进行计算。 另外， for 循环还有一个特别之处，就是设置循环变量的那部分是一个父作用 域，而循环体内部是一个单独的子作用域。 let 和 const Assignment to constant variable. 上面代码表明改变常量的值会报错。 const 声明的变量不得改变值，这意味着， const 一旦声明变量，就必须立即 初始化，不能留到以后赋值。 let 和 const 命令 38 const foo; // SyntaxError: Missing initializer in const declaration

——鄧俊輝，清華大學計算機系教授 “如果我當年學資料結構與演算法時有《Hello 演算法》，學起來應該會簡單 10 倍！” ——李沐，亞馬遜資深首席科學家 電腦的出現為世界帶來了巨大的變革，它憑藉高速的運算能力與卓越的可程式化特性，成為執行演算法 與處理資料的理想媒介。無論是電玩遊戲的逼真畫面、自動駕駛的智慧決策，還是 AlphaGo 的精彩棋局、 ChatGPT 的自然互動，這些應用都是演算法在電腦上的精妙演繹。 10.3 二分搜尋邊界 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 10.4 雜湊最佳化策略 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 10.5 重識搜尋演算法 . . . . 標題註釋，用於標註函式、類別、測試樣例等 */ // 內容註釋，用於詳解程式碼 /** * 多行 * 註釋 */ 0.2.2 在動畫圖解中高效學習 相較於文字，影片和圖片具有更高的資訊密度和結構化程度，更易於理解。在本書中，重點和難點知識將主 要透過動畫以圖解形式展示，而文字則作為解釋與補充。 如果你在閱讀本書時，發現某段內容提供瞭如圖 0‑2 所示的動畫圖解，請以圖為主、以文字為輔，綜合兩者

愿这本书在你的脑海中轻轻响起，留下独特而深刻的旋律。 第 0 章 前言 hello‑algo.com 2 0.1 关于本书 本项目旨在创建一本开源、免费、对新手友好的数据结构与算法入门教程。 ‧ 全书采用动画图解，结构化地讲解数据结构与算法知识，内容清晰易懂，学习曲线平滑。 ‧ 算法源代码皆可一键运行，支持 Python、C++、Java、C#、Go、Swift、JavaScript、TypeScript、Dart、 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 要通过动画以图解形式展示，而文字则作为解释与补充。 如果你在阅读本书时，发现某段内容提供了如图 0‑2 所示的动画图解，请以图为主、以文字为辅，综合两者 代码块与对应的源代码文件 除了本地运行代码，网页版还支持 Python 代码的可视化运行（基于 pythontutor 实现）。如图 0‑6 所示，你 可以点击代码块下方的“可视化运行”来展开视图，观察算法代码的执行过程；也可以点击“全屏观看”，以 获得更好的阅览体验。 图 0‑6 Python 代码的可视化运行 第 0 章 前言 hello‑algo.com 8 0.2.4 在提问讨论中共同成长

愿这本书在你的脑海中轻轻响起，留下独特而深刻的旋律。 第 0 章 前言 hello‑algo.com 2 0.1 关于本书 本项目旨在创建一本开源、免费、对新手友好的数据结构与算法入门教程。 ‧ 全书采用动画图解，结构化地讲解数据结构与算法知识，内容清晰易懂，学习曲线平滑。 ‧ 算法源代码皆可一键运行，支持 Python、C++、Java、C#、Go、Swift、JavaScript、TypeScript、Dart、 内容注释，用于详解代码 /** * 多行 第 0 章 前言 hello‑algo.com 5 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 要通过动画以图解形式展示，而文字则作为解释与补充。 如果你在阅读本书时，发现某段内容提供了如图 0‑2 所示的动画图解，请以图为主、以文字为辅，综合两者 代码块与对应的源代码文件 除了本地运行代码，网页版还支持 Python 代码的可视化运行（基于 pythontutor 实现）。如图 0‑6 所示，你 可以点击代码块下方的“可视化运行”来展开视图，观察算法代码的执行过程；也可以点击“全屏观看”，以 获得更好的阅览体验。 图 0‑6 Python 代码的可视化运行 第 0 章 前言 hello‑algo.com 8 0.2.4 在提问讨论中共同成长