This is the 29th day of my participation in the August More Text Challenge

Today, let’s look at some design patterns: (Singleton pattern, factory pattern, observer pattern)

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Ongoing update

Combined with their own understanding, simple and comprehensive summary of the basic knowledge points in the process of learning JavaScript in vernacular Chinese, easy to deepen understanding!

Let’s get started! Check the gaps! ‘Only a firm foundation can build a tall building ‘! Come on! Take it seriously!

Comb yesterday’s knowledge:

( Several ways of inheritance & closure & singleton pattern )

  1. Inheritance: A subclass inherits all the properties and functions of its parent class
  2. Inheritance method 2.1 by changing the execution environment of the parent class 2.2 throughcall 或 applyInheritance 2.3 Prototype inheritance 2.4 Hybrid Inheritance 2.5ES6Inheritance:extends
  3. ES6Constructor of
  4. Closures can access the private variables of another function within the body of a function
  5. Design pattern singleton pattern first met:

1. What are design patterns?

Design pattern is a set of repeatedly used, most people know, cataloged code Design experience summary.

  • The singleton pattern
  • The factory pattern
  • Observer model
  • The proxy pattern
  • The strategy pattern
  • Combinatorial patterns and so on

MV* –> MVC/MVVM is not one of the 23 design patterns

Use design patterns for

  • Reusable code,
  • Make code easier to understand,
  • Ensure code reliability.

A design pattern is an architectural level of programming specification

2. Singleton pattern of design pattern

Singleton: An object that can be instantiated (created) only once is called a singleton

Singleton: the literal object declaration {} can actually be considered as a singleton pattern in design mode. The singleton pattern is to keep an instance of an object forever.

3. Factory Mode of design Mode

Separate the caller of an object from the object creation process, and when the caller needs an object, he can simply ask the factory for it.

In order to improve the maintainability and extensibility of the system, the coupling between the caller and the implementation of the object is avoided.

4. Observer patterns of design patterns

The observer mode is also called Publish/Subscribe mode. It defines a one-to-many relationship, allowing multiple observer objects to listen to a topic object at the same time. When the status of the topic object changes, all observer objects will be notified, so that they can automatically update themselves.

A constructor notifies another constructor of a method to implement

Examples to understand the observer pattern:

Eg: The child cried —- hungry began to feed

The baby cried and told the father it was time to feed the baby

function Child(dad, mum) {
  this.dad = dad
  this.mum = mum
  this.cry = function () {
    // Observer mode
    // The baby cried and told the father it was time to feed the baby
    this.dad.weinai()
  }

  setTimeout(
    function () {
      this.cry()
    }.bind(this),
    Math.random() * 5000 + 300)}function Dad() {
  this.weinai = function () {
    alert('Milk powder for the baby ~~~')}}Copy the code

Preview: Come on, dream chasers

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Calm Down & Carry On!

Read more:

Review of previous updates

【 relearn JS】 Every day to strengthen the foundation of the series of articles:

Some kinds of modes of inheritance to JS 】 【 & closures & singleton pattern, prototype and prototype chain to JS 】 【 | | factory pattern constructors, consolidate the foundation – to revisit JS 】 【 object oriented/process/class and object oriented

Day23 – The front end also needs to understand some databases

【day1】

Day2 various operators, DAY3 data types, DAY4 loop structures & conditional statements, DAY5 functions (emphasis), day6 scopes & events,

【 DAY7 】 object & array method summary, 【day8】 string method & partial sorting,

【 DAY9 】Math object & Wrapper Function, 【 DAY10 】BOM- Browser object model,

【 DAY11 】DOM- Document Object Model

【 DAY13 】Event Event object first known (2),

【 DAY14 】 Event delegate & Drag principle

【 DAY15 】 Drag-and-drop implementation & regular introduction, 【 DAY16 】 regular specific method,

【 DAY17 】cookie, 【day18】ES6,

[DAY19] Js motion function encapsulation

[DAY21] Study and review in the first three weeks

[DAY22] Server and client

More on the way… A long way to go ==-.. – = =