CommonJs, AMD/RequireJs,CMD/seajs

JavaSript模块化

在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。
模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。
可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”。
那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。
首先,既然是模块化设计,那么作为一个模块化系统所必须的能力:

  1. 定义封装的模块。
  2. 定义新模块对其他模块的依赖。
  3. 可对其他模块的引入支持。

commonjs

commonjs起初是服务端模块的规范,nodejs就是采用这个规范。
CommonJs原来是叫ServerJs,从名字可以看出是专攻服务端的,为了统一前后端而改名CommonJs。它的规范是一个单独的文件就是一个模块。加载模块使用require方法,该方法读取文件并执行,最后导出一个exports对象
例如:
// foo.js

//私有变量
var test = 123;
function foobar(){
   this.foo = function(){
 
    }
    this.bar = function(){

    }
}
var foo = new foobar()
//exports对象上的方法和变量是公有的。
exports.foo = foo;

// require 方法默认读取js文件,所以可以省略js后缀

var test = require('./foo').foo;
test.bar();

commonjs是同步加载模块,所以加载完成后才能执行后面的操作。服务端require一个模块,加载的模块文件一般都是已经存在本地硬盘,所以加载起来比较快,消耗的时间可以忽略,就没有必要采用异步方式的来加载。但是如果我们考虑到浏览器端的话,就肯定知道,同步加载,阻塞页面的渲染,造成页面白屏,或者卡死等现象,对于用户体验肯定是不友好的。

另外,资源的加载方式与服务端完全不同,在浏览器端,需要从服务端来下载这个文件,然后运行里面的代码才能得到API,需要花费一个http请求,也就是说,require后面的一行代码,需要资源请求完成才能执行。由于浏览器端是以插入<script>标签的形式来加载资源的(ajax方式不行,有跨域问题),没办法让代码同步执行,所以像commonjs那样的写法会直接报错。所以就有了AMD,CMD。

AMD(Asynchromous Module Definition)

字面意思”异步模块定义”,就是一种规范。依赖前置(依赖在使用之前都必须提前加载)。requirejs可以简单理解为AMD规范的一种实现。
AMD写模块的api如下:
define(id,dependencies,factory);
//通过数组引入依赖,回调函数通过形参传入依赖

// 依赖一开始就写好 
define([‘someModule1’,’someModule2’],function(someModule1,someModule2){ 
function foo(){ 
//something 
someModule1.test(); 
} 
return {foo:foo}; 
}); 

CMD(Common Module Definition)

CMD规范是国内发展出来的,CMD是SeaJS在推广过程中对模块定义的规范化产出。
CMD推崇:

  • 一个文件一个模块,所以经常就用文件名作为模块id
  • 依赖就近,所以一般不在define的参数中写依赖,在factory中写
    factory有三个参数:function(require, exports, module)

require是 factory 函数的第一个参数
require(id) 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口
exports 是一个对象,用来向外提供模块接口
module 是一个对象,上面存储了与当前模块相关联的一些属性和方法

//CMD

// 定义模块 myModule.js
define(function(require, exports, module) {
	//依赖可以就近书写 
var $ = require('jquery.js')
$('div').addClass('active');
});
// seajs.use实现模块系统的加载启动   加载模块 
seajs.use(['myModule.js'], function(my){
});

AMD,CMD区别

最明显的区别就是对依赖模块的执行时机处理不同

AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块,并且所有的依赖模块都是先执行。
对应的require.js在js程序中的依赖模块的执行顺序和书写顺序不一定一致,哪个先下载下来,哪个先执行。所有模块都加载执行完后会进入require的回调函数,执行主逻辑。
CMD推崇就近依赖,是一种按需加载的模式,定义一个模块的时候不需要立即制定模块之间的依赖模块,只有在用到某个模块的时候再去require
对应的seajs在js程序中的执行顺序是按照顺序结构的,当遇到require某模块的时候再去调用某些模块。

共同点:
都是异步加载模块。

RequireJS和SeaJS与CommonJS的比较(严格意义上前两者与后者不该放在一起比较,因为前两者是规范的具体实现,而后者是一种规范)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值