資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)單的門(mén)面模式實(shí)例事件綁定函數(shù)門(mén)面模式的作用是將復(fù)雜的接口進(jìn)行包裝，變成一個(gè)便于使用的接口。還是以事件相關(guān)為例，事件綁定中還有兩個(gè)常用的分別是和。
門(mén)面模式是什么，與其我去用笨拙的語(yǔ)言去解釋，不如看下面這張圖，曾經(jīng)在網(wǎng)上很火的一張圖片，說(shuō)的是一位兒子為他的爸媽設(shè)置的電腦桌面。
有了這些起好名字的快捷方式，身為電腦盲的爸媽就不需要去了解何為瀏覽器，何為播放器了，照著指示點(diǎn)就是了。這些快捷方式相當(dāng)于在用戶和計(jì)算機(jī)程序之間架起了一座橋梁，不需要每個(gè)用戶都像電影里的黑客一樣敲著一行行的代碼才能使用計(jì)算機(jī)的功能。這就是門(mén)面模式的意義——把復(fù)雜的功能（接口）經(jīng)過(guò)包裝，讓用戶（開(kāi)發(fā)者）能間接地，比較簡(jiǎn)單地去使用（調(diào)用）它們，簡(jiǎn)化使用（開(kāi)發(fā)）的難度。
簡(jiǎn)單的門(mén)面模式實(shí)例——事件綁定函數(shù)門(mén)面模式的作用是將復(fù)雜的接口進(jìn)行包裝，變成一個(gè)便于使用的接口。在很多的JavaScript庫(kù)中都能找到門(mén)面模式的應(yīng)用，例如jQuery，我們?cè)谟胘Query進(jìn)行事件綁定的時(shí)候，簡(jiǎn)單的調(diào)用bind()，on()等方法就可以了，并不用對(duì)不同瀏覽器的兼容性問(wèn)題進(jìn)行處理，兼容性的處理在jQuery內(nèi)部已經(jīng)完成，就是通過(guò)門(mén)面的思想。
我們就以事件綁定為例，來(lái)展現(xiàn)一下門(mén)面模式是什么：
// 實(shí)現(xiàn)一個(gè)通用的，跨多種瀏覽器的時(shí)間綁定函數(shù)
function addEvent(el, type, fn) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
} else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
} else {
el["on" + type] = fn;
}
}
通過(guò)能力檢測(cè)，對(duì)瀏覽器支持的API進(jìn)行判斷，自動(dòng)調(diào)用有效的事件綁定API來(lái)綁定時(shí)間。開(kāi)發(fā)者在綁定時(shí)間的時(shí)候，就不需要寫(xiě)冗長(zhǎng)的判斷代碼，直接專注于業(yè)務(wù)就好，這是門(mén)面模式帶來(lái)的最直接的便利。
這里門(mén)面模式的作用是處理瀏覽器的兼容性，門(mén)面模式的另一個(gè)作用是對(duì)多個(gè)函數(shù)進(jìn)行組合管理。
還是以事件相關(guān)API為例，事件綁定中還有兩個(gè)常用的API分別是event.stopPropagation()和event.preventDefault()。這兩個(gè)API在IE瀏覽器中是不兼容的，在IE中它們分別對(duì)應(yīng)的是event.cancelBubble = true和event.returnValue = false。通過(guò)門(mén)面模式我們的目標(biāo)是：
沒(méi)有蛀牙~~~
以及：
+---------------+ +------------+ +--------------+ +-----------+
|stopPropagation| |cancelBubble| |preventDefault| |returnValue|
+---------------+ +------------+ +--------------+ +-----------+
| | | |
+--------------------+ +------------------------+
↓ ↓
+---------------+ +--------------+
|stopPropagation| |preventDefault|
+---------------+ +--------------+
| wrapped in |
+-------------------------------------------+
↓
+-----------------------------+
| ╭ stopPropagation |
| stopEvent |
| ╰ preventDefault |
+-----------------------------+
通過(guò)代碼事件就是這樣：
var eventUtil = {
stopPropagation: function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
preventDefault: function(ev) {
if (ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
},
stopEvent: function(ev) {
eventUtil.stopPropagation(ev);
eventUtil.preventDefault(ev);
}
}
這樣，在事件綁定函數(shù)中，如果需要取消冒泡和默認(rèn)事件的話，直接調(diào)用eventUtil.stopEvent(ev)即可，該方法將所需的子方法進(jìn)行了包裝，也處理了兼容性問(wèn)題。
門(mén)面模式在模塊中的應(yīng)用結(jié)合以前說(shuō)過(guò)的對(duì)象創(chuàng)建模式，門(mén)面模式可以應(yīng)用在模塊之中，通過(guò)對(duì)私用方法的包裝提供簡(jiǎn)化的公用方法，開(kāi)發(fā)者維護(hù)模塊時(shí)只需修改私用方法就可以調(diào)整公用方法的實(shí)現(xiàn)。
var orange = (function() {
// 私用方法包裝對(duì)象
var _privateMethod = {
orangeValue: 10,
getValue: function() {
console.log(this.orangeValue);
},
setValue: function(value) {
this.orangeValue = value;
}
}
// 返回公用方法
return {
setOrangeValue: function(value) {
_privateMethod.setValue(value);
_privateMethod.getValue();
}
}
})();
門(mén)面模式能提供編寫(xiě)方式的靈活性，通過(guò)對(duì)底層子方法的封裝，既簡(jiǎn)化了代碼又降低了對(duì)底層系統(tǒng)的耦合。在大型系統(tǒng)工具庫(kù)的使用中有重要的意義。但在實(shí)際項(xiàng)目中還是要考慮代碼量的輕便性，如果業(yè)務(wù)只需要一些小粒度的方法的話，就沒(méi)有必要使用包裝了很多無(wú)用方法的門(mén)面函數(shù)了，這需要開(kāi)發(fā)者靈活判斷。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/78082.html
摘要：與門(mén)面模式的聯(lián)系本文要說(shuō)的適配器模式和上一篇門(mén)面模式在思想上有相似之處，所以放在一起說(shuō)。我們以中的一個(gè)為例，說(shuō)說(shuō)實(shí)際應(yīng)用中的適配器模式的使用方法。而如果實(shí)現(xiàn)層的問(wèn)題不大，要解決一部分適配問(wèn)題的話，適配器模式就是很好的選擇了。 與門(mén)面模式的聯(lián)系 本文要說(shuō)的適配器模式和上一篇門(mén)面模式在思想上有相似之處，所以放在一起說(shuō)。它們都對(duì)類的接口進(jìn)行了一些改變。門(mén)面模式是把相似的或是完成相關(guān)任務(wù)的接...
摘要：本書(shū)概括以軟件系統(tǒng)為例，重點(diǎn)講解了應(yīng)用架構(gòu)中的物理設(shè)計(jì)問(wèn)題，即如何將軟件系統(tǒng)拆分為模塊化系統(tǒng)。容器獨(dú)立模塊不依賴于具體容器，采用輕量級(jí)容器，如獨(dú)立部署模塊可獨(dú)立部署可用性模式發(fā)布接口暴露外部配置使用獨(dú)立的配置文件用于不同的上下文。 本文為讀書(shū)筆記，對(duì)書(shū)中內(nèi)容進(jìn)行重點(diǎn)概括，并將書(shū)中的模塊化結(jié)合微服務(wù)、Java9 Jigsaw談?wù)劺斫狻?本書(shū)概括 以Java軟件系統(tǒng)為例，重點(diǎn)講解了應(yīng)用架構(gòu)...
摘要：如果為假值，不傳或者傳入，函數(shù)都會(huì)返回但是，傳入這個(gè)值是完全有可能的，所以這種判斷形勢(shì)是不正確的或者使用來(lái)判斷也可以原始類型優(yōu)于封裝類型對(duì)象擁有六個(gè)原始值基本類型布爾值，數(shù)字，字符串，，和對(duì)象。 作為一個(gè)前端新人，多讀書(shū)讀好書(shū)，夯實(shí)基礎(chǔ)是十分重要的，正如蓋樓房一樣，底層穩(wěn)固了，才能越壘越高。從開(kāi)始學(xué)習(xí)到現(xiàn)在，基礎(chǔ)的讀了紅寶書(shū)《JavaScript高級(jí)程序設(shè)計(jì)》，犀牛書(shū)《JavaScri...
摘要：三種使用構(gòu)造函數(shù)創(chuàng)建對(duì)象的方法和的作用都是在某個(gè)特殊對(duì)象的作用域中調(diào)用函數(shù)。這種方式還支持向構(gòu)造函數(shù)傳遞參數(shù)。叫法上把函數(shù)叫做構(gòu)造函數(shù)，其他無(wú)區(qū)別適用情境可以在特殊的情況下用來(lái)為對(duì)象創(chuàng)建構(gòu)造函數(shù)。 一、工廠模式 工廠模式：使用字面量和object構(gòu)造函數(shù)會(huì)有很多重復(fù)代碼，在此基礎(chǔ)上改進(jìn)showImg(https://segmentfault.com/img/bVbmKxb?w=456&...
摘要：繼承的是超類型中構(gòu)造函數(shù)中的屬性，如上繼承了屬性，但沒(méi)有繼承原型中的方法。上述造成的結(jié)果是子類型實(shí)例中有兩組超類型的構(gòu)造函數(shù)中定義的屬性，一組在子類型的實(shí)例中，一組在子類型實(shí)例的原型中。 ECMAScript只支持實(shí)現(xiàn)繼承，主要依靠原型鏈來(lái)實(shí)現(xiàn)。與實(shí)現(xiàn)繼承對(duì)應(yīng)的是接口繼承，由于script中函數(shù)沒(méi)有簽名，所以無(wú)法實(shí)現(xiàn)接口繼承。 一、原型鏈 基本思想：利用原型讓一個(gè)引用類型繼承另一個(gè)引用...
閱讀 1756·2021-09-26 10:00
閱讀 3002·2021-09-06 15:00
閱讀 3607·2021-09-04 16:40
閱讀 2380·2019-08-30 15:44
閱讀 796·2019-08-30 10:59
閱讀 1950·2019-08-29 18:34
閱讀 3702·2019-08-29 15:42
閱讀 2347·2019-08-29 15:36
