一、js模塊化

定名空間
commonJS
AMD/CMD/UMD
ES6 module

二、定名空間

庫名.類別號.要領名

var NameSpace = {}

NameSpace.type = NameSpace.type || {}

NameSpace.type.method = function () {

}

三、commonJS範例

一個文件為一個模塊，經由過程module.export暴露快接口，經由過程require引入模塊，同步實行

commonJS 文檔

示例：

const Router = require('./router/route')

export = module.exports = createApplication;

四、AMD範例

Async Module Definition

運用define定義模塊

運用require加載模塊

RequireJS

依靠前置，提早實行

AMD範例文檔

示例：

define(
    // 模塊名字
    "alpha",
    // 模塊輸出
    ["require", "exports", "beta"],
    // 模塊輸出
    function (require, exports, beta) {
        exports.verb = function () {
            return beta.verb();
            return require("beta").verb();
        }
    }
)

define(
    ["a", "b", "c"],
    function (a, b, c) {
        // 等於在最前面聲明並初始化了要用到的模塊
        if (false) {
            // 縱然沒用到模塊b，但b照樣提早實行了
            b.foo();
        }
    }
)

五、CMD

Common module definition

一個文件為一個模塊

運用define來定義一個模塊

運用require來加載一個模塊

SeaJS

盡量懶加載

示例：

// 一切模塊都經由過程define定義
define(function (require, exports, module) {
    // 經由過程require引入模塊
    var $ = require('jquery');
    var Spining = 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 {}
}))

七、ESM

esmascript module

一個文件一個模塊

export / import

示例：

// 加載模塊的變量或要領
import theDefault, {named1, named2} from 'src/mylib'
import theDefault from 'src/mylib'
import {named1, named2} from 'src/mylib'

// 引入模塊進來而且將named1定名為Named1
import {named1 as myNamed1} from 'src/mylib'

// 加載模塊里悉數的變量和要領
import * as mylib from 'src/mylib';

// 只加載，不做任何處置懲罰
import 'src/mylib'

// 定義一個模塊，暴露的接口
export var name1 = "Bob";
export let name2 = "Bob";
export let NAME3 = "Bob";

export function myFunc() {}
export class MyClass {}

// 能夠挑選暴露
const USERNAME = "Bob";
function myFunc() {}

export {USERNAME, myFunc};
export {USERNAME as NAME, myFunc as Fn};

// 引入其他文件的變量或要領，再暴露出去
export * from "src/other_module";
export {foo, bar} from 'src/other_module';
export {foo as myFoo, bar} from 'src/other_module';

export {foo as myFoo, bar} from 'src/other_module'

八、webpack支撐

AMD(require)

ES Modules 引薦

CommonJS

九、CSS模塊化

OOCSS
SMACSS
Atomic CSS
MCSS
AMCSS
BEM
CSS modules

Atomic CSS 每一個類都是自力的

MCSS 多層級的css

AMCSS 針對屬性來寫css

BEM：Block，Element，Modifier

<!-- BEM -->
<button class="button"> 
    Default Button 
</button>

<button class="button button--state-success">
    Success Button 
</button>

<button class="button button--state-danger">
    Danger Button 
</button>