前端模塊化規范

xiaolinbang 發布于2019-08-02 16:03 / 3251人閱讀

摘要：一模塊化命名空間二命名空間庫名類別名方法名三規范一個文件為一個模塊，通過暴露快接口，通過引入模塊，同步執行文檔示例四規范使用定義模塊使用加載模塊依賴前置，提前執行規范文檔示例模塊名字模塊輸出模塊輸出等于在最前面聲明并初始化了要用到的模塊即使

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

GPU云服務器云服務器前端規范前端規范文檔前端模塊化前端模塊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54568.html

前端模塊化的意義

摘要：而前端要使用模塊化的原因或者要解決的問題就是解決命名沖突管理依賴提高代碼的可復用性相關模塊化規范常見的規范有規范規范是在推廣過程中對模塊定義的規范化產出，主要用于瀏覽器端。目前的各類全局變量都可以模塊化。開發中明顯可以感覺到加載一個HTML需要依賴很多的JS文件依賴，比如到一定階段的HTML頁面，尾部就是這樣的：隨著所需功能越來越多，我們就需引入更多的JS依...

ThreeWords 2019-08-26 10:59 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
微內核架構在大型前端系統中的應用

摘要：微內核架構在大型前端系統中的應用只討論架構，不討論框架名詞解釋由一群盡可能將數量最小化的軟件程序組成，他們負責提供實現一個操作系統所需要的各種機制和功能。而微內核架構已經在操作系統和很多的產品的后端服務及前端中經過了很多的實踐。微內核架構在大型前端系統中的應用只討論架構，不討論框架 1、名詞解釋由一群盡可能將數量最小化的軟件程序組成，他們負責提供、實現一個操作系統所需要的各種機制...

li21 2019-06-24 18:12 評論0 收藏0
前端模塊化（一）nodeJS中的CommonJS規范

摘要：要想讓模塊再次運行，必須清除緩存。模塊加載的順序，按照其在代碼中出現的順序。最近參加了公司開展的一次培訓，結構性思維培養。序言模塊化，大家用vue，react等東西，都會接觸到像exports，module.exports，export，export default，require，define，import等等字段，感覺很多人對于這些東西還是分不清，概念非常的模糊，便想著寫這么一...

Charlie_Jade 2019-08-22 18:10 評論0 收藏0
前端模塊化開發

摘要：來源于阿賢博客模塊化今天給大家寫一篇關于前端模塊化開發知識點。前端模塊化開發那點歷史模塊化是指在解決某個復雜混雜問題時，依照一種分類的思維把問題進行系統性的分解以之處理。來源于：阿賢博客 javascript模塊化今天給大家寫一篇關于前端模塊化開發知識點。前端模塊化開發那點歷史模塊化：是指在解決某個復雜、混雜問題時，依照一種分類的思維把問題進行系統性的分解以之處理。模塊...

tianhang 2019-08-23 16:44 評論0 收藏0
前端、HTML+CSS+JS編寫規范（終極版）

摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

jsyzchen 2019-08-01 18:15 評論0 收藏0