误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的 let 和 const 命令 41 创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出 错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一 方面， window 对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实 体含义的对象，也是不合适的。 ES6为了改变这一点，一方面规定，为了保持兼容性， Symbol 239 上面代码将导致其他脚本都无法引用 FOO_KEY 。但这样也有一个问题，就是如果 多次执行这个脚本，每次得到的 FOO_KEY 都是不一样的。虽然Node会将脚本的执 行结果缓存，一般情况下，不会多次执行同一个脚本，但是用户可以手动清除缓 存，所以也不是完全可靠。 内置的Symbol值 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语 }); 上面代码对一个空对象架设了一层拦截，重定义了属性的读取（ get ）和设置 （ set ）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行 为的对象 obj ，去读写它的属性，就会得到下面的结果。 obj.count = 1 // setting count! ++obj.count // getting count! // setting count

js（1.1M），各页面的业务代码 xxx.part.js（使用 FutureBuilder 后）、图片文 件。直接应用这些资源到项目中，会遇到以下问题： ● 功能无法及时更新：浏览器对同名文件的缓存，可能导致程序代码不被及时更 新或者出现执行错乱。 26 > 2021年美团技术年货 ● 首屏渲染性能差：main.dart.js 文件过大，单一文件加载、解析时间过长，势 必会影响首屏的渲染时间。 pool 中已经缓存 过的 Canvas 以便能够节省内存。由于 Flutter Web 自身实现了一套页面滚动机制， 页面滚动过程中，会频繁计算位置信息，引起滚动区域内容被重新创建，这就是为什 么每次滚动都会创建 Canvas 的原因。 我们设计的解决方案是：修改 FlutterSDK，在滚动的过程中定义一个阈值，当滚动 的高度在阈值范围内，我们就会把当前的 Canvas 缓存起来。这样选择性的创建和销 要求。但加载性能数据仍有较大的优化空间，我们会持续对其进行探索。 5.3 滚动性能 针对滚动优化，我们通过修改 Flutter SDK，使得 Canvas 在页面滚动时无需重复 创建，而是被缓存起来。这样大大节省了内存的开销（优化后页面内存占用稳定为 100M 左右，与常规 Web 页面无异），同时在一定程度上提升了滚动性能。以商家学 院文章内容页为例，对比优化前后滚动 FPS ：

500, 600], '-']; 3. 4. var x = ??; 5. 6. alert(x); // x应该为500 Array 提供了一种顺序存储一组元素的功能，并可以按索引来读写。 练习：在新生欢迎会上，你已经拿到了新同学的名单，请排序后显示： 欢迎XXX，XXX，XXX和XXX同 学！ ： 1. 'use strict'; 2. var arr = ['小明', (reason) { 34. log('Failed: ' + reason); 35. }); Log: 可见Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了： 6.6 Promise - 158 - 本文档使用 书栈(BookStack.CN) 构建 Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任 cube(5); // 125 6. cube(10); // 1000 可见，创建偏函数的目的是将原函数的某些参数固定住，可以降低新函数调用的难度。 如果一个函数调用开销很大，我们就可能希望能把结果缓存下来，以便后续调用时直接获得结果。举个 例子，计算阶乘就比较耗时： 1. 'use strict'; 2. 3. function factorial(n) { 4. console

"ReactDOM" 39. } 40. }; 大家可能对 externals 字段有所疑惑。 我们想要避免把所有的React都放到一个文件里，因为会增 加编译时间并且浏览器还能够缓存没有发生改变的库文件。 理想情况下，我们只需要在浏览器里引入React模块，但是大部分浏览器还没有支持模块。 因此大部 分代码库会把自己包裹在一个单独的全局变量内，比如： jQuery 或 _ dist 目录里，它们可以按照预想运行。 若如此，那么你写的纯JavaScript文件将做为TypeScript的输入，你将要运行的是TypeScript的 输出。 在从JS到TS的转换过程中，我们会分离输入文件以防TypeScript覆盖它们。 你也可以指定 输出目录。 你可能还需要对JavaScript做一些中间处理，比如合并或经过Babel再次编译。 在这种情况下，你 应该已经有了如下的目录结构。 isAcceptable(s) ? "matches" : "does not match" } ${ name }`); 34. } 35. } 当应用变得越来越大时，我们需要将代码分离到不同的文件中以便于维护。 现在，我们把 Validation 命名空间分割成多个文件。 尽管是不同的文件，它们仍是同一个命名空 间，并且在使用的时候就如同它们在一个文件中定义的一样。 因为不同文件之间存在依赖关系，所以

"react-dom": "ReactDOM" }, }; 大家可能对 externals 字段有所疑惑。 我们想要避免把所有的React都放到一个 文件里，因为会增加编译时间并且浏览器还能够缓存没有发生改变的库文件。 TypeScript Handbook（中文版） 67 React与webpack 理想情况下，我们只需要在浏览器里引入React模块，但是大部分浏览器还没有支 持模块。 dist 目录里，它们可以按照预想运行。 若如此，那么你写的纯JavaScript文件将做为TypeScript的输入，你将要运行的是 TypeScript的输出。 在从JS到TS的转换过程中，我们会分离输入文件以防 TypeScript覆盖它们。 你也可以指定输出目录。 你可能还需要对JavaScript做一些中间处理，比如合并或经过Babel再次编译。 在 这种情况下，你应该已经有了如下的目录结构。 console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? } } 分离到多文件 TypeScript Handbook（中文版） 372 命名空间 当应用变得越来越大时，我们需要将代码分离到不同的文件中以便于维护。 多文件中的命名空间 现在，我们把 Validation 命名空间分割成多个文件。 尽管是不同的文件，它们

函数没有副作用，这使得更易于测试和理解。 你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果： 1.

{{ calculateBooksMessage() }}

计算属性缓存 vs 方法 计算属性和侦听器 - 34 - 本文档使用 书栈网 · BookStack.CN 构建 1. // 在组件中 2. methods: { 3. calculateBooksMessage() ? 'Yes' : 'No' 5. } 6. } 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然 而，不同的是计算属性是基于它们的反应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它 们才会重新求值。这就意味着只要 author.books 还没有发生改变，多次访问 publishedBookMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。 我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 list ，它需要遍历一个巨大的 数组并做大量的计算。然后我们可能有其他的计算属性依赖于 list 。如果没有缓存，我们将不可 避免的多次执行 list 的 getter！如果你不希望有缓存，请用 method 来替代。 计算属性默认只有 getter，不过在需要时你也可以提供一个

JavaScript 功能、脚本语言 5 VCG JavaScript 2020/4/28 6 2. JavaScript 功能  主要功能  向 HTML 页面添加交互行为  读写 HTML 元素  在数据被提交到服务器之前验证数据  检测访客的浏览器信息  控制 cookies 和本地存储 JavaScript 功能、脚本语言 JavaScript 特点 • 脚本编写语言 • 基于对象的语言 • 简单性 • 安全性 • 动态性 • 跨平台 6 VCG JavaScript 2020/4/28 7  主要功能  向 HTML 页面添加交互行为  读写 HTML 元素  在数据被提交到服务器之前验证数据  检测访客的浏览器信息  控制 cookies 和本地存储 VCG JavaScript 2020/4/28 8 2. JavaScript js 文件内容如下： document.write("欢迎您学习JavaScript!");  优点  可维护性：可在不触及 HTML 标记的情况下，集中精力编辑 JS 代码  可缓存：浏览器可缓存链接的所有外部 JS 文件。若多个页面使用同一个文 件，该文件只需下载一次。 VCG JavaScript 2020/4/28 20 4.3 引入外部文件 标签位置 浏览器遇到

5. o2.a // 1 6. 7. o2.b = 2; 8. o1.b // 2 上面代码中， o1 和 o2 指向同一个对象，因此为其中任何一个变量 添加属性，另一个变量都可以读写该属性。 此时，如果取消某一个变量对于原对象的引用，不会影响到另一个变 量。 1. var o1 = {}; 2. var o2 = o1; 3. 4. o1 = 1; 5. o2 // not defined 5. })() 上面代码中，函数 f 内部是严格模式，这时 eval 内部声明 的 foo 变量，就不会影响到外部。 不过，即使在严格模式下， eval 依然可以读写当前作用域的变量。 函数 - 136 - 本文档使用 书栈(BookStack.CN) 构建 1. (function f() { 2. 'use strict'; 3. var foo Elements：查看网页的 HTML 源码和 CSS 代码。 Resources：查看网页加载的各种资源文件（比如代码文件、字 体文件 CSS 文件等），以及在硬盘上创建的各种内容（比如本地 缓存、Cookie、Local Storage等）。 Network：查看网页的 HTTP 通信情况。 Sources：查看网页加载的脚本源码。 Timeline：查看各种网页行为随时间变化的情况。

DllReferencePlugin 引用 manifest.json 引用效果 在 webpack.config.js 引入 缓存 缓存思路： 目的：提升二次构建速度 · babel-loader 开启缓存 · terser-webpack-plugin 开启缓存 · 使用 cache-loader 或者 hard-source-webpack-plugin 缩小构建目标 比如 babel-loader unknown=polyfill&features=Promise,Map,Set 体积优化策略总结 Scope Hoisting Tree-shaking 图片压缩 动态 Polyfill 公共资源分离

·Module options: 模块参数，给 loader 设置扩展 ·Output options: 输出参数(输出路径、输出文件名称) ·Advanced options: 高级用法(记录设置、缓存设置、监听频率、bail等) ·Resolving options: 解析参数(alias 和 解析的文件后缀设置) ·Optimizing options: 优化参数 ·Stats options: 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性 传统的网页开发转变成 Web Apps 开发 代码复杂度在逐步增高 部署时希望把代码优化成几个 HTTP 请求 分离的 JS文件/模块，便于后续代码的维护性 常见的几种模块化方式 CJS ES module AMD import * as largeNumber from 'large-number';