前端模塊化規範

1、js模塊化

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

2、命名空間

庫名.類別名.方法名

var NameSpace = {}

NameSpace.type = NameSpace.type || {}

NameSpace.type.method = function () {

}

3、commonJS規範

一個文件爲一個模塊，經過module.export暴露快接口，經過require引入模塊，同步執行

commonJS 文檔

示例：

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

export = module.exports = createApplication;

4、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();
        }
    }
)

5、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 =
})

6、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 {}
}))

7、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'

8、webpack支持

AMD(require)

ES Modules 推薦

CommonJS

9、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>