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

Most people do not understand the knowledge points of this article "how to use the three factory modes of JavaScript", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "how to use the three factory modes of JavaScript".

Preface

Factory pattern (Factory Pattern) is one of the most commonly used design patterns.

This type of design pattern is a creative pattern, which provides the best way to create objects.

In factory mode, we do not expose the creation logic to the client when we create the object, and we point to the newly created object by using a common interface.

The factory model is divided into:

Simple factory model

Factory method model

Abstract factory pattern

1. Simple factory model

A simple factory pattern, also known as a static factory pattern, uses a factory object to create an instance of the same object class.

For example:

/ / 0.0.2/es5.simple.factory.jsfunction Role (options) {this.role = options.role;this.permissions = options.permissions;} Role.prototype.show = function () {var str ='is a'+ this.role +', permission:'+ this.permissions.join (',') Console.log (str)} function simpleFactory (role) {switch (role) {case 'admin':return new Role ({role:' administrator', permissions: ['set', 'delete', 'add', 'create', 'develop', 'push', 'ask', 'comment]}); break Case 'developer':return new Role ({role:' developer', permissions: ['Development', 'push', 'question', 'comment']}); break;default:throw new Error ('parameter can only be admin or developer');}} / / instance const xm = simpleFactory (' admin'); xm.show (); const xh = simpleFactory ('developer'); xh.show (); const xl = simpleFactory (' guest'); xl.show ()

ES6 is written:

/ / 0.0.2/simple.factory.jsclass SimpleFactory {constructor (opt) {this.role = opt.role;this.permissions = opt.permissions;} / / static method static create (role) {switch (role) {case 'admin':return new SimpleFactory ({role:' administrator', permissions: ['settings', 'delete', 'add', 'create', 'development', 'push', 'questions', 'comments]}) Break;case 'developer':return new SimpleFactory ({role:' developer', permissions: ['Development', 'push', 'question', 'comment']}); break;default:throw new Error ('parameter can only be admin or developer');}} show () {const str = `is a ${this.role}, permission: ${this.permissions.join (',')}; console.log (str) }} / / instance const xm = SampleFactory.create ('admin'); xm.show (); const xh = SampleFactory.create (' developer'); xh.show (); const xl = SampleFactory.create ('guest'); xl.show ()

In the above example, simpleFactory is a simple factory. Two instances correspond to different permissions. When you call the factory function, you only need to pass admin or developer to get the corresponding instance object.

Note: as a way to create a class pattern, you can use the factory method pattern wherever you need to generate complex objects. One thing to note is that complex objects are suitable for using factory patterns, while simple objects, especially those that can be created through new, do not need to use factory schemas. If you use the factory pattern, you need to introduce a factory class, which increases the complexity of the system.

Second, the factory method model

Defer the actual creation of objects to subclasses, and the core class becomes an abstract class.

In this way, there is no need to modify the factory method when adding a new class, just register the subclass in the prototype object of the factory method.

For example:

/ / 0.0.2/es5.function.factory.jsfunction FunctionFactory (role) {if (! (['admin',' developer'] .indexOf (role) >-1)) {throw new Error ('parameter can only be admin or developer');} / / secure factory method if (this instanceof FunctionFactory) {return this [role] ();} return new FunctionFactory (role) } FunctionFactory.prototype.show = function () {var str ='is a'+ this.role +', permission:'+ this.permissions.join (','); console.log (str)} FunctionFactory.prototype.admin = function (permissions) {this.role = 'administrator'; this.permissions = ['set', 'delete', 'add', 'create', 'develop', 'push', 'ask questions', 'comment'] } FunctionFactory.prototype.developer = function (permissions) {this.role = 'developer'; this.permissions = ['Development', 'push', 'question', 'comment'];} var xm = FunctionFactory ('admin'); xm.show (); var xh = FunctionFactory (' developer'); xh.show (); var xl = FunctionFactory ('guest'); xl.show ()

When you need to add a new class, just mount it in the FunctionFactory.prototype

The OCP principle is also implemented without modifying the factory method.

OCP (Open-Closed Principle, open-closed principle) was put forward by Bertrand Meyer in 1988, which means that "software entities (classes, modules, functions, etc.) should be extensible, but not modifiable."

Open for extension ("open for extension") means that the behavior (function) of a software module can be changed and extended.

Unmodifiable (Closed for modifications, that is, "closed for modification") means that when you extend a new function, you don't need to modify the original code module, but to add some new code.

Abstract factory pattern

The Abstract Factory pattern (Abstract Factory Pattern) is about creating other factories around one super factory. The super factory is also known as the factory of other factories. This type of design pattern is a creative pattern, which provides the best way to create objects.

Abstract factories only leave openings to the outside world, do nothing, and leave them to be overridden (subclasses override interface methods to specify their own object type when created). Mainly used for product clusters

Does not generate instances directly (both the simple factory pattern and the factory method pattern are generated instances).

For example, Jquery:

/ / 0.0.2/jquery.factory.js// factory mode class jQuery {constructor (selector) {let slice = Array.prototype.slice;let dom = slice.call (document.querySelectorAll (selector)); let len = dom? Dom.length: 0 for (let I = 0; I < len; I +) {this [I] = dom [I];} this.length = lenthis.selector = selector | |''} addClass (name) {console.log (name)} html (data) {} / / omitted multiple API} / / Factory mode window.$ = function (selector) {return new jQuery (selector);} / / instance const $li = $('li') $li.addClass (' item') The above is about the content of this article on "how to use the three factory models of JavaScript". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.