dart:ui（Web）的对齐，工程 化和性能相关的事项做的还比较少，例如： 前端 < 17 ● Flutter Web 构建产物较简陋，只是简单的输出 main.dart.js（1.1M，未 Gzip） 和 图片等静态资源，缺少 JS 拆包、文件 Hash、资源上传 CDN 等优 化工作，极大影响了页面的加载性能。 ● 由于 Flutter Web 自身实现了一套页面滚动机制，页面滚动过程中，会频繁计 ndation.dart’; if (kIsWeb) { print(‘Web 端’) } else { print(‘其他端’); } 文件级别分平台 针对文件级别分平台，我们利用条件导入导出，其中条件导出具体用法如下： // tool.dart export ‘src/tool_native.dart’ // 兜底导出，即没有命中条件时导出的文件 if (dart.library Web 端文件。 // 引入 tool.dart import ‘package:tool/tool.dart’; void main() { print(‘import tool’); } 条件导入和条件导出类似，仅需将 export 改为 import 即可。在业务开发中这也是一 种非常实用的分平台编程方法。 20 > 2021年美团技术年货 (2) Plugin Package Plugin

API允许JavaScript读取文件内容，获得更多的文件信息。 HTML5的File API提供了 File 和 FileReader 两个主要对象，可以获得文件信息并读取文件。 下面的例子演示了如何读取用户选取的图片文件，并在一个 <div> 中预览图像： 1. var 2. fileInput = document.getElementById('test-image-file'), 书栈(BookStack.CN) 构建 5. // 监听change事件: 6. fileInput.addEventListener('change', function () { 7. // 清除背景图片: 8. preview.style.backgroundImage = ''; 9. // 检查文件是否选择: 10. if (!fileInput.value) { 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') { 21. alert('不是有效的图片文件!'); 22. return; 23. } 24. // 读取文件: 25. var reader = new FileReader(); 26

上面代码中，Promise 新建后立即执行，所以首先输出的是 Promise 。然 后， then 方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所 以 resolved 最后输出。 下面是异步加载图片的例子。 function loadImageAsync(url) { return new Promise(function(resolve, reject) { var image image at ' + url)); }; image.src = url; }); } Promise 对象 338 上面代码中，使用 Promise 包装了一个图片加载的异步操作。如果加载成功，就 调用 resolve 方法，否则就调用 reject 方法。 下面是一个用 Promise 对象实现的 Ajax 操作的例子。 var getJSON = reason }) ); }; 上面代码中，不管前面的Promise是 fulfilled 还是 rejected ，都会执行回调 函数 callback 。 应用 加载图片 我们可以将图片的加载写成一个 Promise ，一旦加载完成， Promise 的状态就 发生变化。 Promise 对象 357 const preloadImage = function (path)

技术（例如 HTML、CSS、 DOM 和 JavaScript）来建造网站和开发应 用。他们使用 WEB 技术在 WEB 平台或非 WEB 框架（比如 NativeScript 框架）上设计程 序。 图片来源：https://www.upwork.com/hiring/development/front-end-developer/ 通常前端开发者通过学习 HTML、CSS 和 JS 来入门。HTML、CSS “全栈” 或 “Web 开发” ，招聘者可能是用这些词来描述负责整体 web/app 开发的职位，也就是同时负责前端（可能包含设计）和后端的职位。 前端职称 19 前端开发者所使用的技术 图片来源: http://www.2n2media.com/compare-front-end-development-and-back-end- development 前端开发者所使用的核心技术有如下这些（建议按顺序进行学习）： — 维基百科 可无障碍访问的富互联网应用 (WAI-ARIA) 现状 网络无障碍倡议 (WAI) 网络内容无障碍指南 (WCAG) 的现状 前端开发者所使用的技术 23 前端开发技能 图片来源：http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html 假设每个领域的前端开发者都使用基础的高级

容 注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.3. 在动画图解中高效学习 视频和图片相比于文字的信息密度和结构化程度更高，更容易理解。在本书中，知识重难点会主要以动画、图 解的形式呈现，而文字的作用则是作为动画和图的解释与补充。 阅读本书时，若发现某段内容提供了动画或图解，建议 (1) , ?(log ?) , ?(?) , ?(?2) , ?(2?) 。 37 3. 数据结构简介 3.1. 数据与内存 3.1.1. 基本数据类型 谈到计算机中的数据，我们能够想到文本、图片、视频、语音、3D 模型等等，这些数据虽然组织形式不同，但 都是由各种基本数据类型构成的。 「基本数据类型」是 CPU 可以直接进行运算的类型，在算法中直接被使用。 ‧「整数」根据不同的长度分为 pull request”按钮发起拉取请求即可。 12. 附录 hello‑algo.com 180 Figure 12‑1. 页面编辑按键 图片无法直接修改，需要通过新建 Issue 或评论留言来描述图片问题，我会第一时间重新画图并替换图片。 12.2.2. 内容创作 如果您想要参与本开源项目，包括翻译代码至其他编程语言、拓展文章内容等，那么需要实施 Pull Request 工作流程：

本书制作用到的工具 本书采用 Asciidoc 格式编写。 使用 Asciidoctor 构建本书电子版。 教程: • 语法教程 • 转换PDF教程 书中用的可视化图片是由 Regulex 正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 | 第 1 页 意见和疑问 如果有意见或者问题的话，可以直接通过以下方式联系到我。 regex = /(\d{4})-(\d{2})-(\d{2})/; 其可视化形式是： JavaScript 正则表达式迷你书 3. 第三章 正则表达式括号的作用 | 第 27 页 对比这两个可视化图片，我们发现，与前者相比，后者多了分组编号，如 Group #1。 其实正则引擎也是这么做的，在匹配过程中，给每一个分组都开辟一个空间，用来存储每一个分组匹配到的 数据。 既然分组可以捕获数据，那么我们就可以使用它们。

本书制作用到的工具 本书采用Asciidoc格式编写。 使用 Asciidoctor 构建本书电子版。 教程: • 语法教程 • 转换PDF教程 书中用的可视化图片是由 Regulex 正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 | 第 1 页 意见和疑问 如果有意见或者问题的话，可以直接通过以下方式联系到我。 regex = /(\d{4})-(\d{2})-(\d{2})/; 其可视化形式是： JavaScript 正则表达式迷你书 3. 第三章 正则表达式括号的作用 | 第 27 页 对比这两个可视化图片，我们发现，与前者相比，后者多了分组编号，如 Group #1。 其实正则引擎也是这么做的，在匹配过程中，给每一个分组都开辟一个空间，用来存储每一个分组匹配到的 数据。 既然分组可以捕获数据，那么我们就可以使用它们。

*/ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 要通过动画和图解形式展示，而文字则作为动画和图片的解释与补充。 如果你在阅读本书时，发现某段内容提供了图 0‑2 所示的动画或图解，请以图为主、以文字为辅，综合两者 来理解内容。 态方法的行为类似于函数，因为它被绑定在类上，不能访问特定的实例变量。 ‧ C++ 和 Python 既支持过程式编程（函数），也支持面向对象编程（方法）。 � 图“常见的空间复杂度类型”反映的是否是占用空间的绝对大小？ 不是，该图片展示的是空间复杂度，其反映的是增长趋势，而不是占用空间的绝对大小。 假设取 ? = 8 ，你可能会发现每条曲线的值与函数对应不上。这是因为每条曲线都包含一个 常数项，用于将取值范围压缩到一个视觉舒适的范围内。 序运行过程中 对其长度进行调整。 � 如果你感觉物理结构理解起来有困难，建议先阅读下一章“数组与链表”，然后再回顾本节内 容。 3.2 基本数据类型 谈及计算机中的数据，我们会想到文本、图片、视频、语音、3D 模型等各种形式。尽管这些数据的组织形式 各异，但它们都由各种基本数据类型构成。 基本数据类型是 CPU 可以直接进行运算的类型，在算法中直接被使用，主要包括以下几种类型。 ‧

hello‑algo.com 5 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 要通过动画以图解形式展示，而文字则作为解释与补充。 如果你在阅读本书时，发现某段内容提供了如图 0‑2 所示的动画图解，请以图为主、以文字为辅，综合两者 实现长度变化，从而具备 一定的“动态性”。 Tip 如果你感觉物理结构理解起来有困难，建议先阅读下一章，然后再回顾本节内容。 3.2 基本数据类型 当谈及计算机中的数据时，我们会想到文本、图片、视频、语音、3D 模型等各种形式。尽管这些数据的组织 形式各异，但它们都由各种基本数据类型构成。 基本数据类型是 CPU 可以直接进行运算的类型，在算法中直接被使用，主要包括以下几种。 ‧ 整数类型 se file change”按钮。页面跳转后，点击“Create pull request”按钮即可发起拉取请求。 图 16‑3 页面编辑按键 图片无法直接修改，需要通过新建 Issue 或评论留言来描述问题，我们会尽快重新绘制并替换图片。 2. 内容创作 如果您有兴趣参与此开源项目，包括将代码翻译成其他编程语言、扩展文章内容等，那么需要实施以下 Pull Request 工作流程。

hello‑algo.com 5 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 要通过动画以图解形式展示，而文字则作为解释与补充。 如果你在阅读本书时，发现某段内容提供了如图 0‑2 所示的动画图解，请以图为主、以文字为辅，综合两者 实现长度变化，从而具备 一定的“动态性”。 Tip 如果你感觉物理结构理解起来有困难，建议先阅读下一章，然后再回顾本节内容。 3.2 基本数据类型 当谈及计算机中的数据时，我们会想到文本、图片、视频、语音、3D 模型等各种形式。尽管这些数据的组织 形式各异，但它们都由各种基本数据类型构成。 基本数据类型是 CPU 可以直接进行运算的类型，在算法中直接被使用，主要包括以下几种。 ‧ 整数类型 se file change”按钮。页面跳转后，点击“Create pull request”按钮即可发起拉取请求。 图 16‑3 页面编辑按键 图片无法直接修改，需要通过新建 Issue 或评论留言来描述问题，我们会尽快重新绘制并替换图片。 第 16 章 附录 www.hello‑algo.com 367 2. 内容创作 如果您有兴趣参与此开源项目，包括将代码翻译成其他编程语言、扩展文章内容等，那么需要实施以下