This is the sixth day of my participation in Gwen Challenge

Design patterns are the concise and optimized solutions we give to a particular problem when solving a problem. Here I’ll briefly talk to you about three design patterns commonly used in the front end

Each pattern describes a recurring problem around us and the core of the solution to that problem. This way, you can use the solution again and again without having to rework. – Christopher Alexander

The core idea of design patterns

Design patterns emerge against a background of increasing complexity in software design. The culprit behind the increasing complexity of software design is change. For example, if we write an application that will not be iterated or optimized at all, then we can write it as we like, just to implement the function, and we don’t have to worry about its maintenance and upgrade.

But in real development, code that doesn’t change doesn’t exist. The only thing we can do is to minimize the impact of this change — to separate the change from the constant, to make sure that the changed parts are flexible and the unchanged parts are stable.

This process is called “encapsulation change”; Such code is what we call “robust” code that can withstand changes. The point of design patterns is to help us write code like this.

Classification of design patterns

In the book Design Patterns: The Foundation of Reusable Object-oriented Software, design patterns are divided into 23 categories based on “creative,” “behavioral,” and “structural.”

There are many design patterns, but there are not so many in actual project development. In this video, we will take a brief look at the singleton and composite patterns that are often used in projects.

📚 Singleton mode

concept

A pattern that guarantees only one instance of a class and provides a global access point to access it is called a singleton pattern.

This model is quite common, with Redux and Vuex being the most widely used. Both Redux and Vuex implement a global Store for storing all the state of an application. This Store implementation is a typical application of the singleton pattern.

Simple implementation

// Prepare a constructor
// In the future new
function Person() {}

// Prepare a singleton pattern function
// This singleton function makes Person a singleton
// When you want a new Person in the future, just execute the singleton function
function singleton () {
  let instance
  
  if(! instance) {// If instance has no content
    // Show that instance has no content
    // Assign it a new Person
      instance = new Person()
  }
  
  // Always return the first instance of new Person
  // Is always an instance
  return instance
}

const p1 = singleton()
const p2 = singleton()
console.log(p1 === p2) // true

Copy the code

The core code of the singleton pattern is very simple, in fact, it is to determine whether he has ever new object, if so, continue to use the previous object, if not, then give you a new object.

📚 Combination mode

concept

Objects are organized in a tree structure to achieve a partial-whole hierarchy, so that clients can use single objects and combined objects consistently

class GetHome {

    init () {
        console.log('Home')}}class OpenComputer {

    init () {
        console.log('Turn on the computer')}}class LookTv {

    init () {
        console.log('Look at xia Mu Friend's account')}}Copy the code

The above constructors create instantiated objects that start in the same way, so we can write these functions in composite mode and start them all together

Class composure {constructor () {this.pose = []} add (task) {this.pose. Push (task)} // a method for executing tasks execute () { this.compose.forEach(item => { item.init() }) } }Copy the code

Let’s use our composite pattern constructor to combine the previous functions

C = new Compose() const c = new Compose() // Compose all tasks to be completed in the queue c.dd (new GetHome()) C.dd (new OpenComputer) c.dd (new PlayGame) // C. execute() // executes the init functions on the three objects in orderCopy the code