前端模块化规范

什么是模块?

块的内部数据与实现是私有的,只是向外部暴露一些接口与外部其他模块通信

采用 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 规范,成为浏览器和服务器通用的模块解决方案。

posted @ 2019-06-11 14:00  但沉默。  阅读(310)  评论(0编辑  收藏  举报