javascript中設計模式之橋接模式詳解(Bridge design)

阿新 • • 發佈：2019-01-20

一、橋接模式

1、橋接模式是一種既能把倆個物件連線在一起，又能避免二者間的強耦合的方法。通過“橋”把彼此聯絡起來，同時又允許他們各自獨立變化 2、橋接模式主要作用就是將抽象與其實現隔離開來，以便二者獨立話

二、橋接例項

1、事件監聽回撥機制 比如我們在頁面點選一個傳送按鈕，去提交表單，我們一般就會這樣寫：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>橋接模式</title>
	<script src="jquery.js"></script>

</head>
<body>
	<button id="button_id">
		傳送
	</button>
</body>
	<script >
		// 前臺程式碼業務邏輯
		var btn = $("#button_id");
		//利用jq註冊點選事件
		btn.click(sendReg());
		//後臺資料業務邏輯
		function  sendReq(); {
			alert('我傳送了請求。。。。。');
		}

	</script>
</html>

如果我們利用橋接模式就會這樣寫：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>橋接模式</title>
	<script src="jquery.js"></script>

</head>
<body>
	<button id="button_id">
		傳送
	</button>
</body>
	<script >
		// 前臺程式碼業務邏輯
		var btn = $("#button_id");
		//利用jq註冊點選事件
		btn.click(bridgeHadler);
		//利用橋模式分開
		function bridgeHadler() {
			sendReq();
		}


		//後臺資料業務邏輯
		function  sendReq(); {
			alert('我傳送了請求。。。。。');
		}

	</script>
</html>

簡簡單單的一個bridgeHadler函式即實現了橋接模式，通過這個函式中轉，這樣sendReg傳送請求方便我們以後除錯，直接呼叫，不需要點選一下再觸發了，是不是很方便，程式碼很簡單，但思想大家一定要記住。

2、特權函式

	var PublicClass = function() {
			//私有變數
			var name = 'C5';
			// getName 訪問私用成員變數  特權函式
			this.getName = function () {
				return name;
			}
		}

		var c1 = new PublicClass();
		alert(c1.getName()); //c5


		var PublicClass = function() {
			//私有變數
			var privateMethod = function () {
				alert('執行了一個很複雜的操作');
			};
			// 通過特權函式 去訪問這個私用的獨立單元
			this.bridgeMethod = function () {
				return privateMethod();
			}
		}

		var c1 = new PublicClass();
		c1.bridgeMethod(); //執行了一個很複雜的操作

3、橋接組織多個單元

	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);
		
		};

這樣利用橋模式把多個單體組織在一起，方便簡單

javascript中設計模式之橋接模式詳解(Bridge design)

一、橋接模式

二、橋接例項

javascript中設計模式之橋接模式詳解(Bridge design)

設計模式之橋接模式優秀的程序結構(十五)

設計模式之橋接模式 Bridge

設計模式之橋接模式

Java二十三設計模式之-----橋接模式

設計模式之橋接模式(Bridge)

設計模式的藝術結構性模式之橋接模式

設計模式之 —— 橋接模式

JAVA開發的23種設計模式之 --- 橋接模式

設計模式之橋接模式（Bridge Pattern）

php設計模式之橋接模式

通過例子學設計模式之--橋接模式以及使用場景說明(C++實現)

設計模式之橋接模式——Java語言描述

C++設計模式之橋接模式

JAVA設計模式之橋接模式【Bridge Pattern】

Java設計模式之橋接模式

設計模式之橋接模式(結構型)

設計模式之--橋接模式

結構型模式之橋接模式

java面試題之----jdbc中使用的設計模式（橋接模式）

javascript中設計模式之橋接模式詳解(Bridge design)

一、橋接模式

二、橋接例項

相關推薦