1.13 目录 Introduction 前端开发者是什么？ 2016 前端开发回顾 展望 2017 第一部分. 前端实践 前端职称 前端开发者所使用的技术 前端开发技能 前端开发者为 ... 而开发 团队里的前端 全能型人才/全栈神话 前端面试 前端开发职位公示 前端开发薪资 前端开发者是如何诞生的 第二部分：学习前端开发 自学 关于互联网／WEB 学习 Web Web 浏览器 学习域名系统（又叫 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 2 1.6.1.14 1 学习静态网页生成器 通过JS学习计算机科学 学习前端应用架构 学习数据（例如，JSON）API 的设计 学习 React & Redux 学习渐进式 Web 应用 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器

2019-2021美团技术年货 CODE A BETTER LIFE 【前端篇】 前端 | 2021 1 让 Flutter 在鸿蒙系统上跑起来 1 FlutterWeb 在美团外卖的实践 14 FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 端的实现 255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 自动化埋点探索 447 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React Native 组件库 beeshell 2.0 发布 473 React Native

上网体验、各种基于浏览器的便捷功能、前后端之间紧密高效的联系， JavaScript 是必不可少的工具。 近年来，JavaScript 的使用范围，慢慢超越了浏览器，正在向通用 的系统语言发展。 （1）浏览器的平台化 随着 HTML5 的出现，浏览器本身的功能越来越强，不再仅仅能浏览网 页，而是越来越像一个平台，JavaScript 因此得以调用许多系统功 为什么学习 JavaScript？ 操控浏览器的能力 Objective-C 或 Swift 语 言开发。许多人正在努力，让 JavaScript 成为各个平台的通用开发 语言。 PhoneGap 项目就是将 JavaScript 和 HTML5 打包在一个容器之 中，使得它能同时在 iOS 和安卓上运行。Facebook 公司的 React Native 项目则是将 JavaScript 写的组件，编译成原生组件，从 而使它们具备优秀的性能。 Mozilla ECMAScript 的关系 历史 - 21 - 本文档使用 书栈(BookStack.CN) 构建 的局面。 1996年11月，Netscape 公司决定将 JavaScript 提交给国际标准 化组织 ECMA（European Computer Manufacturers Association），希望 JavaScript 能够成为国际标准，以此抵抗 微软。ECMA 的39号技术委员会（Technical

. . . . . . . . . . . . . . . . . . . . 34 3.5.3. 驼峰化 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 3.5.4. 中划线化 . . . . . . . . . . . . . . . . . . . . . . . . . . . 构建本书电子版。 教程: • 语法教程 • 转换PDF教程 书中用的可视化图片是由 Regulex 正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 | 第 1 页 意见和疑问 如果有意见或者问题的话，可以直接通过以下方式联系到我。 • 前端网 • 知乎 • 掘金 • qdlaoyao@126.com 确保你现在看的迷你书是最新版本，请点击这里： 变得清晰且有迹可循！ — Jack Lo 老姚编写的JavaScript正则表达式系列文章通俗易通，虽然示例以JavaScript编写，但是对于正则表 达式的学习通用于其他语言。所以，不论您是前端还是后端工程师，通过阅读此迷你书都能获益。最 后，感谢老姚能够写出这一系列文章，让大家能够更轻松的理解和使用正则表达式。 — 程序猿DD 正则表达式是通用的技能，基础的东西永远绕不开。能在实战中进行总结，并形成专题，更是一种值

. . . . . . . . . . . . . . . . . . . . 34 3.5.3. 驼峰化 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 3.5.4. 中划线化 . . . . . . . . . . . . . . . . . . . . . . . . . . . 构建本书电子版。 教程: • 语法教程 • 转换PDF教程 书中用的可视化图片是由 Regulex 正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 | 第 1 页 意见和疑问 如果有意见或者问题的话，可以直接通过以下方式联系到我。 • 前端网 • 知乎 • 掘金 • qdlaoyao@126.com 后续版本更新，会在这里更新： 变得清晰且有迹可循！ — Jack Lo 老姚编写的JavaScript正则表达式系列文章通俗易通，虽然示例以JavaScript编写，但是对于正则表 达式的学习通用于其他语言。所以，不论您是前端还是后端工程师，通过阅读此迷你书都能获益。最 后，感谢老姚能够写出这一系列文章，让大家能够更轻松的理解和使用正则表达式。 — 程序猿DD 正则表达式是通用的技能，基础的东西永远绕不开。能在实战中进行总结，并形成专题，更是一种值

= 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.

愿这本书在你的脑海中轻轻响起，留下独特而深刻的旋律。 第 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 在提问讨论中共同成长

标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 要通过动画以图解形式展示，而文字则作为解释与补充。 如果你在阅读本书时，发现某段内容提供了如图 0‑2 所示的动画图解，请以图为主、以文字为辅，综合两者 代码块与对应的源代码文件 除了本地运行代码，网页版还支持 Python 代码的可视化运行（基于 pythontutor 实现）。如图 0‑6 所示，你 可以点击代码块下方的“可视化运行”来展开视图，观察算法代码的执行过程；也可以点击“全屏观看”，以 获得更好的阅览体验。 图 0‑6 Python 代码的可视化运行 第 0 章 前言 www.hello‑algo.com 8 0.2.4 在提问讨论中共同成长 图相较于链表，提供了更丰富的逻辑信息，但需要占用更大的内存空间。 1.2.3 数据结构与算法的关系 如图 1‑4 所示，数据结构与算法高度相关、紧密结合，具体表现在以下三个方面。 ‧ 数据结构是算法的基石。数据结构为算法提供了结构化存储的数据，以及操作数据的方法。 ‧ 算法为数据结构注入生命力。数据结构本身仅存储数据信息，结合算法才能解决特定问题。 ‧ 算法通常可以基于不同的数据结构实现，但执行效率可能相差很大，选择合适的数据结构是关键。

愿这本书在你的脑海中轻轻响起，留下独特而深刻的旋律。 第 0 章 前言 hello‑algo.com 2 0.1 关于本书 本项目旨在创建一本开源免费、新手友好的数据结构与算法入门教程。 ‧ 全书采用动画图解，结构化地讲解数据结构与算法知识，内容清晰易懂、学习曲线平滑。 ‧ 算法源代码皆可一键运行，支持 Java、C++、Python、Go、JS、TS、C#、Swift、Rust、Dart、Zig 等 语言。 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 要通过动画和图解形式展示，而文字则作为动画和图片的解释与补充。 如果你在阅读本书时，发现某段内容提供了图 0‑2 所示的动画或图解，请以图为主、以文字为辅，综合两者 图相较于链表，提供了更丰富的逻辑信息，但需要占用更大的内存空间。 1.2.3 数据结构与算法的关系 如图 1‑4 所示，数据结构与算法高度相关、紧密结合，具体表现以下三个方面。 ‧ 数据结构是算法的基石。数据结构为算法提供了结构化存储的数据，以及用于操作数据的方法。 ‧ 算法是数据结构发挥作用的舞台。数据结构本身仅存储数据信息，结合算法才能解决特定问题。 ‧ 算法通常可以基于不同的数据结构进行实现，并往往有对应最优的数据结构，但最终执行效率可能相