命名空间
库名.类别名.方法名
var NameSpace = {}
NameSpace.type = NameSpace.type || {}
NameSpace.type.method = function () {}
YUI
YUI.add('davglass', function (Y) {
Y.davglass = function () {
Y.log('Dav was here!')
};
}, '3.4.0', {
requires: ['harley-davidson', 'mt-dew']
});
YUI().use('davglass', function (Y) {
Y.davglass()
})
COMMONJS
Modules/1.1.1
一个文件为一个模块
通过module.exports暴露模块接口
通过require引入模块
同步执行
规范
var EventEmitter = require('events').EventEmitter;
var mixin = require('merge-desciptors');
var proto = require('./application');
var Route = require('./router/route');
var Router = require('./router');
var req = require('./request');
var res = require('./response');
/**
* Expose `createAppliction()`.
*/
exports = module.exports = createApplication;
AMD/CMD/UMD
AMD(Async Module Definition)
使用define定义模块
使用require加载模块
RequireJS
依赖前置,提前执行
规范
define(
// 模块名
"alpha",
// 依赖
["require", "exports", "beta"],
// 模块输出
function (require, exports, beta) {
exports.verb = function () {
return beta.verb()
// Or:
Create missing node module:'beta'
return require("beta").verb();
}
}
)
define(
["a", "b", "c", "d", "e", "f"],
function (a, b, c, d, e, f) {
// 等于在最前面声名并初始化了要用到的所有模块
if (false) {
// 即便压根儿没用到某个模块 b,但 b 还是提前执行了
b.foo()
}
}
)
CMD(Common Module Definition)
一个文件为一个模块
使用define 来定义一个模块
使用require 来加载一个模块
SeaJS
尽可能的懒执行
规范
define(function (require, exports, module) {
// 通过 require 引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');
// 通过 exports 对外提供接口
exports.doSomething = ...
// 或者通过 module.exports 提供整个接口
module.exports = ...
})
UMD(Universal Module Definition)
通用解决方案
三个步骤
- 判断是否支持AMD
- 判断是否支持CommonJS
- 如果都没有,使用全局变量
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.returnExports = factory();
}
}(this, function () {
return {}
}));
ES 6 module(Ecmasciprt Module)
一个文件一个模块
export 暴露接口/ import 引用
// Dfault exports and named exports
import theDefault, { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import { named1, named2 } from 'src/mylib';
// Renaming: import named as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';
// Importing the module as an object
// (with one property per named export)
import * aslib from 'src/mylib';
// Only load the module, don't import anything
import 'src/mylib';
export var myVar1 = '';
export let myVar2 = '';
export const MY_CONST = '';
export function myFunc() {};
export function* myFeneratorFunc() {};
export class MyClass {}
export default 123;
export default function (x) {
return x
};
export default x => x;
export default calss {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
const MY_CONST = '';
function myFunc() {}
export { MY_CONST, myFunc };
export { MY_CONST as THE_CONST, myFunc as theFunc };
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
// Export other_module's foo as myFoo
export { foo as myFoo, bar } from 'src/other_module';
webpack支持的是
- AMD(RequireJS)
- ES Modules(推荐的)
- CommoneJS
主流的ES Modules和CommonJS。其他的了解一下就ok。
网友评论