Jsliang Job Search Series – 45 – Design Patterns series summary

Design patterns are a science, and there are 22+ types of design patterns.

Light sadness: although you learn, after a few months forget to come back to see you still understand.

Here are some common design patterns you can answer in a front-end interview:

Of course, if you know more, so much the better

Before we start reviewing design patterns, let’s review object orientation.

What is object oriented? We can compare it with process oriented:

• Process oriented: Focus on each part of the process
  • Eat egg fried rice (single dog version) : buy eggs, buy rice, steamed rice, scrambled eggs, fried rice, mix, stir, egg fried rice
• object-oriented: Focus on getting the object to do things
  • Eat egg fried rice (couples version) : Find a date, make egg fried rice, you eat egg fried rice

Reality may not sting, but Jsliang will.

Jsliang is also a single wang, so you first tied their own, don’t panic, with the heart

Object Oriented Programming (OOP) is a Programming development idea.

It abstracts all kinds of complex relationships in the real world into objects, and then completes the simulation of the real world through the division of labor and cooperation between objects.

1. Real needs (building)
2. What kind of people are needed (designer, porter, wall builder, carpenter, shopping guide…)
3. Division of Labor and cooperation
4. To complete the project

It’s like when you want to complete a project, you can configure Webpack + Babel and use React and Ant Design.

What does Webpack consist of? You can take it apart, fill it with loader and plugin, and eventually assemble it into a project.

Simply put: Object orientation is not about the process, it’s about who gets to do what.

There are three main features of object orientation: encapsulation, infrastructure, and polymorphism, which are described below.

Suppose we need to determine the target type:

Procedural writing

// Today A asks you to judge the type
const A = 'jsliang';
const AType = Object.prototype.toString.call(A);
console.log(AType); // [object String]

// B will see you tomorrow to judge the type
const B = 25;
const BType = Object.prototype.toString.call(B);
console.log(BType); // [object Number]

// C will come to you the day after tomorrow to judge the type
const C = { obj: 'girl' };
const CType = Object.prototype.toString.call(C);
console.log(CType); // [object Object]
Copy the code

This is like relative A looking for you to handle affairs today, relative B looking for you to handle affairs tomorrow, relative C looking for you to handle affairs the day after tomorrow, but what they want you to help do is to check so-and-so star.

Vexed not vexed, why other relatives is to introduce blind date, your relatives is to introduce the star.

So you have an idea:

Object-oriented writing

// Determine the type
const getType = (obj) = > Object.prototype.toString.call(obj);

// Today A asks you to judge the type
const A = 'jsliang';
console.log(getType(A)); // [object String]

// B will see you tomorrow to judge the type
const B = 25;
console.log(getType(B)); // [object Number]

// C will come to you the day after tomorrow to judge the type
const C = { obj: 'girl' };
console.log(getType(C)); // [object Object]
Copy the code

When you ask your relatives to use the “thousand degrees” software you wrote, the world suddenly quiet, congratulations on completing the maintenance of otaku characteristics.

Well, anyway, this is encapsulation.

It must be familiar to you to see here. In daily work, code that appears many times is generally extracted by encapsulation.

The advantage of encapsulation: The advantage of encapsulation is that the definition can only manipulate properties inside the class. There is no external control over properties, and only the encapsulation method you define can change them.

During the period of leaving, Jsliang was tired every night because he could not find a job. He would imagine that my father was a multimillionaire. In fact, he asked me to work just to let me withstand the test, and finally he would go home to inherit assets

Yeah, inheritance is pretty much what you would think of as inheritance, except there’s a method Father, and then Children inherit the contents of Father’s account.

The static properties and methods of Father are not inherited, just like you inherit assets, but you don’t need to inherit your Father’s bad habits.

It’s not good to shiver. Let’s look at the code.

ES5 write inheritance, here is a handwritten inheritance, using parasitic combinatorial inheritance.

const Father = function (name, like) {
  this.name = name;
  this.like = like;
  this.money = 10000000;
};

Father.prototype.company = function() {
  console.log(`The ${this.name} 有 The ${this.money}Yuan `);
}

const Children = function (name, like) {
  Father.call(this);
  this.name = name;
  this.like = like;
}

Children.prototype = Object.create(Father.prototype);
Children.prototype.constructor = Children;

const jsliang = new Children('jsliang'.'learning');
console.log(jsliang); // Children {name: "jsliang", like: "learning ", money: 10000000}
jsliang.company(); // jsliang has 10000000 yuan
Copy the code

This is an interview test to see if you can inherit by hand.

Of course, there are other inheritance methods, and this is one of the more complete inheritance methods found by Jsliang.

class Father {
  constructor(name, like) {
    this.name = name;
    this.like = like;
    this.money = 10000000;
  }
  company() {
    console.log(`The ${this.name} 有 The ${this.money}Yuan `);
  }
  Static methods do not inherit and can be called by class name
  static smoke() {
    console.log(`The ${this.name}Like to smoke.);
  }
}

Father.smoke(); // Father likes smoking

class Children extends Father {
  constructor(name, like) {
    super(a);this.name = name;
    this.like = like; }}const jsliang = new Children('jsliang'.'learning');
console.log(jsliang); // Children {name: "jsliang", like: "learning ", money: 10000000}
jsliang.company(); // jsliang has 10000000 yuan
jsliang.smoke(); // TypeError: jsliang.smoke is not a function
Copy the code

Note: Inheritance inherits instance properties and methods of the parent class, not static properties and methods, and static methods can only be called by class name.

Advantages of inheritance: inheritance reduces code redundancy and omits a lot of duplicate code. Developers can define attributes and methods that all subclasses must have from the bottom of the parent class to achieve the purpose of coupling.

Polymorphism can simply be understood as inheriting and having an understanding of it.

Polymorphism is represented by method overloading and method rewriting:

• Method overloading: Overloading is when different functions use the same function name but have different numbers or types of arguments. Call to distinguish between functions based on their arguments.
• Method rewriting: Rewriting (also called overwriting) is the reimplementation of a virtual function in a base class in a derived class. That is, the function name and parameters are the same, but the implementation body of the function is different.

So let’s do a polymorphic rewrite of ES5 and ES6.

const Father = function (name, like) {
  this.name = name;
  this.like = like;
  this.money = 10000000;
};

Father.prototype.company = function() {
  console.log(`The ${this.name} 有 The ${this.money}Yuan `);
}

const Children = function (name, like) {
  Father.call(this);
  this.name = name;
  this.like = like;
  this.money = 10000;
}

Children.prototype = Object.create(Father.prototype);
Children.prototype.constructor = Children;
Children.prototype.company = function() {
  console.log(`The ${this.name} 有 The ${this.money}Yuan `);
}

const father = new Father('Jsliang's dad'.'learning');
console.log(father); // Father {name: 'jsliang ', like: 'study ', money: 10000000}
father.company(); // Jsliang's dad has 10000000 yuan

const jsliang = new Children('jsliang'.'learning');
console.log(jsliang); // Children {name: 'jsliang', like: 'jsliang', money: 10000}
jsliang.company(); // jsliang has 10000 yuan
Copy the code

class Father {
  constructor(name, like) {
    this.name = name;
    this.like = like;
    this.money = 10000000;
  }
  company() {
    console.log(`The ${this.name} 有 The ${this.money}Yuan `); }}class Children extends Father {
  constructor(name, like) {
    super(a);this.name = name;
    this.like = like;
    this.money = 10000;
  }
  company() {
    console.log(`The ${this.name} 有 The ${this.money}Yuan `); }}const father = new Father('Jsliang's dad'.'smoking');
console.log(father); // Father {name: 'jsliang dad ', like: 'smoke ', money: 10000000}
father.company(); // Jsliang's dad has 10000000 yuan

const jsliang = new Children('jsliang'.'learning');
console.log(jsliang); // Children {name: 'jsliang', like: 'jsliang', money: 10000}
jsliang.company(); // jsliang has 10000 yuan
Copy the code

As expected, “engineer” is no future, dream is.

You need a like and Github Star, and the comments section of the bullet screen is full of “Next time”.

For hardcore ads, if you need to contact Jsliang, please go to GitHub homepage to find the contact information:

• Github

The advantages of polymorphism: polymorphism to achieve the method of personalization, different subclasses according to the specific situation can achieve different methods, light has a parent class definition of the method is not flexible, meet special situations will be insufficient.

There are six principles of design pattern: single responsibility principle, Richter substitution principle, dependence inversion principle, interface isolation principle, Demeter principle, open and closed principle.

Of course, we’re not “professional”, we’re interview oriented, so just keep these two rules in mind:

• Single responsibility principle: a class is responsible for only the corresponding responsibility in a functional area. Or: in the case of a class, there is only one cause for it to change.
• Open Closed Principle: The core idea is that software entities (classes, modules, functions, etc.) are extensible but not modifiable. In other words, it is open to expansion and closed to modification.

Let’s start by looking at design patterns one by one.

In everyday life, we know there are fructose factories, plastic factories.

The same is true of the factory pattern in design pattern.

The factory pattern is one of the most commonly used design patterns in JavaScript for creating objects. At its core, the factory pattern encapsulates the logic in a function without exposing the logic that created the object.

const Person = function() {
  const [name, age, sex] = [...arguments];
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.sayName = () = > {
    console.log(I call `The ${this.name}, genderThe ${this.sex}This year,The ${this.age}`); }};const p1 = new Person('jsliang'.25.'male');
const p2 = new Person('pretty girl'.25.'woman');

p1.sayName(); // My name is Jsliang. I am male and I am 25 years old
p2.sayName(); // My name is Jane, gender female, 25 years old
Copy the code

class Person {
  constructor(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
  sayName() {
    console.log(I call `The ${this.name}, genderThe ${this.sex}This year,The ${this.age}`); }}const p1 = new Person('jsliang'.25.'male');
const p2 = new Person('pretty girl'.25.'woman');

p1.sayName(); // My name is Jsliang. I am male and I am 25 years old
p2.sayName(); // My name is Jane, gender female, 25 years old
Copy the code

The factory pattern is designed to solve the problem of multiple similar object declarations, that is, to solve the problem of duplicate objects being implemented.

The advantages and disadvantages of the factory model are as follows:

• Advantages: Can solve multiple similar problems.
• Disadvantages: object recognition problems are not known (object type is not known)

Singleton mode means that a class can only construct a unique instance. The significance of singleton mode is shared and unique. Store in Redux/Vuex, $in jQuery, shopping cart and login box in business scenarios are all applications of singleton mode.

const Single = function (name, password) {
  this.name = name;
  this.password = password;
};

Single.prototype.login = (name, password) = > {
  if (!this.only) {
    this.only = new Single(name, password);
  }
  return this.only;
};

let user1 = new Single().login('jsliang'.'123456');
let user2 = new Single().login('zhazhaliang'.'654321');

console.log(user1 === user2); // true
console.log(user1); // Single { name: 'jsliang', password: '123456' }
console.log(user2); // Single { name: 'jsliang', password: '123456' }
Copy the code

class SingletonLogin {
  constructor(name, password) {
    this.name = name;
    this.password = password;
  }
  static getInstance(name, password) {
    // Determine whether the object has been created, if so, return the old object
    if (!this.instance) {
      this.instance = new SingletonLogin(name, password);
    }
    return this.instance; }}let obj1 = SingletonLogin.getInstance('jsliang'.'123456')
let obj2 = SingletonLogin.getInstance('zhazhaliang'.'654321')

console.log(obj1 === obj2)    // true
console.log(obj1)           // SingletonLogin { name: 'jsliang', password: '123456' }
console.log(obj2)           // SingletonLogin { name: 'jsliang', password: '123456' }
Copy the code

Here we will use the broker pattern and the intermediary pattern:

• Proxy pattern: The proxy pattern emphasizes individuals. By encapsulating the original class (the original method body), the client only needs to communicate with the proxy, which is a stand-in for the original class. In short, one object represents another object.
• Mediation patterns: Mediation patterns emphasize mutual independence. Define a mediation object to encapsulate the interaction between a family of objects. The mediator makes objects loosely coupled by not having to explicitly refer to each other and can change their interactions independently.

OK, let’s go through the code to understand the broker pattern and the mediator pattern

The code pattern is:

Jsliang wants to send flowers to his heartthrob, and then Jsliang is embarrassed, so he gets rid of his best friend to help send flowers, and the agent is the best friend.

// The girl
const Girl = function() {
  this.name = 'Heartbreaker';
  this.get = (person, gift) = > {
    console.log(`${person}toThe ${this.name} ${gift}`);
  };
}

// jsliang
const JSLiang = function() {
  this.name = 'jsliang';
  this.send = () = > {
    return '99 Roses'; }}/ / good elder brothers
const Friend = function(getUser) {
  this.getUser = new getUser();
  this.jsliang = new JSLiang();
  this.run = () = > {
    this.getUser.get(this.jsliang.name, this.jsliang.send()); }};// Best friends help to send gifts to different girls
const friend = new Friend(Girl);
friend.run(); // Jsliang gave her 99 roses
Copy the code

Ah, image is all gone, jsliang love each other, good friends should not break a leg, ha ha.

Application scenarios of proxy mode:

The application scenario of proxy mode is image preloading. In the preloading process, a loading character is used as the placeholder of an image before the image is loaded, and then the value is assigned after the loading is completed.

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>The proxy pattern</title>
</head>

<body>
  <div class="animation">Animated elements</div>

  <script>
    window.onload = function () {
      var myImage = (function () {
        var imgNode = document.createElement("img");
        document.body.appendChild(imgNode);
        return {
          setSrc: function (src) { imgNode.src = src; }}}) ();// Proxy mode
      var ProxyImage = (function () {
        var img = new Image();
        img.onload = function () {
          myImage.setSrc(this.src);
        };
        return {
          setSrc: function (src) {
            myImage.setSrc("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709264332&di=f6f8e48c1c88bf640aac9899df98a97c&i mgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fimages%2F20171107%2F643ceb1031394c588 7d3509b31878c52.gif");
            setTimeout(() = > {
              img.src = src;
            }, 3000); }}}) ();// Call mode
      ProxyImage.setSrc("Https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3592308877, & FM = 26 & gp = 0. 3684082784 JPG");
    };
  </script>
</body>

</html>
Copy the code

So what is the mediator pattern?

When a good friend wants to earn extra money, he remembers that he used to run errands for Jsliang, so he can also run errands for others, so the good friend becomes a middleman and sets up a Courier company.

// The girl
const Girl = function() {
  this.name = 'Heartbreaker';
  this.get = (person, gift) = > {
    console.log(`${person}toThe ${this.name} ${gift}`);
  };
}

// jsliang
const JSLiang = function() {
  this.name = 'jsliang';
  this.send = () = > {
    return '99 Roses'; }}// Express company
const Express = function(postUser, getUser) {
  this.postUser = new postUser();
  this.getUser = new getUser();
  this.run = () = > {
    this.getUser.get(this.postUser.name, this.postUser.send()); }};/ / Courier
const courier = new Express(JSLiang, Girl);
courier.run(); // Jsliang gave her 99 roses
Copy the code

Let’s say the girl jsliang likes is not in Guangzhou, then someone else needs to “help” to send the gift to the girl.

And this pattern, the intermediary pattern, acts as a middleman delivering information.

Here you can see the benefits of the proxy model:

1. Proxy objects can be instantiated in place of ontologies and made accessible remotely
2. Ontology instantiation can be deferred until it is really needed.

Of course, there are good and bad, in the code of proxy mode, the intermediary will take more responsibility, once the intermediary (Courier) sick, then your flowers will not be delivered.

Similarly, in real life, if you really like a girl, do it in person. You never hear the phrase “Does the girl who gets flowers every day end up marrying the delivery guy?”

Applicable scenarios of intermediary mode:

var goods = {
  // Mobile phone inventory
  "red|32G": 3."red|64G": 1."blue|32G": 7."blue|32G": 6};/ / broker
var mediator = (function () {
  var colorSelect = document.getElementById("colorSelect");
  var memorySelect = document.getElementById("memorySelect");
  var numSelect = document.getElementById("numSelect");
  return {
    changed: function (obj) {
      switch (obj) {
        case colorSelect:
          // TODO
          break;
        case memorySelect:
          // TODO
          break;
        case numSelect:
          // TODO
          break; }}}; }) (); colorSelect.onchange =function () {
  mediator.changed(this);
};
memorySelect.onchange = function () {
  mediator.changed(this);
};
numSelect.onchange = function () {
  mediator.changed(this);
};
Copy the code

Here will be the agent mode and the intermediary mode together, I believe that friends have seen, there is a reason.

Jsliang does not know if the proxy mode and intermediary mode will be used in real work, because I have never tried it, maybe in some scenarios, but I don’t think about it.

If you have a chance to work in the future, please pay attention to it. Is it possible to ask in the interview? I don’t know, because this is not a hot topic, you can learn about it

The publisk-subscribe pattern, also known as the observer pattern, defines a one-to-many relationship between objects. Multiple observer objects listen to a subject object at the same time. When an object changes, all dependent objects are notified.

Confused by the definition?

A real-life publish-subscribe model would be like Jsliang looking for a pair of shoes online, but they’re out of stock, and clicking on the seller’s shipping notice. When the seller has the goods, all buyers who click on (subscribe to) the shipping notification will see the notification.

Advantages and disadvantages of the publish-subscribe model:

• advantages

1. Support for simple broadcast communication. Objects that have been subscribed to are automatically notified when their state changes, as in the example above.
2. The coupling between publisher and subscriber is reduced. I’m the seller and I don’t care how many people subscribe, I just change the quantity when it arrives.

• disadvantages

1. Time consuming memory consumption. Creating subscribers takes time and memory
2. Overuse is bad for maintenance.

OK, with that said, let’s take a quick code example and talk about object.defineProperty and Proxy use in Vue.

// Define the publisher
const seller = {};

// Cache list: callback function to store subscribers
seller.buyerList = [];

// Subscribe method
seller.listen = (user, fn) = > {
  // If someone subscribes, store it in the cache list
  seller.buyerList.push(fn);
  console.log(` dear${user}, you have subscribed to the new shoe release);
}

// Publish information
seller.trigger = () = > {
  const buyerList = seller.buyerList;
  for (let i in buyerList) {
    if (buyerList.hasOwnProperty(i)) {
      buyerList[i].call(this); }}}const buyer1 = seller.listen('jsliang'.() = > console.log('The colour is black and the size is 43')); // Dear Jsliang, you have subscribed to the new shoe release
const buyer2 = seller.listen('zhazhaliang'.() = > console.log('The colour is red and the size is 44')); // Dear Zhazhaliang, you have subscribed to the new shoe release

// Assume the goods arrive in 2 seconds
setTimeout(() = > {
  seller.trigger();
}, 2000);

// The color is black and the size is 43
// The colour is red and the size is 44
Copy the code

This is a simple publish-subscribe model. If the seller has different products, how can two users focus on two different products? You can think about it.

In Vue 2.0, we observe data through Object.defineProperty:

const person = {
  name: 'jsliang'.age: 25};Object.keys(person).forEach((key) = > {
  Object.defineProperty(person, key, {
    enumerable: true.configurable: true.get: () = > {
      console.log('get');
    },
    set: (newName) = > {
      console.log(newName); }}); }); person.name ='zhazhaliang'; // zhazhaliang
console.log(person); // { name: [Getter/Setter], age: [Getter/Setter] }
Copy the code

Among them:

• enumerable: Indicates whether the object attribute can passfor-inCycle,falseIs not loopable. The default value istrue.
• configurable: Can you use ·, can you change attributes, or can you modify accessor attributes,falseIs not redefinable. The default value istrue.

So, let’s look at Proxy:

const queuedObserver = new Set(a);const observe = fn= > queuedObserver.add(fn);
const observeable = obj= > new Proxy(obj, {set});

const set = function(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObserver.forEach(observer= > observer());
  return result;
};

const person = observeable({
  name: 'jsliang'.age: 25});const print = () = > {
  console.log(` name:${person.name}Age:${person.age}`);
}
observe(print);

person.name = 'zhazhaliang'; // Name: Zhazhaliang, age: 25
Copy the code

So why did Vue 3.0 change to Proxy?

Pay attention. This is an interview question

Object. DefineProperty shortcomings:

1. Cannot listen for array changes
2. Each property of the object must be traversed

Proxy targets objects, which eliminates the need for traversal of attributes.

For more information, such as how to type in a page and bind the page to data, here is no longer a shock.

• It has everything you’re interested in

Just to be clear, ES6 Proxy is a Proxy schema.

Common observer patterns in daily work are:

• Promise
• NodeEventEmitterEvent listener
• The VueWatchDeclare the cycle hook

Fourteen articles are referenced in this series.

• Design patterns[Reading Suggestions: 1H]
• Common Javascript design patterns in detail[Reading Suggestions: 1H]
• JavaScript Design pattern【 Reading Suggestions: 20min】
• Collating common design patterns in JavaScript[Reading Suggestions: 1H]
• JavaScript common design pattern parsing【 Reading Suggestions: 20min】
• Dive into JavaScript design patterns, and you’ll have a theoretical basis for optimizing your code[Recommended Reading: 30min]
• Beauty of design patterns – front end[Reading Suggestions: 1H]
• Publish and subscribe is more powerful at work than you think[Recommended Reading: 30min]
• Build a state management system using native JavaScript【 Reading Suggestions: 20min】
• The difference between facade, broker, and mediator patterns【 Reading Suggestions: 1min】
• 【 Design pattern 】 The difference between appearance pattern, agent pattern and intermediary pattern【 Reading Suggestions: 3min】
• Proxy and Object.defineProperty introduction and comparison【 Reading Suggestions: 10min】
• Proxy and defineProperty implement data observation (observer mode)【 Reading Suggestions: 20min】
• Disadvantages of the Proxy Observer pattern and Object.defineProperty【 Reading Suggestions: 3min】

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.