Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the bridging mode in Javascript". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to realize the bridging mode of Javascript".

Basic theory

Bridge pattern definition: separate the abstract part from its implementation so that they can all change independently.

The bridging mode consists of four main roles:

(1) Abstract class

(2) extend the abstract class.

(3) implement class interface

(4) concrete implementation class

According to the characteristics of the javascript language, we simplify it into two roles:

(1) extend the abstract class

(2) concrete implementation class

How to understand the bridging mode? Let's give an example next.

Realization of bridging Mode

The key to understand the idea of bridging pattern is to understand its idea of separating abstract part from implementation part. Let's give an example to illustrate

The simplest bridging mode

In fact, the most frequently used each function of jQuery is a typical bridging mode, which we simulate as follows:

Var each = function (arr, fn) {for (var I = 0; I < arr.length; iTunes +) {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 the arr array through the each function, which is common, but contains a typical bridging pattern.

In this example, the abstract part is the each function, which is the extended abstract class mentioned above, and the implementation part is fn, that is, the concrete implementation class. The abstract part and the implementation part can change independently. Although this example is simple, it is a typical application of bridging mode.

Bridging Mode in plug-in Development

One applicable scenario for the bridging pattern is component development. We usually develop components in order to adapt to different situations, components will correspondingly have many different dimensional changes. The bridging pattern can be applied to this, separating its abstraction from the implementation and making the component more scalable.

Suppose we are going to develop a pop-up plug-in with different types of pop-ups: normal message reminders, error alerts, and each reminder is displayed in a different way. This is a typical scenario of multi-dimensional change. First, we define two classes: the normal message pop-up window and the 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 earlier, that is, extended abstract classes, both of which contain a member animation.

The two pop-up windows are displayed by the show method, but the animation effects are different. We define the 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 concrete implementation classes, and they implement specific display effects. So how do we call it?

1 var message = new MessageDialog (new LinerAnimation ())

2 message.show ()

3 var error = new ErrorDialog (new EaseAnimation ())

4 error.show ()

At this point, I believe you have a deeper understanding of "how to achieve bridging mode in Javascript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.