esmodule

文章目录

一. export命令1. 如何定义模块1.1 export输出变量的写法：1.2 export`命令输出函数或类（class）。1.3 as关键字重命名1.4 特别注意 2. 如何使用模块2.1 as关键字改变量名2.2 import 提升2.3 import不能使用表达式2.4 模块化整体加载import 特点import() 动态引入导出 export特殊形式例子:

一. export命令

1. 如何定义模块

一个模块就是一个独立的js文件

导出模块

export 东西

1.1 export输出变量的写法：

// wu.js export let firstName = 'wuwei'; export let lastName = 'haha'; export let year = 2019;

还可以

let firstName = 'wuwei'; let lastName = 'haha'; let year = 2019; export {firstName, lastName, year}; //跟上面写法等价，推荐这种写法。

1.2 export`命令输出函数或类（class）。

export function multiply(x, y) { return x * y; };

1.3 as关键字重命名

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion };

1.4 特别注意

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错 export 1; // 报错 var m = 1; export m; //正确写法 // 写法一 export var m = 1; // 写法二 var m = 1; export {m}; // 写法三 var n = 1; export {n as m};

同样的，function的输出，也必须遵守这样的写法。

// 报错 function f() {} export f; // 正确 export function f() {}; // 正确 function f() {} export {f};

2. 如何使用模块

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

引入模块

import 模块路径

<script type="module"> import "./modules/1.js"; // 这种写法只是相当于引入一个文件 import {a} from "./modules/1.js" // 导入模块中导出的a </script> import {firstName, lastName, year} from './profile.js'; function setName(element) { element.textContent = firstName + ' ' + lastName; }

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

2.1 as关键字改变量名

import { lastName as surname } from './profile';

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。

2.2 import 提升

注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。

foo(); import { foo } from 'my_module'; //import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

2.3 import不能使用表达式

由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 报错 import { 'f' + 'oo' } from 'my_module'; // 报错 let module = 'my_module'; import { foo } from module; // 报错 if (x === 1) { import { foo } from 'module1'; } else { import { foo } from 'module2'; } import { foo } from 'my_module'; import { bar } from 'my_module'; // 等同于 import { foo, bar } from 'my_module';

2.4 模块化整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

注意，模块整体加载所在的那个对象，不允许运行时改变。下面的写法都是不允许的。

import 特点

可以是相对路径也可以是绝对路径

​ import “./modules/1.js”;

import模块只会导入一次,无论你引入多少次

import “./modules/1.js”; 如果这么用,就相当于引入了一个js文件

导入模块中的一个变量或常量

import {a,b,c} from "./modules/1.js"

导入时可以取别名使用

import {a as aa,b as bb,c as cc} from "./modules/1.js"

导入这个模块导出的对象

import * as obj from './modules/1.js'; // 这个时候你就以使用obj这个Module对象了 console.log(obj.a);

import 的导入语句会进行提升,提升到最顶部,首先执行

console.log(a + b); // 能正常获取到a,b的值 import {a,b} from './1.js'

导出去的模块内容,如果里面发生有定时器发生导出内容的改变,外边导入的也会发生改变,不像Comment会缓存

import() 动态引入

默认的import语法不能写在if之类的判断里的,因为是静态引入,先引入在使用

// 这种写法是错的 let a = 12; if(a == 12){ import {a} from './1.js' }else{ import {a} from './2.js' }

import()是动态引入 类似于node里面的require

// import() 引入返回一个promise对象 import('./1.js').then(res => { console.log(res); })

优点:

按需加载可以写在if里面,判断加载路径都可以是动态的

导出 export

可以单独导出变量或常量

export let a = 15;

可以导出一个对象

export { a, b, c } // 但是不能这么写 这么写会报错 export { a:a, b:b, c:c }

可以给导出的变量或常量取别名,一旦取了别名,导出这个模块要用别名导入

export { a as aa, b as bb, c as cc } // 导入模块 import {aa,bb,cc} from "./modules/1.js" // 导入时去别名 import {aa as a,bb as b,cc as c} from "./modules/1.js"

特殊形式

发现导入都是需要花括号的,如果希望导入不用花括号,那就需要改变导出方式

// 导出时使用export default let a; export default a = 10; // 导入时可以不用花括号 import a from './modules/1.js'

export 导出的内容,导入时都需要花括号,

export default 导出的 内容,导入时不需要花括号

例子:

// 这里是1.js let a = 20; let b = 30; export { a, b } // 这里是2.js import { a, b } from './1.js'; console.log(`a的值是:${a}, b的值是:${b}`); const sum = () => { console.log(`我是a,b的和:${a + b}`); return a + b; } const show = () => { console.log('show 执行了') return 1; } function Person(name, age) { this.name = name; this.age = age; this.showName = function () { return `我的名字是${this.name}`; } } export { sum, show, a, b } export default { Person } // 这里是HTML导入 import mod, { sum, show, a, b } from "./2.js" console.log(mod); let p = new mod.Person("wuwei", 18); console.log(p); console.log(p.showName()); show(); sum(); console.log(a, b);