成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript模塊化開發(fā)的那些事

jzzlee / 2789人閱讀

摘要：模塊化開發(fā)在編程開發(fā)中是一個非常重要的概念，一個優(yōu)秀的模塊化項目的后期維護成本可以大大降低。本文主要介紹模塊化開發(fā)的那些事，文中通過一個小故事比較直觀地闡述了模塊化開發(fā)的過程。每個模塊都由一個名為的函數(shù)創(chuàng)建。原文出處模塊化開發(fā)的那些事

模塊化開發(fā)在編程開發(fā)中是一個非常重要的概念，一個優(yōu)秀的模塊化項目的后期維護成本可以大大降低。本文主要介紹JavaScript模塊化開發(fā)的那些事，文中通過一個小故事比較直觀地闡述了模塊化開發(fā)的過程。

小A是某個創(chuàng)業(yè)團隊的前端工程師，負責(zé)編寫項目的Javascript程序。

全局變量沖突

根據(jù)自己的經(jīng)驗，小A先把一些常用的功能抽出來，寫成函數(shù)放到一個公用文件base.js中：

var _ = {
    $: function(id) { return document.getElementById(id); },
    getCookie: function(key) { ... },
    setCookie: function(key, value) { ... }
};

小A把這些函數(shù)都放在_對象內(nèi)，以防過多的全局變量造成沖突。他告訴團隊的其他成員，如果誰想使用這些函數(shù)，只要引入base.js就可以了。

小C是小A的同事，他向小A反映：自己的頁面引入了一個叫做underscore.js的類庫，而且，這個類庫也會占用這個全局變量，這樣一來就會跟base.js中的沖突了。小A心想，underscore.js是第三方類庫，估計不好改，但是base.js已經(jīng)在很多頁面鋪開，不可能改。最后小A只好無奈地把underscore.js占用的全局變量改了。

此時，小A發(fā)現(xiàn)，把函數(shù)都放在一個名字空間內(nèi)，可以減少全局變量沖突的概率，卻沒有解決全局變量沖突這個問題。

依賴

隨著業(yè)務(wù)的發(fā)展，小A又編寫了一系列的函數(shù)庫和UI組件，比方說標簽切換組件tabs.js，此組件需調(diào)用base.js以及util.js中的函數(shù)。

有一天，新同事小D跟小A反映，自己已經(jīng)在頁面中引用了tabs.js，功能卻不正常。小A一看就發(fā)現(xiàn)問題了，原來小D不知道tabs.js依賴于base.js以及util.js，他并沒有添加這兩個文件的引用。于是，他馬上進行修改：

然而，功能還是不正常，此時小A教訓(xùn)小D說：“都說是依賴，那被依賴方肯定要放在依賴方之前啊”。原來小D把base.js和util.js放到tabs.js之后了。

小A心想，他是作者，自然知道組件的依賴情況，但是別人就難說了，特別是新人。

過了一段時間，小A給標簽切換組件增加了功能，為了實現(xiàn)這個功能，tabs.js還需要調(diào)用ui.js中的函數(shù)。這時，小A發(fā)現(xiàn)了一個嚴重的問題，他需要在所有調(diào)用了tabs.js的頁面上增加ui.js的引用?。?！

又過了一段時間，小A優(yōu)化了tabs.js，這個組件已經(jīng)不再依賴于util.js，所以他在所有用到tabs.js的頁面中移除了util.js的引用，以提高性能。他這一修改，出大事了，測試組MM告訴他，有些頁面不正常了。小A一看，恍然大悟，原來某些頁面的其他功能用到了util.js中的函數(shù)，他把這個文件的引用去掉導(dǎo)致出錯了。為了保證功能正常，他又把代碼恢復(fù)了。

小A又想，有沒有辦法在修改依賴的同時不用逐一修改頁面，也不影響其他功能呢？

模塊化

小A逛互聯(lián)網(wǎng)的時候，無意中發(fā)現(xiàn)了一種新奇的模塊化編碼方式，可以把它之前遇到的問題全部解決。

在模塊化編程方式下，每個文件都是一個模塊。每個模塊都由一個名為define的函數(shù)創(chuàng)建。例如，把base.js改造成一個模塊后，代碼會變成這樣：

define(function(require, exports, module) {
    exports.$ = function(id) { return document.getElementById(id); };
    exports.getCookie = function(key) { ... };
    exports.setCookie = function(key, value) { ... };
});

base.js向外提供的接口都被添加到exports這個對象。而exports是一個局部變量，整個模塊的代碼都沒有占用半個全局變量。

那如何調(diào)用某個模塊提供的接口呢？以tabs.js為例，它要依賴于base.js和util.js：

define(function(require, exports, module) {
    var _ = require("base.js"), util = require("util.js");
    var div_tabs = _.$("tabs");
    // .... 其他代碼
});

一個模塊可以通過局部函數(shù)require獲取其他模塊的接口。此時，變量和util都是局部變量，并且，變量名完全是受開發(fā)者控制的，如果你不喜歡，那也可以用base：

define(function(require, exports, module) {
    var base = require("base.js"), util = require("util.js");
    var div_tabs = base.$("tabs");
    // .... 其他代碼
});

一旦要移除util.js、添加ui.js，那只要修改tabs.js就可以了：

define(function(require, exports, module) {
    var base = require("base.js"), ui = require("ui.js");
    var div_tabs = base.$("tabs");
    // .... 其他代碼
});
加載器

由于缺乏瀏覽器的原生支持，如果我們要用模塊化的方式編碼，就必須借助于一個叫做加載器（loader）的東西。

目前加載器的實現(xiàn)有很多，比如require.js、seajs。而JRaiser類庫也有自己的加載器。

原文出處：JavaScript模塊化開發(fā)的那些事

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

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

相關(guān)文章

  • JS異步那些事 五 （異步腳本加載）

    摘要：遵循的是異步模塊定義規(guī)范，遵循的是通用模塊定義規(guī)范。不同的腳本加載這個模塊，得到的都是同一個實例。關(guān)于異步那些事就寫到這里了，很多地方理解的不夠深刻希望大家多多指教。 JS異步那些事 一 （基礎(chǔ)知識）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers）JS異步那些事 五 （異步腳本加載） 異步腳本加載 阻塞性...

    terasum 評論0 收藏0

  • JavaScript單線程事件循環(huán)(Event Loop)那些事

    摘要：概述本篇主要介紹的運行機制單線程事件循環(huán)結(jié)論先在中利用運行至完成和非阻塞完成單線程下異步任務(wù)的處理就是先處理主模塊主線程上的同步任務(wù)再處理異步任務(wù)異步任務(wù)使用事件循環(huán)機制完成調(diào)度涉及的內(nèi)容有單線程事件循環(huán)同步執(zhí)行異步執(zhí)行定時器的事件循環(huán)開始 1.概述 本篇主要介紹JavaScript的運行機制:單線程事件循環(huán)(Event Loop). 結(jié)論先: 在JavaScript中, 利用運行至...

    Shisui 評論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

    LiuRhoRamen 評論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

    stormgens 評論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

    Hujiawei 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<