javascript中设计模式之桥接模式详解(Bridge design)_js判断 bridge是否连接-优快云博客

本文链接：https://blog.youkuaiyun.com/js_admin/article/details/71307769

本文详细介绍了JavaScript中的设计模式之一——桥接模式，通过实际案例深入剖析了该模式的概念和应用，帮助读者理解如何在JavaScript中实现并运用桥接模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、桥接模式

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

这样利用桥模式把多个单体组织在一起，方便简单