可组合的 Vue Composable Vue, 编写可组合可复⽤的 Vue 函数的最佳实践与技巧 ANTHONY FU Hangzhou, China 2021 Anthony Fu antfu antfu7 Anthony Fu antfu.me Vue 核⼼成员 / Vite 团队成员 VueUse, Slidev, Type Challenges 等项⽬创作者 全职开源 上下⽂丢失 有限的类型⽀持 按 API 类型组织 极易复⽤ (原⽣ JS 函数) 可灵活组合 (⽣命周期钩⼦可多次使⽤) 提供更好的上下⽂⽀持 更好的 TypeScript 类型⽀持 按功能/逻辑组织 可独⽴于 Vue 组件使⽤ 对象式 API 存在的问题 组合式 API 提供的能⼒ 什么是可组合的函数 Dark 可复⽤逻辑的集合，专注点分离 export function 'dark' : 'light' }, }) } 在 VueUse 中可⽤: usePreferredDark useLocalStorage useDark 组合关系 其中每⼀个函数都可以独⽴使⽤ 专注点分离 useDark usePreferredDark useLocalStorage useStorage useEventListener useMediaQuery

变量的解构赋值 字符串的扩展 正则的扩展 数值的扩展 函数的扩展 数组的扩展 对象的扩展 Symbol Set 和 Map 数据结构 Proxy Reflect Promise 对象 Iterator 和 for...of 循环 Generator 函数的语法 Generator 函数的异步应用 async 函数 Class 的基本语法 Class 的继承 Decorator => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数 的 JavaScript 环境执行了。 配置文件 .babelrc Babel 的配置文件是 .babelrc ，存放在项目的根目录下。使用 Babel 的第一步， a[6](); // 10 上面代码中，变量 i 是 var 命令声明的，在全局范围内都有效，所以全局只有一 个变量 i 。每一次循环，变量 i 的值都会发生改变，而循环内被赋给数组 a 的 函数内部的 console.log(i) ，里面的 i 指向的就是全局的 i 。也就是说，所 有数组 a 的成员里面的 i ，指向的都是同一个 i ，导致运行时输出的是最后一 轮的 i

15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 4 4.1 4.2 4.3 4.4 4.5 4.6 5 5.1 5.2 接口 类 函数 泛型 枚举 类型推论 类型兼容性 高级类型 Symbols Iterators 和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 书写.d.ts文件 TypeScript 1.6 TypeScript 1.5 TypeScript 1.4 TypeScript 1.3 TypeScript 1.1 手册 基础类型 变量声明 接口 类 函数 泛型 枚举 类型推论 类型兼容性 高级类型 Symbols Iterators 和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 书写.d.ts文件 文件，它包含了和输入文件中相同的JavsScript代 码。 一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！ 接下来让我们看看TypeScript工具带来的高级功能。 给 person 函数的参数添加 : string 类型注解，如下： function greeter(person: string) { return "Hello, " + person; } var

目 录 致谢 介绍 前言 入门篇 导论 历史 基本语法 数据类型 概述 null，undefined 和布尔值 数值 字符串 对象 函数 数组 运算符 算术运算符 比较运算符 布尔运算符 二进制位运算符 其他运算符，运算顺序 语法专题 数据类型的转换 错误处理机制 编程风格 console 对象与控制台 标准库 Object 对象 属性描述对象 语言是一种“对象模型”语言。各种宿主 环境通过这个模型，描述自己的功能和操作接口，从而通过 JavaScript 控制这些功能。但是，JavaScript 并不是纯粹的“面 向对象语言”，还支持其他编程范式（比如函数式编程）。这导致几乎 任何一个问题，JavaScript 都有多种解决方法。阅读本书的过程 中，你会诧异于 JavaScript 语法的灵活性。 JavaScript 的核心语法部分相当精简，只包括两个部分：基本的语 还是值得学习，况且它的 入门真的不难。 JavaScript 的性能优势体现在以下方面。 （1）灵活的语法，表达力强。 JavaScript 既支持类似 C 语言清晰的过程式编程，也支持灵活的 函数式编程，可以用来写并发处理（concurrent）。这些语法特性已 经被证明非常强大，可以用于许多场合，尤其适用异步编程。 JavaScript 的所有值都是对象，这为程序员提供了灵活性和便利

Gulp Knockout.js React与webpack React Angular 2 从JavaScript迁移到TypeScript 手册 基础类型 变量声明 接口 类 函数 泛型 枚举 类型推论 类型兼容性 高级类型 Symbols Iterators 和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 JSX Decorators Gulp Knockout.js React与webpack React Angular 2 从JavaScript迁移到TypeScript 手册 基础类型 变量声明 接口 类 函数 字面量类型 泛型 枚举 类型推论 类型兼容性 高级类型 Symbols Iterators 和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 Gulp Knockout.js React与webpack React Angular 2 从JavaScript迁移到TypeScript 手册 基础类型 变量声明 接口 类 函数 泛型 枚举 介绍 目录 Introduction - 12 - 本文档使用 书栈网 · BookStack.CN 构建 类型推论 类型兼容性 高级类型 Symbols Iterators

0. 写在前面 hello‑algo.com 4 本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注释、内容 注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.3. 在动画图解中高效学习 视频和图片相比于文字的信息密度和结构化程度更高，更容易理解。在本书中，知识重难点会主要以动画、图 的。对于以上情况，我们很难仅凭时间复杂度来判定算法效率高低。然而，即使存在这些问题，复杂度分 析仍然是评判算法效率的最有效且常用的方法。 2.2.3. 函数渐近上界 设算法「计算操作数量」为 ?(?) ，其是一个关于输入数据大小 ? 的函数。例如，以下算法的操作数量为 ?(?) = 3 + 2? function algorithm(n) { var a = 1; // +1 a += } ?(?) 是个一次函数，说明时间增长趋势是线性的，因此易得时间复杂度是线性阶。 我们将线性阶的时间复杂度记为 ?(?) ，这个数学符号被称为「大 ? 记号 Big‑? Notation」，代表函数 ?(?) 的「渐近上界 asymptotic upper bound」。 我们要推算时间复杂度，本质上是在计算「操作数量函数 ?(?) 」的渐近上界。下面我们先来看看函数渐近上 界的数学定义。

0. 写在前面 hello‑algo.com 4 本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注释、内容 注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.3. 在动画图解中高效学习 视频和图片相比于文字的信息密度和结构化程度更高，更容易理解。在本书中，知识重难点会主要以动画、图 的。对于以上情况，我们很难仅凭时间复杂度来判定算法效率高低。然而，即使存在这些问题，复杂度分 析仍然是评判算法效率的最有效且常用的方法。 2.2.3. 函数渐近上界 设算法「计算操作数量」为 ?(?) ，其是一个关于输入数据大小 ? 的函数。例如，以下算法的操作数量为 ?(?) = 3 + 2? function algorithm(n: number): void{ var a: number } ?(?) 是个一次函数，说明时间增长趋势是线性的，因此易得时间复杂度是线性阶。 我们将线性阶的时间复杂度记为 ?(?) ，这个数学符号被称为「大 ? 记号 Big‑? Notation」，代表函数 ?(?) 的「渐近上界 asymptotic upper bound」。 我们要推算时间复杂度，本质上是在计算「操作数量函数 ?(?) 」的渐近上界。下面我们先来看看函数渐近上 界的数学定义。

模块的特点: ·只能作为模块顶层的语句句出现 · import 的模块名只能是字符串串常量量 · import binding 是 immutable的 代码擦除： uglify 阶段删除⽆无⽤用代码 现象：构建后的代码存在⼤大量量闭包代码 编译后（bundle.js） 编译前 (source code) 会导致什什么问题？ 运⾏行行代码时创建的函数作⽤用域变多，内存开销变⼤大 转换后的模块会带上⼀一层包裹 ·import 会被转换成 __webpack_require 模块 模块初始化函数 进⼀一步分析 webpack 的模块机制 分析： · 打包出来的是⼀一个 IIFE (匿匿名闭包) · modules 是⼀一个数组，每⼀一项是⼀一个模块初始化函数 · 通过 WEBPACK_REQUIRE_METHOD(0) 启动程序 · __webpack_require ⽤用来加载模块，返回 module.exports scope hoisting 原理理 原理理：将所有模块的代码按照引⽤用顺序放在⼀一个函数作⽤用域⾥里里，然后适当的重命名⼀一 些变量量以防⽌止变量量名冲突 对⽐比: 通过 scope hoisting 可以减少函数声明代码和内存开销 scope hoisting 使⽤用 必须是 ES6 语法，CJS 不不⽀支持 webpack mode 为

2.6 条件判断 2.7 循环 2.8 Map和Set 2.9 iterable 3 函数 3.1 函数定义和调用 3.2 变量作用域 3.3 方法 3.4 高阶函数 3.4.1 map/reduce 3.4.2 filter 3.4.3 sort 3.5 闭包 3.6 箭头函数 3.7 generator 4 标准对象 4.1 Date 4.2 RegExp 4 z = 5; 10. } 11. } JavaScript本身对嵌套的层级没有限制，但是过多的嵌套无疑会大大增加看懂代码的难度。遇到这种 情况，需要把部分代码抽出来，作为函数来调用，这样可以减少代码的复杂度。 以 // 开头直到行末的字符被视为行注释，注释是给开发人员看到，JavaScript引擎会自动忽略： 1. // 这是一行注释 2. alert('hello'); 比较。 另一个例外是 NaN 这个特殊的Number与所有其他值都不相等，包括它自己： 1. NaN === NaN; // false 唯一能判断 NaN 的方法是通过 isNaN() 函数： 1. isNaN(NaN); // true 最后要注意浮点数的相等比较： 1. 1 / 3 === (1 - 2 / 3); // false 这不是JavaScript的设计缺陷。浮

> 2021年美团技术年货 美团外卖终端容器无关化研发框架 作者：正浩 宝石 彭震 | 终端容器无关化（Containerless）：与服务无关化（Serverless）的概念类似，即 在保持顶层业务研发语言不变更的情况下，在下层可以兼容性地升级、替换终端容器 的能力，让用户无需关心终端容器的运维，只要将精力聚焦到业务逻辑上的技术。 一、前言 React2X 是一款面向多终端、跨平台、容器无关化研发框架。在整个美团前端技术 等），如何保证跨容器开发体验的一致性，以及建设跨容器应用开发的生 态能力，是我们需要解决的问题。 ● 公司内丰富的终端容器化技术蓬勃发展，而因业务升级带来的改造成本也比较 大，亟待一款高扩展性设计的顶层框架作为技术抓手。 ● 跨容器动态化能力覆盖，逐步成为各个业务方越来越重视的基础能力，可以大 幅缩短需求交付的周期，提高上线发版的效率，并能有效地解决包体积大小的 问题，提升业务的敏捷性。 各类桥协议等。 ② 业务接入的使用成本 - 首次成本：作为一个新定义的框架如何让新业务方快速上 手，如何从存量业务线进行迁移。 - 边际成本：如何融合美团的基建生态，让业务方 快速复用平台能力。 ③ 顶层架构的合理设计 - 高可维护性、高度扩展性：如何快速升级、替换、新增一 款底层容器。 注：以上问题我们会在下文“技术全景”章节中给予解答。 78 > 2021年美团技术年货 3.3 项目优势