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

wanglu1209 發布于2019-08-19 17:12 / 2594人閱讀

摘要：橋接模式之特權函數特權函數，用一些具有特權的方法作為橋梁以便訪問私有空間，可以回憶一下之前的系列。連續自然數分組，計算最多組的個數將至這個連續自然數分成組使每組相加的值相等。個數組中數字最多的一組有個此時的和為。

本回內容介紹

上一回，聊了適配器模式，圖片預加載，介一回，聊橋接模式（Bridge），跟之前一樣，難度比較小，橋接模式將抽象部分與它的實現部分分離，通過橋接模式聯系彼此，同時又使之都可以獨立地變化。也算是一種解耦。

1.橋接模式

這里需要用到之前寫過的代碼，不清楚的童鞋看看前面聊過的系列08的門面模式之DOM2事件，這里會用到EventUtil，如下：


// 獲取dom，沒什么好說的
var d = document;
var $ = function(id){
    return d.getElementById(id);
}
window.onload=function(){
    // 獲取button
    var btn = $("btn")
    // 之前聊門面模式的時候寫的util，不清楚的童鞋再看看系列08
    EventUtil.addHandler(btn,"click",bridge);
    // 這里就是橋接了
    function bridge(){
        // 這個this是獲取的按鈕本身
        var _self = this;
        // 觸發函數，并把按鈕傳參過去
        fire(_self);
    }
    // 這里簡單的寫個彈窗，沒有寫太復雜的邏輯處理
    function fire(o){
        alert(o.value);    // 摁一下證明被觸發
    }
}

這里的bridge就是用于連接抽象事件和fire業務邏輯部分的橋梁，這個例子沒有寫過多的代碼，簡簡單單比較直觀好理解。then，下一個例子。

2. 橋接模式之組織多個類

這個比上一個事件模擬的例子更簡單，把其類封裝起來，通過一個橋梁函數來組織。

// 類ONE，簡寫O
var ClassO = function(a, b, c) {
  this.a = a;
  this.b = b;
  this.c = c;
}

// 類TWO，簡寫T
var ClassT = function(x,y,z) {
  this.x = x;
  this.y = y;
  this.z = z;
};

// 橋梁類，組織上面的兩個類
var Bridge = function(a,b,c,x,y,z) {
  this.one = new ClassO(a,b,c);
  this.two = new ClassT(x,y,z);
}

這個例子特簡單吧，可能在平時開發中經常用到，只是不知道這種開發模式就叫做橋接模式。then，下一個例子。

3. 橋接模式之特權函數

特權函數，用一些具有特權的方法作為橋梁以便訪問私有空間，可以回憶一下之前的系列02。

// Open類
var Open = function(){
    // 私有業務方法，用一個簡單的彈框模擬
    var privateM = function(){
        alert("飛狐就是帥！");
    }
    // 這里就是一個橋梁，提供私有方法privateM的訪問權
    this.bridge = function(){
        return privateM();
    }
}

// 這里測試一下，沒什么好說的
var o = new Open();
o.bridge();    // 飛狐就是帥！

這個也不難吧，一個私有函數訪問特權，全當是復習了。

裝個逼先。最近的電影《我的少女時代》還不錯耶~！啥沒記住，就一句臺詞特印象：“報告主任，我考第一是作弊！”。嘿嘿~~

這一回聊的橋接模式，主要是理解，并沒有太多復雜的地方。
下面的內容，就練一道題吧。

連續自然數分組，計算最多組的個數

將1至100這100個連續自然數分成N組,使每組相加的值相等。返回N組中個數最多一組的個數：

function calculate(x){
    // 項數，更靈活的話，可以當參數傳入，當然邏輯會更復雜點
    var n = 100;
    // 前n個數的和
    var s = 0;
    // 向下取整，
    var group = Math.floor(n/2);
    // 計算總和,沒記錯的話，公式是=（首項+末項）*項數/2
    var sum = (1 + n) * n/2;
    
    // 計算平均數，防止有余數，向下取整
    var avg = Math.floor(sum/x);
    
    // 循環所有項
    for (var i=1;i<=n;i++) {
        // 累加每一項
        s += i;
        // 判斷當大于平均數時停止
        if (s > avg) {
            console.log(x+"個數組中數字最多的一組有：" + (i - 1) + " 個,此時的和為：" + (s - i) + "。");
            break;
        }
    }    
}
calculate(8);    // 8個數組中數字最多的一組有：35 個,此時的和為：630。

這是在網上看到的一道題，改寫的一個計算方法，注釋寫的還算清楚吧，更靈活的話，還可以擴展傳入項，有興趣的童鞋可以玩玩兒，當娛樂消遣唄。

這一回，主要聊了橋接模式，回憶了下事件監聽，聊了用橋接模式組織多個類，聊了特權函數，做了一道計算題，這回主要在于理解~~
下一回，可能會略抽象一點，聊一聊組合模式。

客觀看完點個贊，推薦推薦唄，嘿嘿~~

注：此系飛狐原創，轉載請注明出處

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

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78289.html

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

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

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

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

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

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

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

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

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

摘要：本回內容介紹上一回，聊了聊狀態模式，并介紹了一下介一回，聊鏈式編程，模擬一下，再模擬一下封裝一個庫。這一回，主要聊了鏈式調用，模擬了，尤其是，希望大家能喜歡這次代碼分享。下一回，聊一聊的策略模式。本回內容介紹上一回，聊了聊狀態模式（State），并介紹了一下vue.js；介一回，聊鏈式編程，模擬一下jQuery，再模擬一下underscore.js,封裝一個庫。 1. 鏈式調用 (...

fox_soyoung 2019-08-19 17:20 評論0 收藏0