ES6模块化

ES6模块化

一、模块化

当应用中的js都以模块来编写的，那这个应用就是模块化的应用。

思想： 模块化思想就是隔离不同的js文件，暴露当前模块中的对象、方法等供其他模块使用。模块的内部数据与实现是私有的,，只是向外部暴露一些接口(方法)与外部其它模块通信。

作用： 使用模块化可以对不同模块功能进行统一管理，降低耦合性，减小同名的影响，可以更好的分离，按需加载，并且有更高的复用性和维护性。

二、其他模块化技术

2.1 CommonJS

commonjs是作用于服务端应用程序，让js程序具有模块化功能的一种语法规范，执行方式是同步且运行时加载。

暴露：

• module.exports：

  module.exports = function add (a, b) { return a + b; }
  module.exports = {
  		........
  }
  

• exports：exports在每个模块中扮演着一个对象，如同每次在模块中默认执行了let exports = module.exports，在exports对象上声明一个要导出去的属性名，将要导出的值赋值进去，但不能直接赋值给exports对象，否则就和module.exports没有关系。

  exports.name='commonjs'
  exports.age=10
  

引入：

• require：

  const result = require('./test')
  

2.2 AMD

AMD (Asynchronous Module Definition) 就是异步加载模块，多用于浏览器端。

在浏览器环境下，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。 而且AMD规范比CommonJS规范在浏览器端实现要来着早。

2.3 CMD

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。

三、ES6模块化

ES6 模块化也是和 commonjs 一样是具有将 js 模块化功能的语法规范，不过只能用于在能识别ES6语法浏览器环境。

ES6的模块暴露和引入可以让我们实现模块化编程，export或export default暴露，import引入变量。ES6一共有3中模块暴露方法。

3.1 分别暴露

分别暴露： 一个一个地将模块中的对象、方法、变量等暴露。

//暴露一个变量
export let a = 10;
 
//暴露一个对象
export const car = {
    brand: "法拉利",
    color: "黑色"
}
 
//暴露一个函数
export function add(a, b) {
    return a + b;
}

引入： 在demo1.js中引入并使用：

// 按需引入【逐个引入】
import { a, car, add } from './module1'
//import {a as a1,car,add} from './module1' //当多个模块中有重名的情况时，可以使用别名
// 全部引入【统一引入】
import * as Demo from './module1'
 
console.log(a);
console.log(car);
console.log(add(1, 2));

引入并暴露：

export { a, car, add } from './module1' 【暴露的为多个单个数据，模块化不合适】

export * as Demo from '../module1' 【暴露的为一个模块】

// 对外暴露的实质是 ： {Demo:{a,getData}}

3.2 统一暴露

统一暴露： 先写好变量、对象、方法等，最后使用export {…}语句暴露。

let a = 10;
 
let car = {
    brand: "法拉利",
    color: "黑色"
}
 
function add(a, b) {
    return a + b;
}
 
//简写形式
export {
    a,
    car,
    add
}
 
//完整形式
/* export {
    a as a1,
    car as car1,
    add as add1
} */

引入：在demo2.js中引入并使用：

// 按需引入【逐个引入】
import { a, car, add } from './module2' //和前面的分别暴露引入的方式一致
// 全部引入【统一引入】
import * as Demo from './module2'
 
console.log(a);
console.log(car);
console.log(add(1, 2));

引入并暴露：

export { a, car, add } from './module2' 【暴露的为多个单个数据，模块化不合适】

export * as Demo from './module2' 【暴露的为一个模块，模块化常用】

// 对外暴露的实质是： {Demo:{ a, car, add }}

3.3 默认暴露

默认暴露： 只能暴露一次。

//注意默认暴露一个文件中只能默认暴露一次
 
//module3.js文件。暴露一个对象
export default {
    name:"张三",
    age:18
}
 
 
 
//module4.js。暴露一个函数
export default function add(a,b){
    return a+b;
}

引入： 在demo3.js中引入并使用，这里注意不要写{}，直接写引入对象即可：

import student from './module3'
import add from './module4'
 
console.log(student);
console.log(add(1,2)); 

引入并暴露： 不可使用简写形式

export {default as Demo} from './module4'
// 暴露的实质是：{Demo:{add}}

注意：

• import引入的文件会自动收集在文件的最上方，并按照引入的顺序执行。
• 默认暴露在进行引入并暴露时不能进行简写。

四、CommonJS与ES6模块化的区别

• commonjs导出是值的拷贝；es6模块化是导出的值的引用。
• commonjs加载是运行时加载；而es6模块化是编译时加载，会比commonjs更加高效。（CommonJS加载的是一个对象（module.exports属性），该对象只有在脚本运行完才会生成，而ES6模块不是对象，他的对外接口是一种静态定义，在代码静态解析阶段就会完成）