摘要:模塊化開發(fā)在編程開發(fā)中是一個(gè)非常重要的概念,一個(gè)優(yōu)秀的模塊化項(xiàng)目的后期維護(hù)成本可以大大降低。本文主要介紹模塊化開發(fā)的那些事,文中通過(guò)一個(gè)小故事比較直觀地闡述了模塊化開發(fā)的過(guò)程。每個(gè)模塊都由一個(gè)名為的函數(shù)創(chuàng)建。原文出處模塊化開發(fā)的那些事
模塊化開發(fā)在編程開發(fā)中是一個(gè)非常重要的概念,一個(gè)優(yōu)秀的模塊化項(xiàng)目的后期維護(hù)成本可以大大降低。本文主要介紹JavaScript模塊化開發(fā)的那些事,文中通過(guò)一個(gè)小故事比較直觀地闡述了模塊化開發(fā)的過(guò)程。
小A是某個(gè)創(chuàng)業(yè)團(tuán)隊(duì)的前端工程師,負(fù)責(zé)編寫項(xiàng)目的Javascript程序。
全局變量沖突根據(jù)自己的經(jīng)驗(yàn),小A先把一些常用的功能抽出來(lái),寫成函數(shù)放到一個(gè)公用文件base.js中:
var _ = { $: function(id) { return document.getElementById(id); }, getCookie: function(key) { ... }, setCookie: function(key, value) { ... } };
小A把這些函數(shù)都放在_對(duì)象內(nèi),以防過(guò)多的全局變量造成沖突。他告訴團(tuán)隊(duì)的其他成員,如果誰(shuí)想使用這些函數(shù),只要引入base.js就可以了。
小C是小A的同事,他向小A反映:自己的頁(yè)面引入了一個(gè)叫做underscore.js的類庫(kù),而且,這個(gè)類庫(kù)也會(huì)占用這個(gè)全局變量,這樣一來(lái)就會(huì)跟base.js中的沖突了。小A心想,underscore.js是第三方類庫(kù),估計(jì)不好改,但是base.js已經(jīng)在很多頁(yè)面鋪開,不可能改。最后小A只好無(wú)奈地把underscore.js占用的全局變量改了。
此時(shí),小A發(fā)現(xiàn),把函數(shù)都放在一個(gè)名字空間內(nèi),可以減少全局變量沖突的概率,卻沒(méi)有解決全局變量沖突這個(gè)問(wèn)題。
依賴隨著業(yè)務(wù)的發(fā)展,小A又編寫了一系列的函數(shù)庫(kù)和UI組件,比方說(shuō)標(biāo)簽切換組件tabs.js,此組件需調(diào)用base.js以及util.js中的函數(shù)。
有一天,新同事小D跟小A反映,自己已經(jīng)在頁(yè)面中引用了tabs.js,功能卻不正常。小A一看就發(fā)現(xiàn)問(wèn)題了,原來(lái)小D不知道tabs.js依賴于base.js以及util.js,他并沒(méi)有添加這兩個(gè)文件的引用。于是,他馬上進(jìn)行修改:
然而,功能還是不正常,此時(shí)小A教訓(xùn)小D說(shuō):“都說(shuō)是依賴,那被依賴方肯定要放在依賴方之前啊”。原來(lái)小D把base.js和util.js放到tabs.js之后了。
小A心想,他是作者,自然知道組件的依賴情況,但是別人就難說(shuō)了,特別是新人。
過(guò)了一段時(shí)間,小A給標(biāo)簽切換組件增加了功能,為了實(shí)現(xiàn)這個(gè)功能,tabs.js還需要調(diào)用ui.js中的函數(shù)。這時(shí),小A發(fā)現(xiàn)了一個(gè)嚴(yán)重的問(wèn)題,他需要在所有調(diào)用了tabs.js的頁(yè)面上增加ui.js的引用!!!
又過(guò)了一段時(shí)間,小A優(yōu)化了tabs.js,這個(gè)組件已經(jīng)不再依賴于util.js,所以他在所有用到tabs.js的頁(yè)面中移除了util.js的引用,以提高性能。他這一修改,出大事了,測(cè)試組MM告訴他,有些頁(yè)面不正常了。小A一看,恍然大悟,原來(lái)某些頁(yè)面的其他功能用到了util.js中的函數(shù),他把這個(gè)文件的引用去掉導(dǎo)致出錯(cuò)了。為了保證功能正常,他又把代碼恢復(fù)了。
小A又想,有沒(méi)有辦法在修改依賴的同時(shí)不用逐一修改頁(yè)面,也不影響其他功能呢?
模塊化小A逛互聯(lián)網(wǎng)的時(shí)候,無(wú)意中發(fā)現(xiàn)了一種新奇的模塊化編碼方式,可以把它之前遇到的問(wèn)題全部解決。
在模塊化編程方式下,每個(gè)文件都是一個(gè)模塊。每個(gè)模塊都由一個(gè)名為define的函數(shù)創(chuàng)建。例如,把base.js改造成一個(gè)模塊后,代碼會(huì)變成這樣:
define(function(require, exports, module) { exports.$ = function(id) { return document.getElementById(id); }; exports.getCookie = function(key) { ... }; exports.setCookie = function(key, value) { ... }; });
base.js向外提供的接口都被添加到exports這個(gè)對(duì)象。而exports是一個(gè)局部變量,整個(gè)模塊的代碼都沒(méi)有占用半個(gè)全局變量。
那如何調(diào)用某個(gè)模塊提供的接口呢?以tabs.js為例,它要依賴于base.js和util.js:
define(function(require, exports, module) { var _ = require("base.js"), util = require("util.js"); var div_tabs = _.$("tabs"); // .... 其他代碼 });
一個(gè)模塊可以通過(guò)局部函數(shù)require獲取其他模塊的接口。此時(shí),變量和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"); // .... 其他代碼 });加載器
由于缺乏瀏覽器的原生支持,如果我們要用模塊化的方式編碼,就必須借助于一個(gè)叫做加載器(loader)的東西。
目前加載器的實(shí)現(xiàn)有很多,比如require.js、seajs。而JRaiser類庫(kù)也有自己的加載器。
原文出處:JavaScript模塊化開發(fā)的那些事
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/85559.html
摘要:遵循的是異步模塊定義規(guī)范,遵循的是通用模塊定義規(guī)范。不同的腳本加載這個(gè)模塊,得到的都是同一個(gè)實(shí)例。關(guān)于異步那些事就寫到這里了,很多地方理解的不夠深刻希望大家多多指教。 JS異步那些事 一 (基礎(chǔ)知識(shí))JS異步那些事 二 (分布式事件)JS異步那些事 三 (Promise)JS異步那些事 四(HTML 5 Web Workers)JS異步那些事 五 (異步腳本加載) 異步腳本加載 阻塞性...
摘要:概述本篇主要介紹的運(yùn)行機(jī)制單線程事件循環(huán)結(jié)論先在中利用運(yùn)行至完成和非阻塞完成單線程下異步任務(wù)的處理就是先處理主模塊主線程上的同步任務(wù)再處理異步任務(wù)異步任務(wù)使用事件循環(huán)機(jī)制完成調(diào)度涉及的內(nèi)容有單線程事件循環(huán)同步執(zhí)行異步執(zhí)行定時(shí)器的事件循環(huán)開始 1.概述 本篇主要介紹JavaScript的運(yùn)行機(jī)制:單線程事件循環(huán)(Event Loop). 結(jié)論先: 在JavaScript中, 利用運(yùn)行至...
摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(méi)有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性,語(yǔ)義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug,和一些定位寫法css js放置位置和原因...
摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(méi)有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性,語(yǔ)義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug,和一些定位寫法css js放置位置和原因...
摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(méi)有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性,語(yǔ)義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug,和一些定位寫法css js放置位置和原因...
閱讀 2732·2023-04-25 14:21
閱讀 1167·2021-11-23 09:51
閱讀 4000·2021-09-22 15:43
閱讀 605·2019-08-30 15:55
閱讀 1550·2019-08-29 11:28
閱讀 2439·2019-08-26 11:44
閱讀 1675·2019-08-23 18:15
閱讀 2874·2019-08-23 16:42