Design patterns are not unique to a particular language, but a design concept. Now learn about Javascript design patterns.

Factory model

The goal of factory pattern design is to create instantiated objects according to different requirements. We will gradually explain the usage of Engineering patterns in depth through a specific requirement.

One of the requirements we need to achieve is to make a music player, which has four buttons: the last one, the next one, play pause, mute.

To meet the above requirements, we first write a method according to the simplest factory model.

 1 <script>
 2     function WangyiMusicAction(action) {
 3         var obj = new Object;
 4         obj.vender = "NetEase cloud music";
 5         obj.playingMusic = "see you again";
 6 
 7         switch (action) {
 8             case "last":
 9                 obj.information = { currentMusic: "Little Luck", status: "200|404", message: "Last song" };
10                 break;
11             case "next":
12                 obj.information = { currentMusic: "Wild son", status: "200|404", message: "Next song" };
13                 break;
14             case "play":
15                 obj.information = { currentMusic: "see you again", status: "200|500", message: "play" };
16                 break;
17             case "mute":
18                 obj.information = { currentMusic: "see you again", status: "200|500", message: "Mute" };
19                 break;
20         }
21 
22         return obj;
23     };
24 
25     /***Here is the call test code***/
26     var music = new WangyiMusicAction("next");
27     console.log("Music providers:" + music.vender); // NetEase cloud music
28     console.log("Playing:" + music.playingMusic); // see you again
29     console.log("Execution action:" + music.information.message); // Next song
30     console.log("Interface state:" + music.information.status); // 200|404
31     console.log("After performing the action, the song:" + music.information.currentMusic); //Wild son
32 
33 </script>

By passing different parameters to action, different player states can be obtained.

Object-Oriented Concept

However, the above method does not use the concept of object-oriented, we use object-oriented thinking to re-modify the above method.

 1 <script>
 2     var WangyiMusicAction = function () {
 3         this.vender = "NetEase cloud music";
 4         this.playingMusic = "see you again";
 5     };
 6 
 7     //Expand it prototype attribute
 8     WangyiMusicAction.prototype = {
 9         last: function () {
10             this.information = { currentMusic: "Little Luck", status: "200|404", message: "Last song" };
11         },
12         next: function () {
13             this.information = { currentMusic: "Wild son", status: "200|404", message: "Next song" };
14         },
15         play: function () {
16             this.information = { currentMusic: "see you again", status: "200|500", message: "play" };
17         },
18         mute: function () {
19             this.information = { currentMusic: "see you again", status: "200|500", message: "Mute" };
20         }
21     };
22 
23 
24     /***Here is the call test code***/
25     var music = new WangyiMusicAction();
26     console.log("Music providers:" + music.vender); // NetEase cloud music
27     console.log("Playing:" + music.playingMusic); // see you again
28 
29     music.next(); // Perform the next action
30     console.log("Execution action:" + music.information.message); // Next song
31     console.log("Interface state:" + music.information.status); // 200|404
32     console.log("After performing the action, the song:" + music.information.currentMusic); //Wild son
33 
34 </script>

In the above object-oriented factory pattern, create a WangyiMusicAction object and extend its prototype attribute so that each instance has its own method.

Improving factory model

In the factory mode above, only WangyiMusicAction objects can be generated. If I want to generate a Q QQMusic and Baidu Music, XiamiMusic, only every music has to write the method once, it is not recommended.

We can create various types of Music dynamically through a Factory, starting with Wangyi Music Action.

Optimizing Factory Model

But in the factory model above, we found that attributes shared by different music providers can be encapsulated as an object for parent inheritance.

1. Define the parent class

2. Inheritance
Inheritance is achieved by modifying the prototype attribute.

3. Establish Factory

Build a factory to dynamically generate WangyiMusic or QQMusic, then generate an instance of QQQMusic, and call the corresponding method.

 1 <script>
 2     //Base class (parent class) Music Method
 3     var BaseMusic = function () {
 4         this.playingMusic = "see you again";
 5         this.information = {
 6             currentMusic: "",
 7             status: "",
 8             message: ""
 9         };
10     };
11 
12     //Implementing a General Method
13     BaseMusic.prototype = {
14         last: function () {
15             this.information.currentMusic = "Little Luck";
16             this.information.status = "200|404";
17             this.information.message = "Last song";
18         },
19         next: function () {
20             this.information.currentMusic = "Wild son";
21             this.information.status = "200|404";
22             this.information.message = "Next song";
23         },
24         play: function () {
25             this.information.currentMusic = "see you again";
26             this.information.status = "200|500";
27             this.information.message = "play";
28         },
29         mute: function () {
30             this.information.currentMusic = "see you again";
31             this.information.status = "200|500";
32             this.information.message = "Mute";
33         }
34     };
35 
36 
37     //Netease Cloud Music is Different from the Father's Construction Method
38     var WangyiMusicAction = function (action) {
39         this.vender = "NetEase cloud music";
40     };
41     //adopt prototype Implementing Class Inheritance
42     WangyiMusicAction.prototype = new BaseMusic(); //Place actions in base classes to achieve code reuse
43 
44     //QQ Music is different from paternity in its construction
45     var QQMusicAction = function (action) {
46         this.vender = "QQ Music";
47     };
48     //adopt prototype Implementing Class Inheritance
49     QQMusicAction.prototype = new BaseMusic(); //Place actions in base classes to achieve code reuse
50 
51 
52     //Music Factory
53     var MusicFactory = function (type) {
54         switch (type) {
55             case "wangyi":
56                 return new WangyiMusicAction();
57             case "qq":
58                 return new QQMusicAction();
59         }
60     };
61 
62     /***Here is the call test code***/
63     var music = new MusicFactory("wangyi");
64     console.log("Music providers:" + music.vender);
65     console.log("Playing:" + music.playingMusic);
66 
67     music.next(); // Perform the next action
68     console.log("Execution action:" + music.information.message);
69     console.log("Interface state:" + music.information.status);
70     console.log("After performing the action, the song:" + music.information.currentMusic);
71 
72 </script>

By inheriting the parent class scheme mentioned above, the code structure can be optimized and the factory pattern can be used more concisely.