The bridge pattern separates the abstract part from the implementation part, so that both can be changed independently and can work harmoniously together. Both the abstract part and the implementation part can be changed independently without affecting each other, reducing the coupling of the code and improving the scalability of the code.
According to GoF's definition, the role of the bridge mode is to "isolate the abstraction from its implementation so that the two can change independently." This pattern is of great benefit to event-driven programming common in Javascript.
One of the most common and practical applications of bridge mode is the event listener callback function. example: Event listener, encapsulates event-processed statements into callback functions, and program them through interfaces rather than implementations.
Basic Theory
Bridge pattern definition: Separate abstract parts from their implementation parts so that they can all be changed independently.
The bridge mode mainly consists of 4 roles:
(1) Abstract Class
(2) Expand abstract classes
(3) Implement class interface
(4) Specific implementation class
According to the characteristics of the javascript language, we simplify it into 2 roles:
(1) Expand abstract classes
(2) Specific implementation class
How to understand the bridge mode? Let's give an example next
Implementation of bridge mode
The key to understanding the idea of a bridge pattern is to understand its idea of separating abstract parts and realizing parts. Let's give examples to illustrate
The easiest bridge mode
In fact, the jQuery each function we use most often is a typical bridge mode. We simulate it as follows:
var each = function (arr, fn) { for (var i = 0; i < arr.length; i++) { var val = arr[i]; if (fn.call(val, i, val, arr)) { return false; } }}var arr = [1, 2, 3, 4];each(arr, function (i, v) { arr[i] = v * 2;})In this example, we loop the arr array through each function. Although this example is very common, it contains a typical bridge pattern.
In this example, the abstract part is each function, which is the expanded abstract class mentioned above, and the implementation part is fn, that is, the concrete implementation class. The abstract part and the implementation part can be changed independently. Although this example is simple, it is a typical application of bridge mode.
Bridge mode in plug-in development
One suitable scenario for the bridge mode is component development. In order to adapt to different occasions, the components will have many changes in different dimensions. The bridge mode can be applied here, separating its abstraction from implementation, making the component more extensible.
Suppose we want to develop a pop-up plug-in, which has different types of pop-ups: ordinary message reminders, error reminders, and the display method of each reminder is different. This is a typical multi-dimensional change scenario. First we define two classes: normal message pop-up window and error message pop-up window.
function MessageDialog(animation) { this.animation = animation;}MessageDialog.prototype.show = function () { this.animation.show();}function ErrorDialog(animation) { this.animation = animation;}ErrorDialog.prototype.show = function () { this.animation.show();}These two classes are the abstract parts mentioned above, that is, the extended abstract classes, both of which contain a member animation.
The two pop-up windows are displayed through the show method, but the animation effects are different. We define two display effect classes as follows:
function LinerAnimation() {}LinerAnimation.prototype.show = function () { console.log("it is liner");}function EaseAnimation() {}EaseAnimation.prototype.show = function () { console.log("it is ease");}These two classes are specific implementation classes, which achieve specific display effects. So how do we call it?
var message = new MessageDialog(new LinerAnimation());message.show();var error = new ErrorDialog(new EaseAnimation());error.show();
If we want to add an animation effect, we can define another effect class and pass it in.
Summarize
The key to learning the bridge model is to understand the separation between the abstract part and the implementation part, so that the two can be changed independently without being obsessed with form. The JS plug-in has flexible changes and the variety of applicable scenarios is very suitable for using this model to achieve. The most important thing about using a bridge mode is to find out the different dimensions of change in the system.
(1) Advantages of bridge mode:
Isolating abstraction from implementation helps to independently manage various components of the software.
(2) Disadvantages of bridge mode:
Each bridge element is used to add a function call, which has some negative impact on the performance of the application. Increases the complexity of the system. If a bridge function is used to connect two functions, and one of the functions will not be called outside the bridge function at all, then the bridge function is not necessary at this time.
The bridge mode "isolates abstraction from implementation so that the two change independently." It can promote modularity of code, lead to a cleaner implementation and improve abstract flexibility. It can be used to connect a set of classes and functions, and provides a means to access private data with privileged functions.