js --橋接模式

時間 2019-12-06

標籤橋接模式欄目 JavaScript 简体版

原文原文鏈接

定義：html

將抽象部分與它的實現部分分離，使他們均可以獨立的變化。dom

也就是說，橋接模式裏面有兩個角色：函數

- 擴充抽象類性能

- 具體實現類學習

在寫橋接模式以前，想在寫一下關於抽象的理解。我以爲抽象這個概念過於抽象，而不易於理解。測試

抽象的概念：字體

從具體事物抽出、歸納出它們共同的方面、本質屬性與關係等，而將個別的、非本質的方面、屬性與關係捨棄，這種思惟過程，稱爲抽象。 ---[百度百科]this

在天然語言中，不少人把凡是不能被人們的感官所直接把握的東西，也就是一般所說的「看不見，摸不着」的東西，叫作抽象。spa

好比：物體的形狀,顏色都是抽象的，咱們去定義一個物體形狀的抽象方法插件

// 定義形狀的方法--抽象的方法，表示某一實物的共同特徵
let shape = function(shape) {
    this.shape = shape
}

let circle = new shape('圓')
console.log('circle', circle.shape) // 圓

let rectangle = new shape('長方形')
console.log('rectangle', rectangle.shape) //長方形

解釋完抽象的概念，迴歸正文。那如何使用橋接模式呢？

最簡單的橋接模式

var each = function (arr, fn) {
    for (var i = 0; i < arr.length; i++) {
        var val = arr[i];
        if (fn.call(val, i, val, arr)) {
            return false;
        }
    }
};
var arr = [1, 2, 3, 4];
each(arr, function (i, v) {
    arr[i] = v * 2;
});

each函數是一個抽象類，而fn函數則是具體的實現，在這段代碼中，抽象部分和實現部分的更改是互不影響的，能夠獨立的改變，因此，這個例子雖然簡單，可是是一個典型的橋接模式的應用。

在事件中使用橋接模式

好比鼠標點擊事件，字體和顏色發生對應的改變

html::
<ul>
            <li onclick="test1(this)" id="li1">測試1</li>
            <li onclick="test2(this)" id="li2">測試2</li>
            <li onclick="test3(this)" id="li3">測試3</li>
            <li onclick="test4(this)" id="li4">測試4</li>
  </ul>

使用橋接模式，首先將公共的方法進行抽離，抽象的部分

function some(dom, color, size) {
    dom.style.color = color;
    dom.style.fontSize = size
}

而後再每一個方法使用的時候，去實現

// 具體的實現
function test1(val) {
    some(document.getElementById(val.id), 'red', '20px')
}
function test2(val) {
    some(document.getElementById(val.id), 'green', '30px')
}
function test3(val) {
    some(document.getElementById(val.id), 'blue', '40px')
}
function test4(val) {
    some(document.getElementById(val.id), 'pink', '50px')
}

橋接組織多個單元

var Class1 = function (a,b,c) {
            this.a = a;
            this.b = b;
            this.c = c;
};
var Class2 = function (d,e) {
            this.d = d;
            this.e = e;
 };
var BridgeClass = function (a,b,c,d,e) {
            this.Class1 = new Class1(a,b,c);
            this.Class2 = new Class1(d,e);
}