什么是模块?
块的内部数据与实现是私有的,只是向外部暴露一些接口与外部其他模块通信
采用 CommonJS 模块规范
在服务器端,模块的加载是运行时同步加载的,在浏览器端,模块需要提前编译打包处理。
CommonJS。CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。
基本语法:
暴露模块:module.exports = value 或 exports.xxx = value
引入模块:require(xxx),如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径
局限:不适用于浏览器环境,require操作是同步的。这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。
但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于”假死”状态。
因此,浏览器端的模块,不能采用”同步加载”(synchronous),只能采用”异步加载”(asynchronous)
采用AMD规范
特点:非同步加载模块,允许指定回调函数
require.js。
CMD
特点:专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行
Sea.js
CMD与AMD区别
UMD
UMD是AMD和CommonJS的糅合。UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。再判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
ES6模块化
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西
ES6 Module默认目前还没有被浏览器支持,需要使用babel
导入:import
导出:export {<变量>},export default
ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。