建站
咨詢
售后
建站咨詢
新聞中心
橋接模式將抽象部分與實現(xiàn)部分分離開來，使兩者都可以獨立的變化，并且可以一起和諧地工作。抽象部分和實現(xiàn)部分都可以獨立的變化而不會互相影響，降低了代碼的耦合性，提高了代碼的擴展性。
10余年的犍為網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整犍為建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“犍為網(wǎng)站設計”,“犍為網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
基本理論
橋接模式定義：將抽象部分與它的實現(xiàn)部分分離，使它們都可以獨立地變化。
橋接模式主要有4個角色組成：
（1）抽象類
（2）擴充抽象類
（3）實現(xiàn)類接口
（4）具體實現(xiàn)類
根據(jù)javascript語言的特點，我們將其簡化成2個角色：
（1）擴充抽象類
（2）具體實現(xiàn)類
怎么去理解橋接模式呢？我們接下來舉例說明
橋接模式的實現(xiàn)
理解橋接模式的思想，關鍵是要理解其分離抽象部分和實現(xiàn)部分的思想。我們舉例進行說明
最簡單的橋接模式
其實我們最經(jīng)常用的jQuery的each函數(shù)就是一個典型的橋接模式，我們模擬其實現(xiàn)如下：
- 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函數(shù)循環(huán)了arr數(shù)組，別看這個例子很常見，但其中就包含了典型的橋接模式。
在這個例子中，抽象部分是each函數(shù)，也就是上面說的擴充抽象類，實現(xiàn)部分是fn，即具體實現(xiàn)類。抽象部分和實現(xiàn)部分可以獨立的進行變化。這個例子雖然簡單，但就是一個典型的橋接模式的應用。
插件開發(fā)中的橋接模式
橋接模式的一個適用場景是組件開發(fā)。我們平時開發(fā)組件為了適應不同場合，組件相應的會有許多不同維度的變化。橋接模式就可以應用于此，將其抽象與實現(xiàn)分離，使組件的擴展性更高。
假設我們要開發(fā)一個彈窗插件，彈窗有不同的類型：普通消息提醒，錯誤提醒，每一種提醒的展示方式還都不一樣。這是一個典型的多維度變化的場景。首先我們定義兩個類：普通消息彈窗和錯誤消息彈窗。
- function MessageDialog(animation) {
- this.animation = animation;
- }
- MessageDialog.prototype.show = function () {
- this.animation.show();
- }
- function ErrorDialog(animation) {
- this.animation = animation;
- }
- ErrorDialog.prototype.show = function () {
- this.animation.show();
- }
這兩個類就是前面提到的抽象部分，也就是擴充抽象類，它們都包含一個成員animation。
兩種彈窗通過show方法進行顯示，但是顯示的動畫效果不同。我們定義兩種顯示的效果類如下：
- function LinerAnimation() {
- }
- LinerAnimation.prototype.show = function () {
- console.log("it is liner");
- }
- function EaseAnimation() {
- }
- EaseAnimation.prototype.show = function () {
- console.log("it is ease");
- }
這兩個類就是具體實現(xiàn)類，它們實現(xiàn)具體的顯示效果。那我們?nèi)绾握{(diào)用呢？
1 var message = new MessageDialog(new LinerAnimation());
2 message.show();
3 var error = new ErrorDialog(new EaseAnimation());
4 error.show();
如果我們要增加一種動畫效果，可以再定義一種效果類，傳入即可。
總結
學習橋接模式關鍵是要理解抽象部分與實現(xiàn)部分的分離，使得二者可以獨立的變化，而不必拘泥于形式。JS插件靈活的變化，適用場景的多變就非常適合使用這種模式來實現(xiàn)。使用橋接模式最重要的是要找出系統(tǒng)中不同的變化維度。
原文地址：http://luopq.com/2015/11/11/design-pattern-bridge/
新聞名稱：Javascript設計模式理論與實戰(zhàn)：橋接模式
當前地址：http://www.dlmjj.cn/article/cochjgd.html
