聽飛狐聊JavaScript設計模式系列08

saucxs 發(fā)布于2019-08-21 10:48 / 2254人閱讀

摘要：本回內容介紹上一回聊到工廠模式，略抽象。官方說法，門面模式是指提供一個統(tǒng)一的接口去訪問多個子系統(tǒng)的多個不同的接口，為子系統(tǒng)中的一組接口提供一個統(tǒng)一的高層接口。使得子系統(tǒng)更容易使用。

本回內容介紹

上一回聊到工廠模式，略抽象。
介一回，咱聊門面模式就比較容易了，門面模式也叫外觀模式(facade)。
官方說法，門面模式是指提供一個統(tǒng)一的接口去訪問多個子系統(tǒng)的多個不同的接口，為子系統(tǒng)中的一組接口提供一個統(tǒng)一的高層接口。使得子系統(tǒng)更容易使用。
說白了，就是解耦類的接口。初次聽到這詞兒的童鞋看到代碼后估計會有親切感，開始咯：

1. 門面模式

隨便想個玩意兒吧，比如一個考勤系統(tǒng)，一個哥們兒上班打卡，就簡單模擬實現下，敲代碼咯：

// 定義一個接口，還記得吧，不記得就看第五回
var PersonInterface = new Interface("PersonInterface",["getInfo"]);

// 這里簡單點，就定義一個人的類
var Person = function(name){
    this.name = name;
    this.getInfo = function(){
        return "名字:"+this.name;
    }

    // 驗證實現接口
    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 "簽到時間:"+this.attendTime;
    }
    // 驗證實現接口
    Interface.ensureImplements(this,AttendSystemInterface);
}


// 這里就是個簡單的門面客戶端，怎么實現都在這完成
function facade(person,attendSystem){
    var res = person.getInfo()+"------"+attendSystem.records();
    alert(res);
}

// 簡單的測試一下
var fox = new Person("飛狐");
var as = new AttendSystem();
facade(fox,as);    //名字:飛狐------簽到時間:2015/11/18 下午18:08:08

這就是簡單門面模式的模擬了，比較好理解，很多網上的資料都用JS的DOM2事件例子來講的門面模式，走走過場來一個好了，看下一個例子，走你...

2. 門面模式之DOM2事件

在DOM2級事件中的兩個方法（注：W3C，IE8及之前的瀏覽器不支持）：
addEventListener(),removeEventListener()
所有DOM 節(jié)點中都包含這兩個方法，并且都接受3個參數：事件名，函數，冒泡或捕獲的布爾值（true 表示捕獲，false 表示冒泡）；
在IE中實現了類似的方法：attachEvent() 和 detachEvent()，這兩個方法接受相同的參數：事件名稱和函數。

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 )獲取事件對象，
     * 但是在Firefox中會報錯，提示：window.event is undefined，
     * 說明Firefox不支持IE方式獲取事件對象而是以句柄的第一個參數傳入的
     */ 
    getEvent:function(event){
        return event?event:window.event;
    },
    /*
     * 獲取事件作用的元素
     * IE:有srcElement屬性，沒有target屬性。
     * firefox:有target屬性，沒有srcElement屬性。
     */ 
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    // 取消事件的默認動作
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{    // IE阻止默認行為
            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!");
});

這個例子特簡單吧，是否有似曾相識的感覺，是的，這是模擬高程3上事件的例子，這里對事件封裝得很簡單，而在IE中還有這幾個區(qū)別：
IE 不支持捕獲，只支持冒泡；
IE 添加事件不能屏蔽重復的函數；
IE 中的 this 指向的是 window 而不是 DOM 對象；
IE 無法接受 event 對象，但使用了 attachEvent()卻可以，只是有區(qū)別；
我們這里只是聊門面模式，簡單的模擬，JS的事件系統(tǒng)有很多可以細細品味的地方，以后聊到ExtJS事件系統(tǒng)源碼的時候還會詳細的刨根問底，好像又扯多了...

又到裝逼時候了。雙11的價格挺誘人吧，我是沒忍住買了一個本本，尼瑪同款電腦，天貓比京東便宜860塊吖~~

這一回聊的內容少，難度很小，比較好理解。
下面的內容很簡單，聊一下JS的事件委托...

JS事件委托

高程3上對事件委托的描述是，事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。接著剛剛封裝的事件例子，繼續(xù)寫：


  飛狐
  帥狐
  飛狐就是帥

// 獲取id
function $(id){
    return document.getElementById(id);
}
var oUl = $("ul");
var oLi = oUl.getElementsByTagName("li");

// 不用事件委托，就得循環(huán)每個子li，分別綁定事件
for(var i=0,len=oLi.length;i
這個是拿書上的例子來改的，目的是為了讓大家更方便的理解，可以看出事件委托占用內存少，讀取速度快，性能更高。
這一回，主要聊了門面模式，DOM2級事件，事件委托，難度比較小~~
下一回，聊聊代理模式，也比較簡單。
客觀看完點個贊，推薦推薦唄，嘿嘿~~

注：此系飛狐原創(chuàng)，轉載請注明出處

GPU云服務器云服務器 javascript專題系列 javascript深入系列飛狐 javascript設計模式

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

轉載請注明本文地址：http://systransis.cn/yun/86224.html

聽飛狐聊JavaScript設計模式系列11

摘要：橋接模式之特權函數特權函數，用一些具有特權的方法作為橋梁以便訪問私有空間，可以回憶一下之前的系列。連續(xù)自然數分組，計算最多組的個數將至這個連續(xù)自然數分成組使每組相加的值相等。個數組中數字最多的一組有個此時的和為。本回內容介紹上一回，聊了適配器模式，圖片預加載，介一回，聊橋接模式（Bridge），跟之前一樣，難度比較小，橋接模式將抽象部分與它的實現部分分離，通過橋接模式聯系彼此，同時...

wanglu1209 2019-08-19 17:12 評論0 收藏0
聽飛狐聊JavaScript設計模式系列15

摘要：介一回，聊策略模式，策略模式定義了一系列的算法，并將每一個算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨立于使用它的客戶而獨立變化。下一回，聊一聊的享元模式。本回內容介紹上一回，聊了聊鏈式編程，模擬了jQuery和underscore.js,并寫了一個遍歷多維數組的函數。介一回，聊策略模式（Strategy），策略模式定義了一系列的算法，并將每一個算法封裝起來，而且使它們...

guyan0319 2019-08-22 11:00 評論0 收藏0
聽飛狐聊JavaScript設計模式系列06

本回內容介紹上一回聊到JS中模擬接口，裝飾者模式，摻元類，分析了backbone的繼承源碼，感覺還好吧！介一回，偶們來聊一下在JS單例模式(singleton)，單例模式其實運用很廣泛，比如：jquery，AngularJS，underscore吖蝦米的都是單例模式，來吧，直接開始咯： 1. 單例模式保證一個類只有一個實例，從全局命名空間里提供一個唯一的訪問點來訪問該對象。其實之前寫過的對象...

hiYoHoo 2019-08-21 10:45 評論0 收藏0
聽飛狐聊JavaScript設計模式系列02

摘要：本回內容介紹上一回聊到數據類型，簡單的過了一遍，包括個數組新特性等，這一回來聊聊對象，結合數組來實戰(zhàn)一些例子，在做題中成長，記憶會更深刻，來吧，開始咯創(chuàng)建實例的方式有兩種使用操作符后跟構造函數飛狐使用對象字面量表示法飛狐也可以飛狐這種寫法與本回內容介紹上一回聊到JS數據類型，簡單的過了一遍，包括9個數組新特性等，這一回來聊聊Object對象，結合數組來實戰(zhàn)一些例子，在做題中成長，記...

tangr206 2019-08-21 10:44 評論0 收藏0
聽飛狐聊JavaScript設計模式系列10

摘要：本回內容介紹上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式，用一個新的接口對現有類的接口進行包裝，處理類與的不匹配。這一回，主要聊了適配器模式，圖片預加載，主要還是理解下一回，聊一聊橋接模式，順便做一做計算題。本回內容介紹上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式（Adapter），用一個新的接口對現有類的接口進行包裝，處...

yexiaobai 2019-08-19 17:12 評論0 收藏0