本文實(shí)例講述了javascript設(shè)計模式 ? 橋接模式原理與應(yīng)用。分享給大家供大家參考，具體如下：

介紹：如果軟件系統(tǒng)中某個類存在兩個或多個獨(dú)立變化的維度，可以通過橋接模式將這些維度分離出來，使兩者可以獨(dú)立擴(kuò)展，讓系統(tǒng)更符合單一職責(zé)原則。

定義：將抽象部分與其實(shí)現(xiàn)部分分離，使他們都可以獨(dú)立的變化。它是一種對象結(jié)構(gòu)型模式，又稱為柄體模式或接口模式。

場景：我們做一個簡單的畫圓，將圓的半徑和顏色這兩個維度進(jìn)行分離，使每一個維度都可以單獨(dú)擴(kuò)展，很多同學(xué)都說這么簡單一個需求我5行代碼就實(shí)現(xiàn)了。為什么寫這么??亂惶住?br>我們這里分享的是設(shè)計思想，當(dāng)你的系統(tǒng)足夠復(fù)雜時需要用什么樣的方式進(jìn)行優(yōu)化。作為示例，也只是用最小的例子把道理講明白，不是說所有類似的地方就必須這么寫。什么樣的場景需要什么樣的模式，需不需要用模式需要你自己去考量。

示例：

var CircularColor = {};CircularColor.redCircular = function(){ this.getColor = function(){ return ’red’; }}CircularColor.greenCircular = function(){ this.getColor = function(){ return ’green’; }} var CircularRadius = {};CircularRadius.small = function(){ this.x = this.y = 0; this.radius = 5; this.color = null; this.setColor = function(circularColor){ this.color = circularColor.getColor(); } this.draw = function(){ console.log(’畫一個小圓！顏色：’ + this.color + ’ 原點(diǎn)坐標(biāo)：x:’ + this.x + ’ y:’ + this.y + ’ 半徑：’ + this.radius); }}CircularRadius.big = function(){ this.x = this.y = 0; this.radius = 20; this.color = null; this.setColor = function(circularColor){ this.color = circularColor.getColor(); } this.draw = function(){ console.log(’畫一個大圓！顏色：’ + this.color + ’ 原點(diǎn)坐標(biāo)：x:’ + this.x + ’ y:’ + this.y + ’ 半徑：’ + this.radius); }} var color = new CircularColor.redCircular();var radius = new CircularRadius.big();radius.setColor(color);radius.draw();//畫一個大圓！顏色：red 原點(diǎn)坐標(biāo)：x:0 y:0 半徑：20

這節(jié)需要說一個點(diǎn)，橋接模式在java的介紹里，獨(dú)立之后的維度是在抽象層會建立關(guān)聯(lián)關(guān)系，js沒有抽象層，所以兩個獨(dú)立維度通過一個setColor方法建立關(guān)聯(lián)關(guān)系。

橋接模式總結(jié)：

優(yōu)點(diǎn)：

* 橋接模式提高了系統(tǒng)的可擴(kuò)展性，在兩個變化維度中任意擴(kuò)展一個維度，都不需要修改原有系統(tǒng)，符合開關(guān)原則。* 多數(shù)情況下，橋接模式可以取代多層集成方案。* 分離接口及其實(shí)現(xiàn)部分，使得實(shí)現(xiàn)可以沿著各自的維度來變化。

缺點(diǎn)：

* 橋接模式的使用會增加系統(tǒng)的理解與設(shè)計難度。* 橋接模式要求正確識別出系統(tǒng)中兩個獨(dú)立變化的維度，因此其使用范圍具有一定的局限性。

適用場景：

* 一個類存在兩個或多個獨(dú)立變化的維度，且這些維度都需要獨(dú)立進(jìn)行擴(kuò)展。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。