js之模块化(3)

随着ES6 Module的出现，我们在项目中也大概率的采用了ES6 Module的写法，主要是采用import 和export关键字，进行引入和导出。具体语法课参考https://www.jianshu.com/p/e595c376573e
当然后来还出现了动态导入，也就是懒加载可参考
https://www.jianshu.com/p/e595c376573e

ES6 Module和Commonjs的区别

commonjs只能在运行的时候，确定导出的内容，但是ES6 Module是在编译阶段，确定依赖关系，也就是说编译时加载。正因为如此，import具有提升效果。

所以下面写法是合法的

const age = getAge()
import { getAge } from 'a.js'

因为ES6 Module是在编译的时候加载，所以我们在引入的时候不能使用表达式和变量。因为这些是要在运行时才能得到结果的。

// 报错
let module = 'a.js'
import { name } from module

前几篇帖子有提到过commonjs中，使用require引入，是对导出值的深拷贝，也就是说之后，模块再怎么变化，也不会影响到该值。
之前的例子：

// a.js
var name = 'morrain'
var age = 18
exports.name = name
exports.age = age
exports.setAge = function(a){
    age = a
}

// b.js
var a = require('a.js')
console.log(a.age) // 18
a.setAge(19)
console.log(a.age) // 18

对于ES6 Module写法

//a.js
var name = 'morrain'
var age = 18
setAge = function(a){
    age = a
}
export {name,age,setAge}
//b.js
import * as a from 'a.js';
console.log(a.age) // 18
a.setAge(19)
console.log(a.age) // 19

【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】