This is the 10th day of my participation in the More text Challenge. For more details, see more text Challenge

When you were starting out, were you asked what design patterns you knew? At that time, I was confused, there are design patterns on the front end, don’t you just need to write pages, write interactive events? At the time, I naively thought that as a front end, it would be enough to efficiently write pages based on the prototype and then write interaction events. However, with the development of the front-end, it is no longer just a front-end graph. With the development of technology, the requirements for the front-end are becoming higher and higher, so we have to continue to learn and expand our knowledge in order not to be abandoned by the industry. The most obvious benefit of learning design patterns is that they increase your competitiveness, improve code quality during development, and are helpful when dealing with large libraries.

What are design patterns?

A design pattern is a set of repeatedly used, widely known, cataloged code design experiences. The use of design patterns can refactor the overall architecture of the code, improve code reuse, reduce code redundancy, so that others can quickly understand the code we write. Common design patterns are generally singleton pattern, factory pattern, agent pattern, observer pattern, strategy pattern, and so on. Of course, in addition to these, there are many design patterns. This article first introduces the singleton pattern, factory pattern and agent pattern, and the rest of the patterns will be studied later.

The singleton pattern

What it means: a class has only one instance object, and the class can create its own instance. This class provides a global point of access to the singleton. For example, in Windows, only one task manager can be opened, and only one login pop-up can be displayed on the login page.

Here’s an example:

(function(){
  let example = null;
  return class{
      constructor(){
        if(! example){ example =this; // Save the first instance created
        }else{
          returnexample; }}}}) ()let p1= new Person();
let p2 = new Person();
console.log(p1===p2)  // Create the same instance twice, in this case only one instance of the class
Copy the code

The above singleton design pattern is implemented using closures. By saving the first instance object created, it ensures that each subsequent creation returns the first instance, so there is only one instance object per class.

The factory pattern

Meaning: As the name implies, the factory is based on the drawing model, the production of products required by users, no matter how the product is produced. The factory pattern is similar in that it is a creation design model used to create instance objects. When we use the factory pattern, we don’t need to find the class to create the instance. We just need to tell the factory class what kind of instance is needed, and it will automatically return the instance we need. In projects, we often need to render different pages according to the user’s permissions, so we can save the pages that the roles with different permissions can see in their constructors.

Here’s an example:

// Create a factory function
let FactoryClass = function(role) {
    if(this instanceof FactoryClass) {
        let obj = new this[role]()
        return obj
    } else {
        return new FactoryClass(role)
    }
}
// Add the constructor
FactoryClass.prototype = {
    Teachers: function(){
        this.name = "Teachers"
        this.permission = ['home'.'System Administration'.'Student Information Management']},Students: funciton(){
        this.name = "Student class"
        this.age = ['home'.'Personal Information']}}/ / call
let newTeacher = FactoryClass('Teachers')
let newStudent = FactoryClass('Students')
Copy the code

The proxy pattern

Meaning: A proxy object is provided for an object, and the proxy object controls the reference to the original object, mainly solving the problems caused by direct access to the object. Generally speaking, the agency model is actually the common intermediary in our life.

Here’s an example:

At present, it is the annual graduation season. If you want to find your own room, the process is as follows:

let yourself = {
    giveMoney() { // Give the landlord money to rent the house
      houseOwner.lease(3000)}}let houseOwner = {
    lease(money){
        console.log('Landlord receives money to rent house')
    }
}
yourself.giveMoney() // You give money to the landlord and the landlord rents the house to you
Copy the code

The above is the process of directly renting from the landlord, but the imagination is very beautiful, but the reality is very cruel, we do not have so much time to find a landlord one by one, and it is impossible to meet the landlord all the time on the street. Therefore, at this time, the real estate agent is needed. We only need to inform the agent of our needs, and the agent can help us to select the appropriate house, and directly sign a contract with the landlord, so that we do not have to meet with the landlord, we can rent the landlord’s house.

let yourself = {
    async giveMoney(money){
      await agent.receive(2000) // Before you rent a house with an agent, the agent needs to collect the house first
      agent.lease(money)  // The agent rents the house to you}}let agent = {
    receive(money){  // The intermediary to accept the house
        houseOwner.lease(money)
    }
    lease(money){
        console.log('Agent receives money to rent to tenant')}}let houseOwner = {
    lease(money){
        console.log('Landlord receives money to rent house to agent')
    }
}
yourself.giveMoney(3000) // You pay money to the agent to rent the house
Copy the code

This article is about these three design patterns, and the rest of the common design patterns will be updated in the future. If there are any deficiencies in this article, please give your advice.