前端模組化規範

樑鳳波發表於2019-02-16
前端

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

相關文章