JS模块化规范:AMD/CMD/CommonJS

一、模块化规范的由来

随着网页的复杂化,javascript代码也相应变得庞大起来,代码之间的分工合作就尤为重要了,这时候有了模块,我们就可以只关注自己业务的核心逻辑,其他想要实现的功能直接加载他人的模块便足够了。考虑到模块的统一,便有了模块规范化。接下来介绍的模块化规范,包含:CommonJS,AMD,CMD。


二、三者的区别

AMD CMD CommonJS
预先加载 延迟加载 同步加载

三、CommonJS

node.js采用了此规范。一个文件便是一个模块。使用全局方法require()加载某个模块,示例如下(在b模块中引入模块a):
a.js

b.js
之前在对比三者的区别时有提到过,CommonJS是同步加载的,所以需要加载完成后才能执行后续操作,所以比较适合服务器端。对于浏览器端而言,如果同步加载,网络太差的情况下会产生页面“假死”现象。因此,只能选用异步加载。


四、AMD和RequireJS

1.在说明AMD规范之前,我们有必要了解一下RequireJS:简单来说,RequireJS就是为了管理模块间依赖,并且防止页面失去响应而诞生的(可以不用理解,熟练使用后就能明白了)。
2.怎么用:
- 从官网下载最新的版本,然后放在开发目录中的js文件夹下
- 在主页面index.html的最后引入这个js
index.html
async进行异步加载,防止页面假死,IE不识别这个属性,所以还加入了defer。data-main是网页的主模块,require会先加载这个js。
- 编写主模块main.js
主模块需要采用config()和require()方法。首先需要使用require.config()方法对模块的加载行为进行自定义,它需要写在main.js的头部。参数为一个对象,这个对象的path属性指定各个模块的加载路径(路径可以是URL)。shim属性则用来配置不兼容的模块。
config
最后用require方法加载我们的模块,加载时候便使用了AMD规范
require
参数说明:第一个参数是一个Array,其中的成员即需要加载的模块,示例中依赖了jquery,underscore,backbone;第二个参数是回调函数,当前面的模块加载完成后会执行该函数。
如果我们还依赖其他模块,比方说c.js,则c模块的写法如下,需要使用到define()方法:
myLib
参数说明同上,在define()方法的最后需要使用return来暴露该模块的接口。

综上,define()定义模块,require()调用模块,二者共同构成了AMD规范,可适应浏览器环境,并且能够按需加载模块。


五、CMD和SeaJs

在第二节中已经说明过,AMD会预先加载依赖的模块,而CMD是延迟加载的,它是在SeaJS推行时候诞生的,所谓延迟加载就是用到的时候才加载。对比一下:
对比

若有不妥之处,请大家指正。

展开阅读全文

没有更多推荐了,返回首页