国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端模塊化規(guī)范

lsxiao / 1463人閱讀

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

一、js模塊化 
命名空間
commonJS
AMD/CMD/UMD
ES6 module
二、命名空間

庫名.類別名.方法名

var NameSpace = {}

NameSpace.type = NameSpace.type || {}

NameSpace.type.method = function () {

}
三、commonJS規(guī)范

一個文件為一個模塊，通過module.export暴露快接口，通過require引入模塊，同步執(zhí)行

commonJS 文檔

示例：

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

export = module.exports = createApplication;
四、AMD規(guī)范 
Async Module Definition

使用define定義模塊

使用require加載模塊

RequireJS

依賴前置，提前執(zhí)行

AMD規(guī)范文檔

示例：

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還是提前執(zhí)行了
            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"

// 引入模塊進(jìn)來并且將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 每個類都是獨(dú)立的

MCSS 多層級的css

AMCSS 針對屬性來寫css

BEM：Block，Element，Modifier

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95553.html

相關(guān)文章

  • 前端模塊化的意義

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

    ThreeWords 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

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

    princekin 評論0 收藏0

  • 微內(nèi)核架構(gòu)在大型前端系統(tǒng)中的應(yīng)用

    摘要：微內(nèi)核架構(gòu)在大型前端系統(tǒng)中的應(yīng)用只討論架構(gòu)，不討論框架名詞解釋由一群盡可能將數(shù)量最小化的軟件程序組成，他們負(fù)責(zé)提供實(shí)現(xiàn)一個操作系統(tǒng)所需要的各種機(jī)制和功能。而微內(nèi)核架構(gòu)已經(jīng)在操作系統(tǒng)和很多的產(chǎn)品的后端服務(wù)及前端中經(jīng)過了很多的實(shí)踐。 微內(nèi)核架構(gòu)在大型前端系統(tǒng)中的應(yīng)用 只討論架構(gòu)，不討論框架 1、名詞解釋 由一群盡可能將數(shù)量最小化的軟件程序組成，他們負(fù)責(zé)提供、實(shí)現(xiàn)一個操作系統(tǒng)所需要的各種機(jī)制...

    li21 評論0 收藏0

  • 前端模塊化（一）nodeJS中的CommonJS規(guī)范

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

    Charlie_Jade 評論0 收藏0

  • 前端模塊化開發(fā)

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

    tianhang 評論0 收藏0

  • 前端、HTML+CSS+JS編寫規(guī)范（終極版）

    摘要：文檔規(guī)范和文檔必須采用編碼格式文檔必須使用的標(biāo)準(zhǔn)文檔格式編寫規(guī)范和的標(biāo)簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結(jié)構(gòu)清晰，必須合理的進(jìn)行代碼縮進(jìn)文件禁止樣式表內(nèi)引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規(guī)范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標(biāo)準(zhǔn)文檔格式； HTMLCSS編寫規(guī)范...

    jsyzchen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<