模块化发展:
1.命名空间
库名.类别名.方法名:
var NameSpace = {};
NameSpace.type = NameSpace.type || {};
NameSpace.type.method = function () {};
--------------------------------------------------------------
代码示例：
var MYAPP = MYAPP || {};
MYAPP.namespace = function (ns_string) {
var parts = ns_string.split('.'),
parent = MYAPP,
i;
// strip redundant leading global
if (parts[0] === "MYAPP") {
parts = parts.slice(1);
}
for (i = 0; i < parts.length; i += 1) {
// create a property if it doesn't exist
if (typeof parent[parts[i]] === "undefined") {
parent[parts[i]] = {};
}
parent = parent[parts[i]];
}
return parent;
};
缺点:
如果命名空间被覆盖很难检测到;
必须要记住完整路径名,比较麻烦;
2.commonJS
Modules/1.1.1
一个文件为一个模块
通过module.exports暴露模块接口
通过require 引入模块
同步执行
http://wiki.commonjs.org/wiki/Modules/1.1.1
代码示例：
var EventEmitter = require('events').EventEmitter;
var mixin = require('merge-descripotors');
var proto = require('./application');
var Route = require('./router/router');
var req = require('./request');
var res = require('./response');
/**
* Expose 'carateApplication()'
*/
exports = module.exports = createApplication;
3.AMD (Asynchronous Module Definition)
特点：前置执行
代码示例：
define([
'alpha', //'require',
['require', 'exports', 'beta'] //'dependency'
], function(require, exports, beta) { // require, factory 模块输出
'use strict';
exports.verb = function () {
return beta.verb();
// or:
return require('beta').verb();
}
});
4.CMD （Common Module Definition）
一个文件为一个模块；
使用define来定义一个模块；
使用require来加载一个模块；
尽可能懒执行。
代表作： SeaJS;
https://github.com/cmd.js/specification/blob/master/draft/module.md
代码示例：
//所有模块通过 define 来定义
define(function (require, exports, module) {
//通过 require 引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');
//通过 exports 对外提供接口
exports.doSomething = ...
//或者通过 module.exports 提供整个接口
module.exports = ...
})
5.UMD （Universal Modele Definition）
通用解决方案
三个步骤：
判断是否支持AMD;
判断是否支持CommonJS;
如果都不支持，则定义为全局变量。
代码示例：
6. ES 6 module
一个文件为一个模块
export/ import
代码示例：
// Default exports and named exports
import theDefault, { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import { named1, named2 } from 'src/mylib';
//Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';
//Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';
//Only load the module, don't import anything
import 'src/mylib';
webpack支持：
AMD(requireJS)
ES Modules(recommend)
CommonJS
