資訊專欄INFORMATION COLUMN
摘要：本回內(nèi)容介紹上一回聊到工廠模式，略抽象。官方說法，門面模式是指提供一個(gè)統(tǒng)一的接口去訪問多個(gè)子系統(tǒng)的多個(gè)不同的接口，為子系統(tǒng)中的一組接口提供一個(gè)統(tǒng)一的高層接口。使得子系統(tǒng)更容易使用。
本回內(nèi)容介紹
上一回聊到工廠模式，略抽象。
介一回，咱聊門面模式就比較容易了，門面模式也叫外觀模式(facade)。
官方說法，門面模式是指提供一個(gè)統(tǒng)一的接口去訪問多個(gè)子系統(tǒng)的多個(gè)不同的接口，為子系統(tǒng)中的一組接口提供一個(gè)統(tǒng)一的高層接口。使得子系統(tǒng)更容易使用。
說白了，就是解耦類的接口。初次聽到這詞兒的童鞋看到代碼后估計(jì)會(huì)有親切感，開始咯：
隨便想個(gè)玩意兒吧，比如一個(gè)考勤系統(tǒng)，一個(gè)哥們兒上班打卡，就簡單模擬實(shí)現(xiàn)下，敲代碼咯：
// 定義一個(gè)接口，還記得吧，不記得就看第五回
var PersonInterface = new Interface("PersonInterface",["getInfo"]);
// 這里簡單點(diǎn)，就定義一個(gè)人的類
var Person = function(name){
this.name = name;
this.getInfo = function(){
return "名字:"+this.name;
}
// 驗(yàn)證實(shí)現(xiàn)接口
Interface.ensureImplements(this,PersonInterface);
}
// 定義考勤系統(tǒng)接口
var AttendSystemInterface = new Interface("attendSystemInterface",["records"]);
// 考勤系統(tǒng)
var AttendSystem = function(){
this.attendTime = new Date().toLocaleString();
this.records = function(){
return "簽到時(shí)間:"+this.attendTime;
}
// 驗(yàn)證實(shí)現(xiàn)接口
Interface.ensureImplements(this,AttendSystemInterface);
}
// 這里就是個(gè)簡單的門面客戶端，怎么實(shí)現(xiàn)都在這完成
function facade(person,attendSystem){
var res = person.getInfo()+"------"+attendSystem.records();
alert(res);
}
// 簡單的測試一下
var fox = new Person("飛狐");
var as = new AttendSystem();
facade(fox,as); //名字:飛狐------簽到時(shí)間:2015/11/18 下午18:08:08
這就是簡單門面模式的模擬了，比較好理解，很多網(wǎng)上的資料都用JS的DOM2事件例子來講的門面模式，走走過場來一個(gè)好了，看下一個(gè)例子，走你...
2. 門面模式之DOM2事件在DOM2級(jí)事件中的兩個(gè)方法（注：W3C，IE8及之前的瀏覽器不支持）：
addEventListener(),removeEventListener()
所有DOM 節(jié)點(diǎn)中都包含這兩個(gè)方法，并且都接受3個(gè)參數(shù)：事件名，函數(shù)，冒泡或捕獲的布爾值（true 表示捕獲，false 表示冒泡）；
在IE中實(shí)現(xiàn)了類似的方法：attachEvent() 和 detachEvent()，這兩個(gè)方法接受相同的參數(shù)：事件名稱和函數(shù)。
var EventUtil = {
// 添加事件
addHandler: function(el,type,fn){
if(el.addEventListener){
// W3C
el.addEventListener(type,fn,false);
}else if(el.attachEvent){
// IE
el.attachEvent("on"+type,fn);
}else{
el["on"+type] = fn;
}
},
// 移除事件
removeHandler: function(el,type,fn){
if(el.removeEventListener){
// W3C
el.removeEventListener(type,fn,false);
}else if(el.detachEvent){
// IE
el.detachEvent("on"+type,fn);
}else{
el["on"+type] = fn;
}
},
/*
* 獲取事件，這里注意一下IE方式( window.event )獲取事件對(duì)象，
* 但是在Firefox中會(huì)報(bào)錯(cuò)，提示：window.event is undefined，
* 說明Firefox不支持IE方式獲取事件對(duì)象而是以句柄的第一個(gè)參數(shù)傳入的
*/
getEvent:function(event){
return event?event:window.event;
},
/*
* 獲取事件作用的元素
* IE:有srcElement屬性，沒有target屬性。
* firefox:有target屬性，沒有srcElement屬性。
*/
getTarget:function(event){
return event.target||event.srcElement;
},
// 取消事件的默認(rèn)動(dòng)作
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{ // IE阻止默認(rèn)行為
event.returnValue = false;
}
},
// 取消冒泡
stopPropagation:function(event){
// W3C的取消冒泡
if(event.stopPropagation){
event.stopPropagation();
}else{ // IE的取消冒泡
event.cancelBubble = true;
}
}
};
document.write("");
var btn = document.getElementById("btn");
EventUtil.addHandler(btn,"click",function(){
alert("Are you ok!");
});
這個(gè)例子特簡單吧，是否有似曾相識(shí)的感覺，是的，這是模擬高程3上事件的例子，這里對(duì)事件封裝得很簡單，而在IE中還有這幾個(gè)區(qū)別：
IE 不支持捕獲，只支持冒泡；
IE 添加事件不能屏蔽重復(fù)的函數(shù)；
IE 中的 this 指向的是 window 而不是 DOM 對(duì)象；
IE 無法接受 event 對(duì)象，但使用了 attachEvent()卻可以，只是有區(qū)別；
我們這里只是聊門面模式，簡單的模擬，JS的事件系統(tǒng)有很多可以細(xì)細(xì)品味的地方，以后聊到ExtJS事件系統(tǒng)源碼的時(shí)候還會(huì)詳細(xì)的刨根問底，好像又扯多了...
又到裝逼時(shí)候了。雙11的價(jià)格挺誘人吧，我是沒忍住買了一個(gè)本本，尼瑪同款電腦，天貓比京東便宜860塊吖~~
JS事件委托這一回聊的內(nèi)容少，難度很小，比較好理解。
下面的內(nèi)容很簡單，聊一下JS的事件委托...
高程3上對(duì)事件委托的描述是，事件委托利用了事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。接著剛剛封裝的事件例子，繼續(xù)寫：
// 獲取id
function $(id){
return document.getElementById(id);
}
var oUl = $("ul");
var oLi = oUl.getElementsByTagName("li");
// 不用事件委托，就得循環(huán)每個(gè)子li，分別綁定事件
for(var i=0,len=oLi.length;i
這個(gè)是拿書上的例子來改的，目的是為了讓大家更方便的理解，可以看出事件委托占用內(nèi)存少，讀取速度快，性能更高。
這一回，主要聊了門面模式，DOM2級(jí)事件，事件委托，難度比較小~~
下一回，聊聊代理模式，也比較簡單。
客觀看完點(diǎn)個(gè)贊，推薦推薦唄，嘿嘿~~
注：此系飛狐原創(chuàng)，轉(zhuǎn)載請注明出處
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86224.html
摘要：橋接模式之特權(quán)函數(shù)特權(quán)函數(shù)，用一些具有特權(quán)的方法作為橋梁以便訪問私有空間，可以回憶一下之前的系列。連續(xù)自然數(shù)分組，計(jì)算最多組的個(gè)數(shù)將至這個(gè)連續(xù)自然數(shù)分成組使每組相加的值相等。個(gè)數(shù)組中數(shù)字最多的一組有個(gè)此時(shí)的和為。 本回內(nèi)容介紹 上一回，聊了適配器模式，圖片預(yù)加載，介一回，聊橋接模式（Bridge），跟之前一樣，難度比較小，橋接模式將抽象部分與它的實(shí)現(xiàn)部分分離，通過橋接模式聯(lián)系彼此，同時(shí)...
摘要：介一回，聊策略模式，策略模式定義了一系列的算法，并將每一個(gè)算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨(dú)立于使用它的客戶而獨(dú)立變化。下一回，聊一聊的享元模式。 本回內(nèi)容介紹 上一回，聊了聊鏈?zhǔn)骄幊?，模擬了jQuery和underscore.js,并寫了一個(gè)遍歷多維數(shù)組的函數(shù)。介一回，聊策略模式（Strategy），策略模式定義了一系列的算法，并將每一個(gè)算法封裝起來，而且使它們...
本回內(nèi)容介紹 上一回聊到JS中模擬接口，裝飾者模式，摻元類，分析了backbone的繼承源碼，感覺還好吧！ 介一回，偶們來聊一下在JS單例模式(singleton)，單例模式其實(shí)運(yùn)用很廣泛，比如：jquery，AngularJS，underscore吖蝦米的都是單例模式，來吧，直接開始咯： 1. 單例模式 保證一個(gè)類只有一個(gè)實(shí)例，從全局命名空間里提供一個(gè)唯一的訪問點(diǎn)來訪問該對(duì)象。其實(shí)之前寫過的對(duì)象...
摘要：本回內(nèi)容介紹上一回聊到數(shù)據(jù)類型，簡單的過了一遍，包括個(gè)數(shù)組新特性等，這一回來聊聊對(duì)象，結(jié)合數(shù)組來實(shí)戰(zhàn)一些例子，在做題中成長，記憶會(huì)更深刻，來吧，開始咯創(chuàng)建實(shí)例的方式有兩種使用操作符后跟構(gòu)造函數(shù)飛狐使用對(duì)象字面量表示法飛狐也可以飛狐這種寫法與 本回內(nèi)容介紹 上一回聊到JS數(shù)據(jù)類型，簡單的過了一遍，包括9個(gè)數(shù)組新特性等，這一回來聊聊Object對(duì)象，結(jié)合數(shù)組來實(shí)戰(zhàn)一些例子，在做題中成長，記...
摘要：本回內(nèi)容介紹上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式，用一個(gè)新的接口對(duì)現(xiàn)有類的接口進(jìn)行包裝，處理類與的不匹配。這一回，主要聊了適配器模式，圖片預(yù)加載，主要還是理解下一回，聊一聊橋接模式，順便做一做計(jì)算題。 本回內(nèi)容介紹 上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式（Adapter），用一個(gè)新的接口對(duì)現(xiàn)有類的接口進(jìn)行包裝，處...
閱讀 2415·2021-09-01 10:41
閱讀 1439·2019-08-30 14:12
閱讀 507·2019-08-29 12:32
閱讀 2856·2019-08-29 12:25
閱讀 2934·2019-08-28 18:30
閱讀 1704·2019-08-26 11:47
閱讀 973·2019-08-26 10:35
閱讀 2587·2019-08-23 18:06
