04. Simple factory of JavaScript design patterns -- simplefacotry

 

04. Simple factory for JavaScript design patterns ---- simplefacotry

The essence of the simple factory mode is that a factory class dynamically determines the product class instance to be created based on the input parameters. This article uses the native JavaScript language to simulate the design pattern of a simple factory.

Problem Introduction

Taking a bicycle as an example, a bicycle must undergo the following four stages: Assembly, cleaning, riding, and maintenance. You can use the following interface to represent it:

var Bicycle = new Interface("Bicycle",["assemble","wash","ride","repaire"]);

That is to say, all Bicycles must go through these four stages. That is to say, all bicycle classes are the implementation classes of the interface bicycle, such as the speedster bicycle, the speedster must contain four methods in the preceding steps. The code is represented:

var Speedster = function(){};Speedster.prototype = {    assemble : function(){},    wash : function(){},    ride : function(){},    repaire : function(){}};

The hidden code is implemented as follows:

VaR speedster = function () {}; // the following code is required implements (speedster, bicycle ); // For the implements method, see "javascript interface ---- interface" in the previous chapter"

If you want to open several bicycle shops and each store has several bicycle models (speedster, lowrider, comfortcruiser) for sale, how can this bicycle store be simulated?

Common Implementation Mode

VaR bicycleshop = function () {}; bicycleshop. prototype = {sellbicycle: function (model) {var bicycle; // production bicycle switch (model) {Case "Speedster": bicycle = new speedster (); break; case "lowrider": bicycle = new lowrider (); break; Case "comfort cruiser": Default: bicycle = new comfortcruiser ();} // bicycle assembly bicycle. assemble (); // bicycle cleaning bicycle. wash (); Return bicycle ;}}; // var bshop = new bicycleshop (); var newbicycle = bshop. sellbicycle ("lowrider ");

Using the above method, we successfully sold a "lowrider" bicycle. You can use a switch to create a bicycle instance based on the required bicycle model.

Simple factory Mode

But the problem arises. What if you want to create a new car in the supply catalog? To meet this requirement, You have to modify the code of the bicycleshop, even if the internal implementation of
The series and actual functions are not changed at all (it is still based on the user's needs to create a bicycle, assemble, clean, and then handed over to the user ). With this in mind, we need
Make an upgrade and hand over some code specifically used for bicycle production to a simple factory. This factory is only responsible for creating bicycles required by users. This is a bicycle factory, code Simulation:

VaR bicyclefactory = {createbicycle: function (model) {var bicycle; // bicycle production switch (model) {Case "Speedster": bicycle = new speedster (); break; case "lowrider": bicycle = new lowrider (); break; Case "comfort cruiser": Default: bicycle = new comfortcruiser ();} return bicycle ;}};

It is very easy to see from the code that this bicycle factory only does one thing, that is, creating a bicycle according to the user's needs.

In this way, our bicycle store can be simulated as follows:

VaR bicycleshop = function () {}; bicycleshop. prototype = {sellbicycle: function (model) {// here is the change var bicycle = bicyclefactory. createbicycle (model); // the following code is still not changed // bicycle assembly bicycle. assemble (); // bicycle cleaning bicycle. wash (); Return bicycle ;}}; // var bshop = new bicycleshop (); var newbicycle = bshop. sellbicycle ("lowrider ");

In this way, the bicycle production work is handed over to a dedicated factory to complete, even if a new type of bicycle is needed at this time, such as the "alien" card, you only need to add two lines of code to the bicyclefactory:

VaR bicyclefactory = {createbicycle: function (model) {var bicycle; // bicycle production switch (model) {Case "Speedster": bicycle = new speedster (); break; case "lowrider": bicycle = new lowrider (); break; Case "alien": // here is the newly added bicycle model, bicycle = new alien (); break; case "comfort cruiser": Default: bicycle = new comfortcruiser ();} return bicycle ;}};

Such modification has no impact on the bicycle store and provides the product to users.

This is a typical example of a simple factory design model. References: Ross harmes, Dustin Diaz, JavaScript Design Patterns

If the simulation is inappropriate or cannot be elaborated, please forgive me. Thank you!