模块化开发-ES Modules 导入导出的注意事项

针对 ES Modules 的导入和导出有一些需要注意个问题，这些小问题如果没有在意的话，很容易会因为这些小问题而出现一些错误。

• 第一个问题就是我们在使用 export 导出一些成员的时候 export { name, hello } ，这种方式很多人会误认为 export 后面跟上的是一个对象的字面量，导入的时候是对这个对象的结构。实际上这种想法是完全错误的，export {} 与 import {} 这是一种固定的语法。如果想导出一个对象的话可以使用 export default {} , 这个时候模块导出的就是一个对象；
• 第二个问题就是在 ES Module 导出成员的时候，其实导出的是这个成员的引用。就是说 import 引入的是成员变量在内存中的引用地址，而不是对这个值的复制。

// module.js
var name = 'leo'
var age = 18
export {name, age}
setTimeout(function(){
	name = 'jone'
}, 1000)
// app.js
import {name, age} from './module.js'
console.log(name) // leo
setTimeout(function(){
	console.log(name) // jone
}, 1500)

• 第三个问题是我们对外暴露一个成员的时候，其实暴露的是一个引用关系。而这个暴露出的引用关系它是一个只读的，也就是说我们不可以在模块外部修改这个变量。

// module.js
var name = 'leo'
var age = 18
export {name, age}
// app.js
import {name, age} from './module.js'
name = 'jone' // Uncaught TypeError: Assignment to constant variable