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

This article introduces the relevant knowledge of "how to realize the es6 factory model". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Es6 has a factory pattern; the factory pattern encapsulates logic in a function that allows you to create objects without using constructors in es6, but use class with the static keyword to encapsulate a simple factory in a static method of the User class, with the syntax "class User {constructor} static static method () {}".

This tutorial operating environment: windows10 system, ECMAScript version 6. 0, Dell G3 computer.

Does es6 have factory mode?

ES6 provides us with a new syntax for class. Although class is essentially a syntax sugar and does not change that JavaScript is a language that uses prototype inheritance, it does make the process of creating and inheriting objects clearer and easier to read. Let's rewrite the above example using ES6's new syntax.

ES6 rewrites simple factory pattern

When we use ES6 to rewrite the simple factory pattern, instead of using the constructor to create the object, we use the new syntax of class and use the static keyword to wrap the simple factory in the static method of the User class:

/ / User class class User {/ / Constructor constructor (opt) {this.name = opt.name; this.viewPage = opt.viewPage } / / static method static getInstance (role) {switch (role) {case 'superAdmin': return new User ({name:' Super Admin', viewPage: ['Home', 'address Book', 'Discovery Page', 'Application data', 'Rights Management]}); break Case 'admin': return new User ({name:' administrator', viewPage: ['home page', 'address book', 'discovery page', 'application data']}); break; case 'user': return new User ({name:' ordinary user', viewPage: ['home page', 'address book', 'discovery page']}); break Default: throw new Error ('parameter error, optional parameters: superAdmin, admin, user')} / / call let superAdmin = User.getInstance (' superAdmin'); let admin = User.getInstance ('admin'); let normalUser = User.getInstance (' user')

Factory mode is the most common development mode, which encapsulates new operations separately, and factory mode should be considered when new is encountered. Create an object without exposing the code logic and write the logic into the function. This function is the factory mode. Advantages, simplicity. The disadvantage is that every time you add a constructor, you have to modify the code logic in the function.

The factory pattern is one of the most common design patterns used to create objects. Instead of exposing the specific logic for creating the object, we encapsulate the logic in a function that can be seen as a factory. Factory patterns can be divided into simple factories, factory methods and abstract factories according to the degree of abstraction.

People who have only been exposed to the language JavaScript may be a little vague about the concept of the word abstract, because JavaScript has always used abstract as a reserved word and has not implemented it. If you do not have a good understanding of abstract concepts, it is difficult to understand the similarities and differences of the three approaches in the factory pattern. So, let's start with a scene to briefly talk about the concept of abstraction and factory.

The simple factory pattern, also known as the static factory pattern, is determined by a factory object to create an instance of a product object class. It is mainly used to create the same kind of objects.

In actual projects, we often need to render different pages according to the user's permissions, and some pages owned by users with high-level permissions cannot be viewed by users with low-level permissions. So we can save the page that the user can see in the constructor of the user with different permission levels. The user is instantiated based on permissions.

The code is as follows:

Class SuperAdmin {constructor () {this.name = "Super Admin"; this.viewPage = ['home page', 'address book', 'discovery page', 'application data', 'rights management'];}} class Admin {constructor () {this.name = "administrator"; this.viewPage = ['home page', 'address book', 'discovery page', 'application data', 'rights management'] }} class NormalUser {constructor () {this.name = "ordinary user"; this.viewPage = ['Home', 'address Book', 'Discovery Page', 'Application data', 'Rights Management'];}} / / Factory method class class UserFactory {getFactory (role) {switch (role) {case 'superAdmin': return new SuperAdmin (); break; case' admin': return new Admin () Break; case 'user': return new NormalUser (); break; default: throw new Error (' parameter error, optional parameters: superAdmin, admin, user');} / / call let uesr = new UserFactory (); uesr.getFactory ('superAdmin'); uesr.getFactory (' admin'); uesr.getFactory ('user')

The advantage of a simple factory is that you only need one correct parameter to get the object you need without knowing the details of its creation. However, the creation logic (constructor) and judgment logic code of all objects are included in the function, and the judgment logic code needs to be modified each time a new constructor is added.

When our objects are not the above 3 but 30 or more, this function will become a huge super function and will be difficult to maintain.

Therefore, a simple factory can only be used when the number of objects created is small and the logic of object creation is not complex.

This is the end of the content of "how to implement the es6 factory model". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.