JS 模块化

命名空间

库名.类别名.方法名

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)

通用解决方案
三个步骤

1. 判断是否支持AMD
2. 判断是否支持CommonJS
3. 如果都没有，使用全局变量

(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支持的是

1. AMD(RequireJS)
2. ES Modules（推荐的）
3. CommoneJS

主流的ES Modules和CommonJS。其他的了解一下就ok。