参考文章:
http://es6.ruanyifeng.com/#docs/module-loader
https://juejin.im/post/5bea425751882508851b45d6
https://www.jianshu.com/p/b7db6224a4aa
首先,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。所以写大项目中,因为大项目依赖关系非常复杂,而还有全局变量污染还有命名冲突的危险,所以JavaScript之前一直被人看作是“玩具语言”(没有像Python简洁的import)。
后来出现了四种规范:
AMD (require.js)
CMD (sea.js)
CommonJS (node.js)
ES6 模块 (原生JS)
因为AMD和CMD规范已经逐渐被淘汰,所以我们只来学习CommonJS和ES6模块。
首先说明,es6默认是开启严格模式,有着如下限制:
变量必须声明后再使用
函数的参数不能有同名属性,否则报错
不能使用with语句
不能对只读属性赋值,否则报错
不能使用前缀 0 表示八进制数,否则报错
不能删除不可删除的属性,否则报错
不能删除变量delete prop,会报错,只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字(比如protected、static和interface)
CommonJS
Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module、exports、require、global。
实际使用时,用module.exports定义当前模块对外输出的接口(不推荐直接用exports),用require加载模块。
CommonJS 规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。这是因为服务器中模块都在磁盘中,读取非常快。
但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式(因为网络原因),因此浏览器端一般采用 AMD 规范或者ES6加载。
ES6加载
语法可以浏览阮一峰老师
http://es6.ruanyifeng.com/#docs/module
主要就是export和import两个关键字
在测试时有需要注意的地方:
node不支持ES6加载,在node环境使用会报错,所以暂时只能用在浏览器端。
使用时,script标签要加上type="module"属性,否则会报错
Uncaught SyntaxError: Unexpected token {
最后测试要有服务器环境,反则会报跨域错误,这可能是chrome浏览器防止XSS攻击,建议使用Firefox浏览器(没测试)或者使用express简单的搭个服务器,也可以
npm install http-server -g
const firstName = 'Michael'
const lastName = 'Jackson'
const year = 1958
const isLove = () => console.log('当然不是啦')
export {firstName, lastName, year, isLove}
<script type="module">
import {firstName, lastName, year, isLove} from './export.js';
isLove()
console.log(year)
</script>
打开控制台就可以看到输出了。
ES6 模块与 CommonJS 模块的差异
建议直接阅读阮一峰老师的书籍
http://es6.ruanyifeng.com/#docs/module-loader#ES6-模块与-CommonJS-模块的差异
主要差异:
CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载,ES6 模块是编译时输出接口
第二个差异是因为 CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成
简单的说,CommonJS会缓存值,而ES6会动态更新值。
还有其他内容比较深入,请阅读阮一峰老师的ES6入门。
我喜欢JavaScript的最大原因就是ES6的简洁强大(像Python,哈哈)