JavaScript design pattern series one: factory pattern

This article shares with you the JavaScript design pattern series: factory pattern. Friends who are interested can take a look at

Design pattern

Design pattern (design pattern) Concept:
is a set of repeated use, mature thinking, classification and summary of countless practical design experiences. It is to make the code reusable, extensible, decoupled, easier to understand and ensure code reliability.

There are 23 design patterns in total. Today I will first learn about Factory Pattern. The other patterns will be explained to you in subsequent blogs.

Foreword: This series of codes has been uploaded to the GitHub address https://github.com/HolyZheng/...

---

Factory mode

Factory mode, just like As its name suggests, it can produce what we want like a factory, as long as we provide the raw materials. In our daily coding process, it is very likely that we have used the factory pattern without knowing it. Let's look at a simple example:

//工厂模式很基础的的一个例子
function createPerson (name,age) {
  var person = new Object();
  person.name = name;
  person.age = age;
  return person;
}

var Holz = createPerson ("Holz", "21");
console.log(Holz);
/*
{
age: "21",
name: "Holz"
}
*/
var Tom = createPerson ("Tom", "7");
console.log(Tom);
/*
{
age: "7",
name: "Tom"
}
*/

In this function, I can create objects with different parameter values ​​by passing in different parameters. As you can see, the factory pattern is actually very simple.

Factory Pattern is mainly divided into simple factory pattern and abstract factory pattern.

Simple Factory Pattern

Simple Factory PatternThe pattern is mainly used to create objects of the same type. For example, we need an identity, teacher or student to create. You can use the following function:

//简单工厂模式。
var simpleCreatePerson = function (type, person) {
return this[type](person);
}

simpleCreatePerson.prototype = {
  student: function (person) {
    var Astudent = new Object();
    Astudent.name = person.name;
    Astudent.age = person.age;
    return Astudent;
  },
  teacher: function (person) {
    var Ateacher = new Object();
    Ateacher.name = person.name;
    Ateacher.age = person.age;
    return Ateacher;
  }
}

var teacher = new simpleCreatePerson("teacher", {name:"郑老师", age:25 });
var student = new simpleCreatePerson("student", {name:"郑同学", age:21 });

console.log(teacher);
/*
this is a teacher
{name:"郑老师", age: 25}
*/
console.log(student);
/*
this is a teacher
{name:"郑同学", age: 25}
*/

We can pass in different types such as "student" or "teacher" to create different objects, and then use different person objects to assign values ​​to the properties inside. Both "student" and "teacher" are persons, so the simple factory function is used to create different instances of the same type of object.

The above code uses the prototype _prototype_ to add two functions. (The knowledge about prototypes cannot be explained in one or two sentences. If you don’t understand, you can search online. Relevant information to understand) and then use this[type] to choose different methods. If you don’t understand here, I can explain it. This is an object pointing to the current function (in JavaScript, the function is an object), and then this[attribute name] /method name] to call internal attributes or methods, then this[type] (person) calls the corresponding method to instantiate a specific class (student or teacher). Called through this[type] (person).
This is a simple factory function.

Abstract Factory Pattern

Abstract Factory Pattern: Different from the simple factory function, the abstract factory function will first design the interface, and the specific implementation will be carried out in the subclass . The concept is a bit vague. Let's look at an example:

We define a parent class, abstractCreatePerson, which means creating a person, and then this person has a method for self-introduction selfIntroduction, then different people have different introduction content. At this time we can use the abstract factory pattern:

var abstractCreatePerson = function () {};

abstractCreatePerson.prototype = {
  selfIntroduction: function () {
    throw new Error("请先实例化此方法！");
  }
}

var student = Object.create(abstractCreatePerson.prototype);
student.selfIntroduction = function () {
  console.log("I am a sutdent, my name is holz!");
}
student.selfIntroduction();
/*
I am a sutdent, my name is holz!
*/
var teacher = Object.create(abstractCreatePerson.prototype);
teacher.selfIntroduction = function () {
  console.log("I am a teacher, my name is xxxx!");
}
teacher.selfIntroduction();
/*
I am a teacher, my name is xxxx!
*/

You can see this code, the parent classabstractCreatePerson First declare a method, and then inherit the parent class through the Object.create() method (because this will not overwrite the original prototype chain), and then we instantiate the method in the subclass. Different subclasses There are different instance methods.
This is the factory pattern, which improves the reusability of our code and reduces the coupling between modules.

---

Summary

• The factory model, just like its name, can produce what we want like a factory, as long as we provide the raw materials

• The factory pattern improves the reusability of our code and reduces the coupling between modules

• The factory pattern is mainly used to create the same type of Different instances of the object

The above is the detailed content of JavaScript design pattern series one: factory pattern. For more information, please follow other related articles on the PHP Chinese website!