文章目录
  1. 1. JS 的模块化规范
  2. 2. CommonJS
    1. 2.1. 简介
    2. 2.2. 标准
    3. 2.3. 发展
  3. 3. 写在最后
  4. 4. 参考

本系列博客更像是读blog读文档的笔记,从诸多资料中梳理出了自己的认识。

JS 的模块化编程(一)- 模块的基本写法
JS 的模块化编程(二)- CommonJS
JS 的模块化编程(三)- AMD
JS 的模块化编程(四)- CMD
JS 的模块化编程(五)- AMD 和 CMD 的区别
JS 的模块化编程(六)- requireJS

JS 的模块化规范

由于 JS 本身没有内置的模块系统(ES6之前),于是就有了 JS 的模块化规范。模块化规范的目的就是统一模块化的编写方式,比如不同的 java 团队总可以用 import 的方式来加载彼此写的代码,C# 可以用 using 来加载。

目前,比较通行的 JS 模块化规范,有三个:CommonJS/AMD/CMD。下面我们来分别介绍。

CommonJS

简介

CommonJS 是一个旨在构建涵盖web服务器端、桌面应用、命令行app和浏览器JS的JS生态系统。

标准

CommonJS 的标准是符合 module1.1 规范的。CommonJS 的标准如下:

1.require() 全局方法,用来加载模块
假设我们要导入 math 模块(math.js 是一个单独的文件)

1
2
var math = require('math'); //导入模块
math.add(2,5); //使用模块的方法

2.exports 全局变量,用来导入模块的方法
我们来看下在 math.js 中如何定义上面用到的 add() 方法的

1
2
3
4
5
6
7
8
9
10
11
12
//math.js
exports.add = function(){
var sum=0,
i=0,
args=arguments,
len=args.length;
while(i<len){
sum += args[i];
i++;
}
return sum;
}

3.模块里还有变量 module,它有一个只读的id属性,还有一个uri属性,还有其它的一些命名规范。更多内容可查看 CommonJS 规范的文档页面

发展

其实,CommonJS 最早是叫 ServerJS,它是伴随着服务器端的一个 JS 项目而产生的,又伴随着 node.js 的火爆发展而成名的。Module1.0 规范在 node.js 上实践的很好,但由于知道自身在浏览器中的不足,CommonJS 社区便于2009年8月把它的名字改成了 CommonJS,意是想统一服务器端和浏览器端。

通过 CommonJS 的规范和代码可以看出,require() 是同步的,模块系统需要同步读取模块文件的内容,并编译执行以得到模块的接口。在服务端,比如 node.js 中,这一般来说没什么问题,请求的文件(即要加载的模块)都在存放在本地硬盘,可以同步加载,等待的时间就是硬盘读取的时间。

但是,在浏览器端,同步就有问题了,因为浏览器中模块都放在服务器端。要请求文件,就要有网络请求,而一牵扯到网络请求,时间就不可控了。若依然同步加载模块,万一网络请求的时间太长就会导致浏览器假死。

要实现浏览器端的,就要制定新的标准,而在制定新标准的过程中,CommonJS 社区中有了分歧,于是就分出了 AMD 规范。

写在最后

模块化规范其实都是为了 JS 的模块化开发而服务的,模块化是前端工程化的基石。

此处引用 ServerJS(即 CommonJS 的前身)创始人 Kevin Dangoor 的一句话作为结尾:
“What I’m describing here is not a technical problem. It’s a matter of people getting together and making a decision to step forward and start building up something bigger and cooler together.”

参考

https://en.wikipedia.org/wiki/CommonJS
http://wiki.commonjs.org/wiki/CommonJS

http://wiki.commonjs.org/wiki/Modules/1.1

文章目录
  1. 1. JS 的模块化规范
  2. 2. CommonJS
    1. 2.1. 简介
    2. 2.2. 标准
    3. 2.3. 发展
  3. 3. 写在最后
  4. 4. 参考