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.6 JSON (JavaScript 对象表示法) 学习 JS 模板 学习静态网页生成器 通过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 工程编译速度提升 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 Web 端的实现 255 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 352 积木 积木 Sketch 插件进阶开发指南 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 自动化埋点探索 447 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React Native 组件库 beeshell 2.0

1.概述 Web 开发技术-JavaScript VCG JavaScript 2020/4/28 2 内容提要 1 JavaScript 简史 2 JavaScript 功能、脚本语言 3 JavaScript 实现 ECMAScript DOM BOM 4 在 HTML 中使用 JavaScript 直接嵌入 外部引入 JS 代码压缩 2 VCG 2020/4/28 4 1. JavaScript 简史 发展过程 1995：LiveScript/JavaScript 始于网景 网景通信公司（Netscape）开发 LiveScript 1.0，与 Sun 公司组成开发联盟。由于 Java 正流行，LiveScript 发布前临时改名 JavaScript. 1996：Microsoft 采用 在 Internet Explorer 号技术委员会（TC39）负责“标准化一种通用、跨平台、 供应商中立的脚本语言的语法和语义”。 定义一种名为 ECMAScript 的新脚本语言标准。 1998：ISO/IEC 采用 ECMAScript 作为标准 浏览器开发商开始致力于将 ECMAScript 作为各自 JavaScript 实现基础。 JavaScript 简史 4 VCG JavaScript 2020/4/28 5 2. JavaScript

安装Node.js和npm 9.2 第一个Node程序 9.3 模块 9.4 基本模块 9.4.1 fs 9.4.2 stream 9.4.3 http 9.4.4 buffer 9.5 Web开发 9.5.1 koa 9.5.2 mysql 9.5.3 swig 9.6 自动化工具 10 期末总结 - 3 - 本文档使用 书栈(BookStack.CN) 构建 致谢 当前文档 移动应用的兴起，没有人用Flash开发手机 App，所以它目前已经边缘化了。相反，随着HTML5在PC和移动端越来越流行，JavaScript变得更加 重要了。并且，新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选 手。 JavaScript一度被认为是一种玩具编程语言，它有很多缺陷，所以不被大多数后端开发人员所重视。 很多人认为，写Ja 简单，并且JavaScript只是为了在网页上添加一点交互和动画效 果。 但这是完全错误的理解。JavaScript确实很容易上手，但其精髓却不为大多数开发人员所熟知。编写 高质量的JavaScript代码更是难上加难。 一个合格的开发人员应该精通JavaScript和其他编程语言。如果你已经掌握了其他编程语言，或者你 还什么都不会，请立刻开始学习JavaScript，不要被Web时代所淘汰。

正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 | 第 1 页 意见和疑问 如果有意见或者问题的话，可以直接通过以下方式联系到我。 • 前端网 • 知乎 • 掘金 • qdlaoyao@126.com 确保你现在看的迷你书是最新版本，请点击这里： • 《JavaScript 正则表达式迷你书》 感谢 由于本书是由个人文章修改而成，感谢各平台读者的支持。 这两句话可谓是醍醐灌顶，通过数字的千位分隔符这个例子把之前一直搞不清楚的先行断言彻底搞懂 了。真是佩服老姚的理解和讲解能力。相信我，通读迷你小书，可以让你真正理解正则并在工作中不 怕读，不怕写正则。让正则成为你开发中的一把利器。 — 小鱼二 JavaScript 正则表达式迷你书 前言 | 第 2 页 这是一本由浅入深且环环相扣的正则书籍，花了两天的碎片时间（8h）看完了，得益于老姚程序员的 逻辑性 变得清晰且有迹可循！ — Jack Lo 老姚编写的JavaScript正则表达式系列文章通俗易通，虽然示例以JavaScript编写，但是对于正则表 达式的学习通用于其他语言。所以，不论您是前端还是后端工程师，通过阅读此迷你书都能获益。最 后，感谢老姚能够写出这一系列文章，让大家能够更轻松的理解和使用正则表达式。 — 程序猿DD 正则表达式是通用的技能，基础的东西永远绕不开。能在实战中进行总结，并形成专题，更是一种值

正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 | 第 1 页 意见和疑问 如果有意见或者问题的话，可以直接通过以下方式联系到我。 • 前端网 • 知乎 • 掘金 • qdlaoyao@126.com 后续版本更新，会在这里更新： 《JavaScript 正则表达式迷你书》 感谢 由于本书是由个人文章修改而成，感谢各平台读者的支持。 这两句话可谓是醍醐灌顶，通过数字的千位分隔符这个例子把之前一直搞不清楚的先行断言彻底搞懂 了。真是佩服老姚的理解和讲解能力。相信我，通读迷你小书，可以让你真正理解正则并在工作中不 怕读，不怕写正则。让正则成为你开发中的一把利器。 — 小鱼二 JavaScript 正则表达式迷你书 前言 | 第 2 页 这是一本由浅入深且环环相扣的正则书籍，花了两天的碎片时间（8h）看完了，得益于老姚程序员的 逻辑性 变得清晰且有迹可循！ — Jack Lo 老姚编写的JavaScript正则表达式系列文章通俗易通，虽然示例以JavaScript编写，但是对于正则表 达式的学习通用于其他语言。所以，不论您是前端还是后端工程师，通过阅读此迷你书都能获益。最 后，感谢老姚能够写出这一系列文章，让大家能够更轻松的理解和使用正则表达式。 — 程序猿DD 正则表达式是通用的技能，基础的东西永远绕不开。能在实战中进行总结，并形成专题，更是一种值

广泛的使用领域 易学性 强大的性能 开放性 社区支持和就业机会 实验环境 JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”（script language），指的是它不具备开发操作系统的能力，而是只用来编写 控制其他大型应用程序（比如浏览器）的“脚本”。 JavaScript 也是一种嵌入式（embedded）语言。它本身提供的核 心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 如果宿主环境是服务器，则会提供各种操作系统的 API，比如文件操 作 API、网络通信 API等等。这些你都可以在 Node 环境中找到。 本书主要介绍 JavaScript 核心语法和浏览器网页开发的基本知识， 不涉及 Node。全书可以分成以下四大部分。 基本语法 标准库 浏览器 API DOM JavaScript 语言有多个版本。本书的内容主要基于 ECMAScript 5 6入门》。 JavaScript 语言有一些显著特点，使得它非常值得学习。它既适合 作为学习编程的入门语言，也适合当作日常开发的工作语言。它是目前 最有希望、前途最光明的计算机语言之一。 JavaScript 的发明目的，就是作为浏览器的内置脚本语言，为网页 开发者提供操控浏览器的能力。它是目前唯一一种通用的浏览器脚本语 言，所有浏览器都支持。它可以让网页呈现各种特殊效果，为用户提供

语法的称谓。 2.1 ECMAScript 基础 在第 1 章中，我们了解到 JavaScript 语言与 Java 语言的历史渊源，其实 JavaScript 起初就 是模仿 Java 而开发出来的。如果读者熟悉 Java 语言，就会发现 ECMAScript 语法很容易掌握， 因其主要就是借用了 Java 语言的语法。当然，JavaScript 与 Java 毕竟是两种功能作用不同的编 规范中，虽然允许可以不通过“var”关键字来声明变量，但这一点终归 是不被大多数严谨的设计人员所接受的。不仅仅是因为这类代码的可读性与可维护性比较差， 最主要的是因为如果不通过“var”关键字来声明变量，在大型 Web 开发项目中会出现很多意 想不到的错误，大大增加调试纠错的难度。 因此，在 ECMAScript 5 规范之后，增加了一个严格模式“use strict”字面量用来强制设 27 第 2 章 符串。不 过，还是建议使用 toString()方法进行转换字符串的操作，除非必须使用【代码 2-35】中大多 数情况下第 02 行同样的代码。 对于本小节介绍的强制类型转换方法，在实际项目开发中是非常有用的；因为我们知道 ECMAScript 是弱类型的编程语言，在很多情况下都需要对变量进行强制类型转换操作，希望 读者加以重视。 2.5 ECMAScript 6 新特新——let、const

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015 年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应 用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ 要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript Eich为首的Mozilla公司，则坚持当前的草案。 2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激 烈，ECMA 开会决定，中止 ECMAScript 4.0 的开发，将其中涉及现有功能改善的 一小部分，发布为 ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版 本，由于会议的气氛，该版本的项目代号起名为 Harmony（和谐）。会后不久， 就改名为 ECMAScript 5。 2009年12月，ECMAScript 5.0 版正式发布。Harmony 项目则一分为二，一些较为 可行的设想定名为 JavaScript.next 继续开发，后来演变成 ECMAScript 6；一些不 是很成熟的设想，则被视为 JavaScript.next.next，在更远的将来再考虑推出。 ECMAScript 6简介 9 TC39 委员会的总体考虑是，ES5

能。 Promise扩展类库数量非常的多，我们只介绍其中两个比较有名的类库。 kriskowal/q47 类库 Q 实现了 Promises 和 Deferreds 等规范。 它自2009年开始开发，还提供了面 向Node.js的文件IO API Q-IO48 等， 是一个在很多场景下都能用得到的类库。 petkaantonov/bluebird49 这个类库除了兼容 Promise 规范 reject 而 不是 throw 呢？ 首先是因为我们很难区分 throw 是我们主动抛出来的，还是因为真正的其它 异常 导 致的。 比如在使用Chrome浏览器的时候，Chrome的开发者工具提供了在程序发生异常的时候 自动在调试器中break的功能。 JavaScript Promise 迷你书（中文版） 69 Figure 13. Pause On Caught Exceptions log(error); } console.log('XHR Error :', error); }); 上面的代码就通过在一定的时间内变为解决状态的promise对象实现了超时处理。 通常进行开发的情况下，由于这些逻辑会频繁使用，因此将这些代 码分割保存在不同的文件应该是一个不错的选择。 promise和操作方法 在前面的 cancelableXHR 中，promise对象及其操作方法都是在一个对象中返回的，看