modulenot（Module理解及使用）

ES6的模块化设计思想是静态化 
  
  
  
  
  
  
，也就是说 
  
  
  
  
  
  
 ，在编译的时候确定模块的依赖关系

 


 


 


 


 


 


 ，以及输出输出入的变量              。而CommonJS和AMD模块都是在运行时确定的
 
  
 
  
 
  
 
  
 
  
 
  
 
 。ES6的模块不是对象 
 
 
 
 
 
 
，而是通过export显示指定输出的代码 
   
   
   
   
   
   
 ，再通过import命令输入













。

// 模块输入 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用于输入模块提供的功能


 


 


 


 


 


 


。

模块导出 // util模块 // 类型 function type(a){ return typeof a } // 计算 function sum(a,b) { return a * b } // 判断是否为数组 function isArray(a) { return a instanceof Array } export { type,sum } // 按需导出

模块导入

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

上面两种方式是可选的方式导出的

 


 


 


 


 


 


 ，也就是说 
 
 
 
 
 
 
，import导入模块的时候 
   
   
   
   
   
   
 ，只会加载export导出的方法
 

 

 

 

 

 

 ，其它的方法不会被import加载
 

 

 

 

 

 

 
，并且import引入util模块可以按需引入             ，引入自己需要的模块即可 

 
 

 
 

 
 

 
 

 
 

 
 

 ，其它未引入的模块也不会加载













，这也就是静态加载的好处 
 
 
 
 
 
 。

除了export { xxx,xxx }的按需导出外                    ，ES6还提供了export default的默认导出 
 
 
 
 
 
 
 
 
 
 
 
 
 ，默认导出的方法




















，在import导入的时候             ，不需要跟导出名一直 
  
 
  
 
  
 
  
 
  
 
  
 
  ，可以自定义名称接收导出的方法  
   
   
   
   
   
   
 。

// util模块 // 计算 function sum(a,b) { return a * b } // 判断是否为数组 function isArray(a) { return a instanceof Array } export default sum // 默认导出 import aaa from ./util // 导入时名字可以自定义 let num = aaa(10,5) console.log(num) // 50

其实这个default就是一个叫做default的变量













，这个变量可以被任意命名 
  
  
  
  
  
  
，在import导入的时候 
  
  
  
  
  
  
 ，取任何名称都可以匹配上default导出的方法

 

 

 

 

 

 

。

按需和默认导出 export { xxx,xxx }和export default默认导出可以同时使用

// util模块 function type(a){ return typeof a } function sum(a,b) { return a * b } function isArray(a) { return a instanceof Array } export { type,sum } export default isArray // 导入 import { type,sum }from ./util import aaa from ./util

模块的整体加载

上面的导出方法都是加载模块内对应的方法

 


 


 


 


 


 


 ，模块的整体加载要使用* 
 
 
 
 
 
 
，也就是加载全部 
   
   
   
   
   
   
 ，语法如下

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

这种写法是将模块整体加载
 

 

 

 

 

 

 ，用*指定一个对象
 

 

 

 

 

 

 
，所有输出的值都加载在这个对象上面
 

 

 

 

 

 

 。通过该对象.方法名来获取对应方法              。

需要注意的是             ，ES6的模块是静态分析的 

 
 

 
 

 
 

 
 

 
 

 
 

 ，不允许对模块进行改变













，所以下面写法是不允许的: util.sum = hello // 报错 util.sum = function () {} // 报错

模块继承

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

// A模块 function sum(a,b) { return a * b } function isArray(a) { return a instanceof Array } export * from B // 输出B模块的所有属性和方法 
 
 
 
 
 
 
 
 
 
 
 
 
 ，忽略模块内的default方法 export { sum } export default isArray

export * 命令会忽略B模块的default方法




















，因为A模块内部有自己的default方法
 

 
 

 
 

 
 

 
 

 
 

 
 

。

模块的重命名

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

模块按需引入import()

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

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

上面这种写法是允许的













，程序会执行import的引入 
  
  
  
  
  
  
，然后再执行let s = sum(10,5) 
  
  
  
  
  
  
 ，但这种写法会默认导入模块

 


 


 


 


 


 


 ，并且是在顶层导入












。

es6提供了动态导入功能：import() 
 
 
 
 
 
 
，当程序执行到该语句的时候才会导入 
   
   
   
   
   
   
 ，并且是同步执行
 

 

 

 

 

 

 ，import()返回的是一个Promise
 

 

 

 

 

 

 
，所以可以使用then方法和async-await                     。

Promise写法 import(./util.js) .then(el=>{ console.log(el.t(100)); // number console.log(el.sum(10,5)); // 50 })

async-await写法

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

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

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

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

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

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

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

import.meta

在使用一个模块时 

 
 

 
 

 
 

 
 

 
 

 
 

 ，有时候需要知道该模块本身的信息（比如模块的路径）













，import命令新增了一个元属性import.meta                    ，可以返回当前模块的信息
 
 
 
 
 
 
 
 
 
 
 
 
 
。

注意：import.meta只能在模块内使用 
 
 
 
 
 
 
 
 
 
 
 
 
 ，在模块外使用会报错 // util模块 function sum(a,b) { return a * b } function getMeta(){ return import.meta // 获取当前模块的元信息 } export { sum,getMeta } // console.log(import.meta); // import.meta只能在模块内使用




















，在模块外部使用会报错 import(./util.js) .then(el=>{ console.log(el.getMeta()); // {url: http://127.0.0.1:5500/module/import.js, resolve: ƒ} })

案例源码：https://gitee.com/wang_fan_w/es6-science-institute

如果觉得这篇文章对你有帮助             ，欢迎点亮一下star哟