1. Module 模块化
JavaScript 采用'共享一切'的方式加载代码, 也就是在ES6 之前, JavaScript中定义的一切都共享同一个全局作用于, 这样随着程序复杂度提升的同时,也会带来命名冲突等诸多问题. 因此ES6的一个目标就是解决作用域问题. 也为了使JavaScript 应用程序显得有序, 于是引进了模块
1.1 模块功能
模块功能主要由两个命令构成：export和import。
export命令用于规定模块的对外接口。
import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
2. 模块的使用
注意如果需要测试模块化需要放到服务器环境
2.1. export 导出语法
使用export 关键字将模块中的一部分代码暴露给其他模块, 可以将export 关键字放在任何变量, 函数,类声明之前, 将其导出
导出模块
export 东西
2.1.1 export输出变量的写法：
导出单个的变量
// 单个变量导出
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};
//跟上面写法等价，推荐这种写法。
注意点: 一次导出是, 严禁对象属性值的写法.如下写法会报错
// 报错写法
let firstName = 'wuwei';
let lastName = 'haha';
let year = 2019;
export {
firstName:firstName,
lastName:lastName,
year:year
};
2.1.2 export`命令输出函数或类（class）。
// 导出函数
export function multiply(x, y) {
return x * y;
};
// 导出类
export class Penson{
constructor(name,age){
this.name = name;
this.age = age;
}
}
2.1.3 as关键字重命名
通常情况下export 输出的变量, 函数或者类就是本来的名字，但是有时,我们可能并不希望使用它们的原始名称. 此时就可以通过as关键字修改导出元素的名称.
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
};
2.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};
动态绑定
export`语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
上面代码输出变量foo，值为bar，500 毫秒之后变成baz。
2.1.5 整体导出
发现导入都是需要花括号的,如果希望导入不用花括号,那就需要改变导出方式
// 导出时使用export default
let a;
export default a = 10;
// 导入时可以不用花括号
import a from './modules/1.js'
2.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';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
2.2.1 as关键字改变量名
import { lastName as surname } from './profile';
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。
2.2.2 import 提升
注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。
foo();
import { foo } from 'my_module';
//import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。
2.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.2.4 模块化整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
注意，模块整体加载所在的那个对象，不允许运行时改变。下面的写法都是不允许的。
2.2.5 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会缓存
2.2.6 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里面,判断加载
- 路径都可以是动态的
例子:
// 这里是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);
