模塊化發(fā)展:
1.命名空間
庫(kù)名.類別名.方法名:?
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;
? ? ? ? };
缺點(diǎn):?
如果命名空間被覆蓋很難檢測(cè)到;
必須要記住完整路徑名,比較麻煩;
2.commonJS
Modules/1.1.1
? ? 一個(gè)文件為一個(gè)模塊
通過(guò)module.exports暴露模塊接口
通過(guò)require 引入模塊
同步執(zhí)行
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)
特點(diǎn)：前置執(zhí)行
代碼示例：
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）
一個(gè)文件為一個(gè)模塊；
使用define來(lái)定義一個(gè)模塊；
使用require來(lái)加載一個(gè)模塊；
盡可能懶執(zhí)行。
代表作： SeaJS;
https://github.com/cmd.js/specification/blob/master/draft/module.md
代碼示例：?
//所有模塊通過(guò) define 來(lái)定義
define(function (require, exports, module) {
? ? //通過(guò) require 引入依賴
? ? var $ = require('jquery');
? ? var Spinning = require('./spinning');
? ? //通過(guò) exports 對(duì)外提供接口
? ? exports.doSomething = ...
? ? //或者通過(guò) module.exports 提供整個(gè)接口
? ? module.exports = ...
})
5.UMD （Universal Modele Definition）
通用解決方案
三個(gè)步驟：
? ? 判斷是否支持AMD;
????判斷是否支持CommonJS;
? ? 如果都不支持，則定義為全局變量。
代碼示例：
6. ES 6 module
一個(gè)文件為一個(gè)模塊
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
