Detailed description of the use of the Bridge Mode in JavaScript design mode development, and the javascript Design Mode

Detailed description of the use of the Bridge Mode in JavaScript design mode development, and the javascript Design Mode

The Bridge Mode separates the abstract part from the implementation part so that both parts can change independently and work together harmoniously. Both the abstract part and the implementation part can change independently without affecting each other. This reduces code coupling and improves code scalability.
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 of great benefit to common event-driven programming in Javascript.

One of the most common and practical scenarios of the bridge mode is the event listener callback function. Example: Event listener, which encapsulates the event processing statements into the callback function and uses interfaces instead of programming.

Basic Theory

Bridge Mode definition: separates abstract parts from their implementations so that they can all change independently.
The bridge mode consists of four roles:
(1) abstract class
(2) Expand the abstract class
(3) Implementation class Interface
(4) specific implementation class
Based on the characteristics of the javascript language, we can simplify it into two roles:
(1) Expand the abstract class
(2) specific implementation class
How can we understand the Bridge Mode? The following is an example.

Implementation of the Bridge Mode

To understand the idea of the bridge mode, the key is to understand the idea of separating the abstract part and the implementation part. Let's give an example.

Simplest Bridge Mode

In fact, the most common jQuery each function is a typical bridge 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 use the each function to loop through the arr array. Although this example is common, it contains a typical bridge mode.
In this example, the abstract part is the each function, that is, the expanded abstract class mentioned above, and the Implementation part is fn, that is, the specific implementation class. The abstract part and the implementation part can be changed independently. This example is simple, but it is a typical bridge application.

Bridging Mode in Plug-in development

One applicable scenario of the bridge mode is component development. We usually develop components to adapt to different situations, and the components may change in many different dimensions. The bridge mode can be used to separate abstraction and implementation to improve the scalability of components.
Suppose we want to develop a pop-up window plug-in. The pop-up window has different types: Common Message reminders, error reminders, and different display methods. 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 Part mentioned above, that is, the expanded abstract class. They all contain an animation member.
The two pop-up windows are displayed using 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 that implement specific display effects. So how can 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.

Summary

The key to learning the bridge mode is to understand the separation of the abstract part and the implementation part, so that the two can be changed independently without being stuck in the form. JS plug-ins can be flexibly changed. This mode is very suitable for different application scenarios. The most important thing to use the bridge mode is to find different changing dimensions in the system.
(1) Advantages of the Bridge Mode:
Isolating abstraction and implementation helps you manage the components of software independently.
(2) Disadvantages of the Bridge Mode:
Every time you use a bridge element, you need to add callback function calls, which has some negative impact on the application performance. Improves the complexity of the system. If a bridge function is used to connect two functions, and a function is not called outside the bridge function, the bridge function is not necessary at this time.
The Bridge Mode "isolates abstraction and implementation so that the two can change independently ". It can promote code modularization, facilitate more concise implementation, and improve the flexibility of abstraction. It can be used to connect a group of classes and functions, and provides a means to access private data by using privileged functions.