The basic knowledge of bridging mode used in JavaScript design pattern development

The bridging pattern separates the abstraction from the implementation part, enabling both to change independently and work harmoniously together. The abstraction and implementation parts can be changed independently without affecting each other, which reduces the coupling of code and improves the extension of code.
The bridging pattern, as defined by Gof, is to "isolate the abstraction from its implementation so that the two can change independently". This pattern is useful for event-driven programming that is common in JavaScript.

One of the most common and practical applications of bridging mode is the event listener callback function. Example: Event listener, encapsulates the statement of event handling into a callback function, programming through an interface rather than an implementation.

Basic theory

Bridging mode definition: Separates the abstraction part from its implementation, so that they can all change independently.
Bridging mode consists of 4 main roles:
(1) Abstract class
(2) Expand the abstract class
(3) Implement class interface
(4) Specific implementation class
Based on the characteristics of the JavaScript language, we simplified it to 2 roles:
(1) Expand the abstract class
(2) Specific implementation class
How to understand bridging mode? We'll give you an example of how

Implementation of bridging mode

The key to understanding the idea of bridging patterns is to understand the idea of separating the abstract and the realized parts. Let's illustrate with examples

The simplest bridging mode

In fact, our most often used jquery each function is a typical bridging mode, we simulate its implementation 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 through each function arr array, although this example is very common, but it contains a typical bridge mode.
In this example, the abstract part is the each function, which is the extended abstract class 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 bridging mode.

Bridging mode in plug-in development

One applicable scenario for bridging mode is component development. We usually develop components in order to adapt to different occasions, components corresponding to a number of different dimensions of the changes. Bridging mode can be applied to this, separating its abstraction from the implementation, making the component more scalable.
Let's say we want to develop a window widget, the window has different types: Ordinary message reminders, error reminders, each reminder is not the same way to display. This is a typical multidimensional variation of the scene. First we define two classes: the normal message window and the error message 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 earlier, that is, the extended abstract class, which contains a member animation.
Both types of Windows are displayed through the Show method, but the animation effects are different. We define two types of effects that are displayed:

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 that implement 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, you can define an effect class and pass it in.

Summarize

The key to learning bridging mode is to understand the separation between the abstract part and the realization part, so that the two can be changed independently, and not rigidly adhere to the form. JS plug-in flexible changes, the application of the changeable scene is very suitable for the use of this model to achieve. The most important thing to use in bridging mode is to find the different dimensions of the changes in the system.
(1) Advantages of bridging mode:
isolating abstraction from implementation helps to manage the components of the software independently.
(2) Bridge mode disadvantage:
Adding a function call every time you use a bridging element has a negative impact on the performance of your application. Improve the complexity of the system. If a bridging function is used to connect two functions, and one of the functions is not invoked outside the bridge function at this point, then the bridge function is not essential.
Bridging mode "separates abstraction from implementation so that the two can change independently". It facilitates the modularity of code, facilitates a simpler implementation, and increases the flexibility of abstraction. It can be used to connect a set of classes and functions, and provides a means of accessing private data using privileged functions.