06. Bridge Mode in Javascript design mode -- Bridge

06. Bridge Mode of JavaScript design mode ---- Bridge

This article mainly introduces the Bridge Mode in the design mode through examples.

When designing a javascript API, you can use this mode to weaken the coupling between it and its classes and objects. According to the definition of gof, the purpose of the bridge mode is to "isolate abstraction from implementation so that the two can change independently ".
This mode is very useful for common event-driven programming in JavaScript.

Example 1: DOM Event listener

Suppose there is a proposition: there are multiple buttons on the page, and there is a controllable size image with the ID of IMG. You need to click different buttons (based on the value of the button, for example: value = "600x800"), the image size is changed accordingly.
Therefore, to complete this operation, we usually do not consider the design pattern, so that we can complete the function:

addEvent(domElement,"click",function(e){    var btnValue = this.value.split("x");    var size = {        width : btnValue[0],        height : btnValue[1]    };    var oImg = document.getElementById("img");    oImg.style.width = size.width + "px";    oImg.style.height = size.height + "px";});

This design can fully implement our functions. By clicking different buttons, the image size will change accordingly.

However, if you want to perform unit tests on this function, or even want to debug and run it in a command line environment like firebug, it will be a little difficult.

Therefore, we have considered using the Bridge Mode to extract the listener method into a separate API function, and ensure that this API function is not necessarily coupled with the node itself, our design is as follows:

var changeSize = function(buttonValue){    var btnValue = buttonValue.split("x");    var size = {        width : btnValue[0],        height : btnValue[1]    };    var oImg = document.getElementById("img");    oImg.style.width = size.width + "px";    oImg.style.height = size.height + "px";};var changeSizeBridge = function(e){    changeSize(this.value);};addEvent(domElement,"click",changeSizeBridge);

Through this design, the functions can be perfectly implemented, and the application scope of this API is greatly extended, providing us with greater design freedom.
Obviously, the changesize method is not bound to the event object at this time. We can run this API separately in unit test or in independent command line mode.
To quickly debug the code we designed, we can test it separately:

Changesize ("1204X768"); // change the image size to 1024*768

One of the most common and practical scenarios of the bridge mode is the event listener callback function.

Example 2 of Bridge Mode: privileged functions

In addition to bridging between the Event Callback Function and the interface, the bridge mode can also be used to connect public API code and private implementation code. In addition, it can be used to connect multiple classes together. From the perspective of class,
This means that the interface is written as public code, and the class implementation is written as private code.

If a public interface abstracts some complicated tasks that may be private, you can use the bridge mode to collect private information. Some methods with special rights can be used
Bridges facilitate private use of variable spaces in their locations, without having to venture into the specific implementation. Bridging functions in this special case are also called privileged functions.

The following is a simple example:

VaR human = function () {// The number of human feet defined here. This is an inherent feature of humans and cannot be changed var footnum = 2; // using this method, you can get the number of human feet this. getfootnum = function () {return footnum ;};}; var zhaoxianlie = new human (); alert (zhaoxianlie. getfootnum (); // we will tell you that Zhao xianlie has two feet.

Of course, there are many examples of the Bridge Mode. Most of them can be simulated if you want to reverse it.

This article references the Javascript design patterns [Ross harmes, Dustin Diaz]

If you have misstated this, please do not care about it.