—— 内核与引擎 主讲人与课程设计：耕耕 浏览器内核 主流浏览器内核 JavaScript 引擎 主流浏览器JavaScript 引擎 浏览器内核与JavaScript 引擎关系 最初内核的概念包括渲染引擎与JS引擎，目前习惯直接称渲染引擎为内核，JS引擎独立。 浏览器内核 渲染引擎 JavaScript引擎 最初状态 浏览器内核 渲染引擎 JavaScript引擎 目前状态 JavaScript引擎独立了 渲染引擎与JavaScript 引擎 渲染引擎：Rendering Engine，一般习惯将之称为“浏览器内核”，主要功能是解析HTML/CSS进 行渲染页面，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 JavaScript 引擎：专门处理JavaScript脚本的虚拟机、解释器，用来解释执行js代码。在早期内 核也是包含js引擎的，而现在js引擎越来独立了，可以把它单独提出来。 了，可以把它单独提出来。 总结：渲染引擎（浏览器内核）处理html/css，JavaScript引擎处理JavaScript代码，有js引擎的 地方就能解析js代码 浏览器 渲染引擎（内核） 解析html/css JavaScript引擎 解析JavaScript代码 JavaScript和java什么关系 JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时

学习 Web 浏览器 学习域名系统（又叫 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 2 1.6.1.14 应用 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 学习 Web 浏览器 学习域名系统（又叫 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 学习可访问性相关知识 学习

美团外卖终端容器无关化研发框架 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 融合技术的应用与实践 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 自动化埋点探索 447 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React Native 组件库 beeshell 2.0 发布 473 React Native 在美团外卖客户端的实践 506 Android 静态代码扫描效率优化与实践 530 Probe：Android

上网体验、各种基于浏览器的便捷功能、前后端之间紧密高效的联系， JavaScript 是必不可少的工具。 近年来，JavaScript 的使用范围，慢慢超越了浏览器，正在向通用 的系统语言发展。 （1）浏览器的平台化 随着 HTML5 的出现，浏览器本身的功能越来越强，不再仅仅能浏览网 页，而是越来越像一个平台，JavaScript 因此得以调用许多系统功 为什么学习 JavaScript？ 操控浏览器的能力 语言本身，虽然是一种解释型语言，但是在现代浏览器 中，JavaScript 都是编译后运行。程序会被高度优化，运行效率接 近二进制程序。而且，JavaScript 引擎正在快速发展，性能将越来 越好。 此外，还有一种 WebAssembly 格式，它是 JavaScript 引擎的中 间码格式，全部都是二进制代码。由于跳过了编译步骤，可以达到接近 强大的性能 导论 - 15 - 本文档使用 书栈(BookStack 可以承受很大的访问量。 JavaScript 是一种开放的语言。它的标准 ECMA-262 是 ISO 国 际标准，写得非常详尽明确；该标准的主要实现（比如 V8 和 SpiderMonkey 引擎）都是开放的，而且质量很高。这保证了这门语 言不属于任何公司或个人，不存在版权和专利的问题。 语言标准由 TC39 委员会负责制定，该委员会的运作是透明的，所有 讨论都是开放的，会议记录都会对外公布。

，每个语句以 ; 结束，语句块用 {…} 。但是，JavaScript 并不强制要求在每个语句的结尾加 ; ，浏览器中负责执行JavaScript代码的引擎会自动在每个语句 的结尾补上 ; 。 注意：让JavaScript引擎自动加分号在某些情况下会改变程序的语义，导致运行结果与期望不一致。 在本教程中，我们不会省略 ; ，所有语句都会添加 ; 。 例如，下面的一行代码就是一个完整的赋值语句： 会大大增加看懂代码的难度。遇到这种 情况，需要把部分代码抽出来，作为函数来调用，这样可以减少代码的复杂度。 以 // 开头直到行末的字符被视为行注释，注释是给开发人员看到，JavaScript引擎会自动忽略： 1. // 这是一行注释 2. alert('hello'); // 这也是注释 另一种块注释是用 /…/ 把多行字符包裹起来，把一大“块”视为一个注释： 1. /* 从这里开始是块注释 = 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

. . . . . . . . . . . . . . . . . . . . 34 3.5.3. 驼峰化 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 3.5.4. 中划线化 . . . . . . . . . . . . . . . . . . . . . . . . . . . 小心脏肯定会砰砰的。 本书制作用到的工具 本书采用 Asciidoc 格式编写。 使用 Asciidoctor 构建本书电子版。 教程: • 语法教程 • 转换PDF教程 书中用的可视化图片是由 Regulex 正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 | 第 1 页 意见和疑问 如果有意见或者问题的话，可以直接通过以下方式联系到我。 这三者中任意一个字符，该怎么做呢？ 不能写成 [a-z]，因为其表示小写字符中的任何一个字符。 可以写成如下的方式：[-az] 或 [az-] 或 [a\-z]。 即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。 1.2.2. 排除字符组 纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是 "a"、"b"、"c"。 此时就是排除字符组（反义字符组）的概念。例如 [^abc]，表示是一个除

. . . . . . . . . . . . . . . . . . . . 34 3.5.3. 驼峰化 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 3.5.4. 中划线化 . . . . . . . . . . . . . . . . . . . . . . . . . . . 己的小心脏肯定会砰砰的。 本书制作用到的工具 本书采用Asciidoc格式编写。 使用 Asciidoctor 构建本书电子版。 教程: • 语法教程 • 转换PDF教程 书中用的可视化图片是由 Regulex 正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 | 第 1 页 意见和疑问 如果有意见或者问题的话，可以直接通过以下方式联系到我。 这三者中任意一个字符，该怎么做呢？ 不能写成 [a-z]，因为其表示小写字符中的任何一个字符。 可以写成如下的方式：[-az] 或 [az-] 或 [a\-z]。 即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。 1.2.2. 排除字符组 纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是 "a"、"b"、"c"。 此时就是排除字符组（反义字符组）的概念。例如 [^abc]，表示是一个除

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

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