Does es6 have factory mode?

es6 has a factory mode; the factory mode encapsulates logic into a function. In es6, you can create objects without using a constructor, but use class with the static keyword to encapsulate a simple factory into a static method of the User class. , the syntax is "class User{constructor}static static method(){}".

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

Does es6 have a factory mode?

ES6 provides us with the new syntax of class. Although class is essentially a syntactic sugar, it does not change that JavaScript is a language that uses prototypal inheritance. It really makes the process of object creation and inheritance clearer and easier to read. Let’s rewrite the above example using ES6’s new syntax.

ES6 rewriting the simple factory pattern

When rewriting the simple factory pattern using ES6, we no longer use the constructor to create objects, but use the new syntax of class, And use the static keyword to encapsulate a simple factory into the static method of the User class:

//User类
class User {
  //构造器
  constructor(opt) {
    this.name = opt.name;
    this.viewPage = opt.viewPage;
  }
  //静态方法
  static getInstance(role) {
    switch (role) {
      case 'superAdmin':
      return new User({ name: '超级管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据', '权限管理'] });
        break;
      case 'admin':
        return new User({ name: '管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据'] });
        break;
      case 'user':
        return new User({ name: '普通用户', viewPage: ['首页', '通讯录', '发现页'] });
        break;
      default:
        throw new Error('参数错误, 可选参数:superAdmin、admin、user')
    }
  }
}

//调用
let superAdmin = User.getInstance('superAdmin');
let admin = User.getInstance('admin');
let normalUser = User.getInstance('user');

Factory mode is the most common development mode. The new operation is encapsulated separately. When encountering new, the factory mode should be considered . Create objects without exposing code logic and write the logic into functions. This function is the factory pattern. Advantages: simplicity. The disadvantage is that every time a constructor is added, the code logic in the function must be modified.

Factory pattern is one of the most commonly used design patterns for creating objects. We do not expose the specific logic of creating objects, but encapsulate the logic in a function, then this function can be regarded as a factory. Factory patterns can be divided into simple factories, factory methods and abstract factories according to different levels of abstraction.

If you have only been exposed to the JavaScript language, the concept of abstract may be a bit vague, because JavaScript has always regarded abstract as a reserved word and has not implemented it. If you don't understand abstract concepts well, it will be difficult to understand the similarities and differences of the three methods in the factory pattern. Therefore, let us first briefly describe the concepts of abstraction and factory with a scenario.

Simple factory mode is also called static factory mode. A factory object determines to create an instance of a certain product object class. Mainly used to create objects of the same type.

In actual projects, we often need to render different pages based on user permissions. Some pages owned by users with high-level permissions cannot be viewed by users with low-level permissions. So we can save the pages that the user can see in the constructor of users with different permission levels. Instantiate users based on permissions.

The code is as follows:

class SuperAdmin{
  constructor(){
    this.name = "超级管理员";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
class Admin{
  constructor(){
    this.name = "管理员";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
class NormalUser{
  constructor(){
    this.name = "普通用户";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
//工厂方法类
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('参数错误, 可选参数:superAdmin、admin、user');
   }
  }
 }
 
//调用
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 specific details of its creation. However, the function contains the creation logic (constructor) and judgment logic code of all objects. Every time a new constructor is added, the judgment logic code needs to be modified.

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.

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

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of Does es6 have factory mode?. For more information, please follow other related articles on the PHP Chinese website!