《深入理解ES6》第十三章用模块封装代码

曾经终败给现在 2022-10-10 13:57 131阅读 0赞

# 第十三章 用模块封装代码 #

> 《深入理解ES6》—— Nicholas C. Zakas

其他语言使用包（package）之类的概念来定义代码的作用域，  
而JS则是“共享一切”，这是该语言混乱且易出错的方面之一。

ES6的模块就是为了解决作用域的问题，让JS应用变得更有条理。

## 1. 何为模块？ ##

模块（Modules）是使用不同方式加载的JS文件。

与JS原先的脚本加载方式不同。

它与脚本（script）有不同的语义：

*  代码自动运行在严格模式
 *  在顶级作用域创建的变量，不会添加到全局作用域。
 *  顶级作用域的 `this` 值为 `undefined`
 *  不允许使用HTML注释
 *  导出
 *  导入

模块的按需导入以及导出代码的能力，使得不用将所有内容放在同一个文件内。

对应导出和导入的清楚理解，是辨别模块和脚本差异的基础。

模块类似于单实例。

不能动弹导入导出，因为要让JS能静态判断。

## 2. 基本的导出 ##

// 导出数据
    export var color = "red";
    export let name = "吴钦飞";
    export const num = 7;
    
    // 导出函数
    export function sum() {
         ...}
    
    // 导出类
    export class Person {
         ... }
    
    function add(){
         ... }
    
    // 导出引用
    export {
         add };

使用 `export` 将代码公开（导出），未公开的代码全部都是私有的。

导出声明：将 `export` 置于变量、函数、类声明之前

导出引用：`export { 引用1, 引用2 }`

## 3. 基本的导入 ##

`import`语句有两部分：需要导入的标识符，标识符的来源。

基本形式

import {
         标识符1, 表示符2 } from "./foo.js";

`"./foo.js"` 是模块说明符（module specifier），指定模块的位置（来源）。

从 foo 模块中导入绑定，可以直接使用它们，就像它们是在当前模块中定义的。

### 3.1. 导入单个绑定 ###

import {
         sum } from "./foo.js";
    
    sum(1, 2); //=> 3

### 3.2. 导入多个绑定 ###

import {
         sum, color, num } from "./foo.js";

### 3.3. 完全导入一个模块 ###

将这个模块当做单一对象进行导入，该模块的所有导出都会作为对象的属性存在。

import * as foo from "./foo.js";
    
    foo.sum( 1, 2 );

这种导入格式称为命名空间导入（namespace import）。

### 3.4. 导入绑定的微妙怪异点 ###

ES6的`import`语句为变量、函数、类创建了只读绑定，  
而不像普通变量那样简单引用了原始值。

// # foo.js
    export var name = "吴钦飞";
    export function setName( newName ) {
        
        name = newName;
    }
    
    // # another.js
    import {
         name, setName } from "./foo.js";
    
    name; //=> "吴钦飞"
    
    setName( "张三" ); 
    name; //=> "张三"
    
    name = "李四"; // error

导入绑定模块无法修改只读绑定的值，  
但导出代码的模块却可以。

## 4. 重命名导出和导入 ##

重命名导出：

function sum() {
        ...}
    
    export {
         sum as add }

重命名导入：

import {
         add as plus } from "./foo.js";
    
    plus(1,2); //=> 3

## 5. 模块的默认值 ##

使用 `default` 指定一个变量（或一个函数，或一个类）作为模块的默认导出。

### 5.1. 导出默认值 ###

# 方式一
    export default function( num1, num2 ) {
        
        return num1 + num2;
    }
    
    # 方式二
    function sum( num1, num2 ) {
        
        return num1 + num2;
    }
    export default sum;
    
    # 方式三
    function sum( num1, num2 ) {
        
        return num1 + num2;
    }
    export {
         sum as default };

### 5.2. 导入默认值 ###

// # 方式一
    import sum from "./foo.js";
    sum(1, 2); //=> 3
    
    // # 方式二
    import {
         default as sum } "./foo.js";
    sum(1, 2); //=> 3

## 6. 绑定的再导出 ##

将导入的内容重新再导出，比如你要用几个小模块来创建一个库。

// # 方式一
    import {
         sum } from "./foo.js";
    export {
         sum };
    
    // # 方式二
    export {
         sum } from "./foo.js";
    
    // # 方式三
    export {
         sum as add } from "./foo.js";

## 7. 无绑定的导入 ##

有些模块没有任何导出，只是修改全局作用域的对象（如 Array、Object）。  
经常用于创建polyfill于shim。

由于它没有导出任何东西，因此可以使用简化的导入语法，无需导入绑定。

import "./foo.js";

## 8. 加载模块 ##

ES6定义了模块的语法，但未定义如何加载它们。

ES6对内部操作 `HostResolveImportedModule` 指定了语法和抽象的加载机制。

Web浏览器与node.js可以自行决定实现 `HostResolveImportedModule` 的方式。

### 8.1. 在 Web浏览器中使用模块 ###

ES6之前，Web浏览器加载JS的方式：

*  使用`<script src="foo.js">` 指定加载的位置
 *  使用`<script>JS代码</script>` 嵌入内联的JS代码
 *  作为Worker来加载。（Web Worker或Service Worker）

#### 8.1.1. 在 `<script>` 中使用模块 ####