溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何使用javascript中的橋接模式，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
介紹：如果軟件系統(tǒng)中某個類存在兩個或多個獨立變化的維度，可以通過橋接模式將這些維度分離出來，使兩者可以獨立擴展，讓系統(tǒng)更符合單一職責原則。
定義：將抽象部分與其實現部分分離，使他們都可以獨立的變化。它是一種對象結構型模式，又稱為柄體模式或接口模式。
場景：我們做一個簡單的畫圓，將圓的半徑和顏色這兩個維度進行分離，使每一個維度都可以單獨擴展，很多同學都說這么簡單一個需求我5行代碼就實現了。為什么寫這么啰嗦一套。
我們這里分享的是設計思想，當你的系統(tǒng)足夠復雜時需要用什么樣的方式進行優(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 + ' 原點坐標：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 + ' 原點坐標：x:' + this.x + ' y:' + this.y + ' 半徑：' + this.radius);
}
}
var color = new CircularColor.redCircular();
var radius = new CircularRadius.big();
radius.setColor(color);
radius.draw();//畫一個大圓！顏色：red 原點坐標：x:0 y:0 半徑：20這節(jié)需要說一個點，橋接模式在java的介紹里，獨立之后的維度是在抽象層會建立關聯(lián)關系，js沒有抽象層，所以兩個獨立維度通過一個setColor方法建立關聯(lián)關系。
橋接模式總結：
優(yōu)點：
* 橋接模式提高了系統(tǒng)的可擴展性，在兩個變化維度中任意擴展一個維度，都不需要修改原有系統(tǒng)，符合開關原則。
* 多數情況下，橋接模式可以取代多層集成方案。
* 分離接口及其實現部分，使得實現可以沿著各自的維度來變化。
缺點：
* 橋接模式的使用會增加系統(tǒng)的理解與設計難度。
* 橋接模式要求正確識別出系統(tǒng)中兩個獨立變化的維度，因此其使用范圍具有一定的局限性。
適用場景：
* 一個類存在兩個或多個獨立變化的維度，且這些維度都需要獨立進行擴展。
看完上述內容，是不是對如何使用javascript中的橋接模式有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
