Module理解及使用

暖风吹向你的脸

ES6的模块化设计思想是静态化，也就是说，在编译的时候确定模块的依赖关系，以及输出输出入的变量。而CommonJS和AMD模块都是在运行时确定的。ES6的模块不是对象，而是通过export显示指定输出的代码，再通过import命令输入。

1. // 模块输入
2. import { start,address } from 'util'

复制代码

上面的模块输入加载了两个方法，即使util模块内有其它方法也不会加载，只会加载上面引入的两个方法，这种加载称为“编译时加载”或静态加载。
需要注意的是，ES6的模块自动采取严格模式，不管头部有没有加上"use strict"都会开启严格模式。严格模式的限制如下：
1、变量必须先声明再使用
2、函数参数不能有同名属性，否则报错
3、不能使用with语句
4、不能对只读属性赋值，否则报错
5、不能使用前缀0表示八进制数，否则报错
6、不能删除不可删除的属性，否则报错
7、不能删除变量delete prop，会报错，只能删除属性delete global[prop]
8、eval不会在它的外层作用域引入变量
9、eval和arguments不能被重新赋值
10、arguments不会自动反映函数参数的变化
11、不能使用arguments.callee
12、不能使用arguments.caller
13、禁止this指向全局对象
14、不能使用fn.caller和fn.arguments获取函数调用的堆栈
15、增加了保留字（比如protected、static和interface）
export和import命令

模块主要有export和import构成，export规定模块对外的接口，import用于输入模块提供的功能。
模块导出

1. // util模块
2. // 类型
3. function type(a){
4.     return typeof a
5. }
6. // 计算
7. function sum(a,b) {
8.     return a * b
9. }
10. // 判断是否为数组
11. function isArray(a) {
12.     return a instanceof Array
13. }
14. export { type,sum }  // 按需导出

复制代码

模块导入

1. import {  type,sum } from './util'
2. let num = sum(10,5)
3. console.log(num) // 50

复制代码

上面两种方式是可选的方式导出的，也就是说，import导入模块的时候，只会加载export导出的方法，其它的方法不会被import加载，并且import引入util模块可以按需引入，引入自己需要的模块即可，其它未引入的模块也不会加载，这也就是静态加载的好处。
除了export { xxx,xxx }的按需导出外，ES6还提供了export default的默认导出，默认导出的方法，在import导入的时候，不需要跟导出名一直，可以自定义名称接收导出的方法。

1. // util模块
2. // 计算
3. function sum(a,b) {
4.     return a * b
5. }
6. // 判断是否为数组
7. function isArray(a) {
8.     return a instanceof Array
9. }
11. export default sum // 默认导出

复制代码

1. import aaa from './util'  // 导入时名字可以自定义
2. let num = aaa(10,5)
3. console.log(num) // 50

复制代码

其实这个default就是一个叫做default的变量，这个变量可以被任意命名，在import导入的时候，取任何名称都可以匹配上default导出的方法。
按需和默认导出
export { xxx,xxx }和export default默认导出可以同时使用

1. // util模块
2. function type(a){
3.     return typeof a
4. }
6. function sum(a,b) {
7.     return a * b
8. }
10. function isArray(a) {
11.     return a instanceof Array
12. }
14. export { type,sum }
15. export default isArray

复制代码

1. // 导入
2. import { type,sum }from './util'  
3. import aaa from './util'  

复制代码

模块的整体加载

上面的导出方法都是加载模块内对应的方法，模块的整体加载要使用*，也就是加载全部，语法如下

1. import * as util from './util';
2. // 在页面中使用
3. let num = util.sum(10,5)
4. console.log(num)  // 50

复制代码

这种写法是将模块整体加载，用*指定一个对象，所有输出的值都加载在这个对象上面。通过该对象.方法名来获取对应方法。
需要注意的是，ES6的模块是静态分析的，不允许对模块进行改变，所以下面写法是不允许的:

1. util.sum = 'hello' // 报错
2. util.sum = function () {} // 报错

复制代码

模块继承

模块之间也是可以继承的，假设A模块继承了B模块

1. // A模块
2. function sum(a,b) {
3.     return a * b
4. }
6. function isArray(a) {
7.     return a instanceof Array
8. }
10. export * from 'B'  // 输出B模块的所有属性和方法，忽略模块内的default方法
11. export { sum }
12. export default isArray

复制代码

export * 命令会忽略B模块的default方法，因为A模块内部有自己的default方法。
模块的重命名

1. // util模块
2. export { sum as s }
3. // 页面
4. import { s } from './util'  // 引入命名后的方法

复制代码

模块按需引入import()

正常情况下import是需要在页面顶层引入的，并且import的引入执行的优先级是最高的，例如：

1. let s = sum(10,5)
2. import { sum } from './util'

复制代码

上面这种写法是允许的，程序会执行import的引入，然后再执行let s = sum(10,5)，但这种写法会默认导入模块，并且是在顶层导入。
es6提供了动态导入功能：import()，当程序执行到该语句的时候才会导入，并且是同步执行，import()返回的是一个Promise，所以可以使用then方法和async-await。
Promise写法

1. import('./util.js')
2. .then(el=>{
3.    console.log(el.t(100));  // number
4.    console.log(el.sum(10,5));  // 50
5. })

复制代码

async-await写法

1. async function getImport(){
2.       let { sum } = await import('./util.js')
3.       console.log(sum(2,8));
4. }
5. getImport()  // 16

复制代码

也可以通过解构的方式获取

1. import('../module/import.js')
2. .then(({sum})=>{
3.      console.log(sum(20,5));  // 100
4. })

复制代码

如果模块是default默认导出，其实default就是一个键名

1. import('../module/import.js')
2. .then((e)=>{
3.    console.log(e.default([1,2,3]));  // true
4. })

复制代码

default也可以通过具名的形式导入（取别名）

1. import('../module/import.js')
2. .then(({default : isA})=>{
3.      console.log(isA([1,2,3]));  // true
4. })

复制代码

import.meta

在使用一个模块时，有时候需要知道该模块本身的信息（比如模块的路径），import命令新增了一个元属性import.meta，可以返回当前模块的信息。
注意：import.meta只能在模块内使用，在模块外使用会报错

1. // util模块
2. function sum(a,b) {
3.     return a * b
4. }
6. function getMeta(){
7.     return import.meta  // 获取当前模块的元信息
8. }
10. export { sum,getMeta }

复制代码

1. // console.log(import.meta);  // import.meta只能在模块内使用，在模块外部使用会报错
2. import('./util.js')
3. .then(el=>{
4.       console.log(el.getMeta());  // {url: 'http://127.0.0.1:5500/module/import.js', resolve: ƒ}
5. })

复制代码

案例源码：https://gitee.com/wang_fan_w/es6-science-institute
如果觉得这篇文章对你有帮助，欢迎点亮一下star哟

来源:https://www.cnblogs.com/wang-fan-w/p/17134976.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！