模块机制

基于网上各种乱七糟八的AMD/CMD,模块机制。自己做的一个总结。

在Web2.0流行的过程中,JS从表单校验跃迁到应用开发的级别。在此过程中,我们来看看他的发展过程 :

工具(浏览器兼容)->组件(功能模块)->框架(功能模块组织)->应用(业务组织模块)
经过不断的后天努力,JS不断地被类聚和抽象,以更好地组织业务逻辑。从另外一个角度而言,我大JS暴露出了先天缺乏的功能:模块。在其他高级语言中:Java有类,Python有import.Ruby有require.PHP有include和require.开发人员一般用命名空间等方式人为约束代码,以达到安全和易用。,把独立的逻辑放在单文件中,被其他文件引用。

一、CommonJS规范(同步)

1. 出发点

希望JS在任何地方都能运行,拆分原本巨大的文件

2.JS本身的缺陷
  1. 没有模块系统
  2. 标准库缺少
  3. 没有标准接口
  4. 缺乏包管理系统(EXM?)

CommonJs规范是初步草案,这些规范涵盖了模块,二进制,Buffer,字符集编码。I/O流,进程环境,文件系统,套结字,单元测试、web服务器网关接口,包管理等.

3.CommonJS
  1. 模块引用 CommonJS模块就是对象。输入时必须查找对象属性

    1
    var math = require("math");
  2. 模块定义

    1
    2
    3
    exports.add = function(a,b){
    return a+b;
    }

一、前后端公用模块

JS比其他语言更有优势的是模块可以前后端实现公用,但前后端的环境略有差异。

模块的侧重点

前后端JS在HTTP两边,扮演的角色不同。

浏览器端的JS:同一个服务器分发到不同的客户端;瓶颈:带宽

客户端的JS:相同代码多次执行。瓶颈:CPU和内存等资源

同步加载:会使浏览器的加载速度。

1. AMD规范

采用异步加载模块,模块的加载不影响后面的语句的运行。所有依赖这个模块的语句都定义在一个回调函数中。等加载完成后这个函数才会运行。更适合浏览器。

1
define(id?,dependencies?,fac)

2. CMD规范

与AMD的区别:定义模块和依赖引入的部分。AMD需要在声明的时候指定所有的依赖,通过形参传递依赖到模块中。 define函数fac参数,也可以是一个函数,对象或字符串。

1
2
3
4
define({ "foo": "bar" });
define(['dep1', 'dep2'], function(dep1, dep2) {
return function() {}
})

在依赖部分:

1
2
3
define(function(require, exports, module) {
//module codes goes here
});

3. UMD规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 ;(function(name, def) {
//检查上下文环境是否为AMD或CMD
var hasDefine = typeof def === 'function',
//检查是否为Node环境
hasExports = typeof module != "undefined" && module.exports;
if (hasDefine) {
//AMD 或CMD
define(def)
} else if (hasExports) {
//定义为普通的Node模块
module.exports = def();
} else {
//挂载在window变量中
this[name] = def();
}
})('hello', function() {
var hello = function() {};
return hello;
})