Common design patterns in JavaScript

preface

There are dozens of design patterns. After reading the book “JavaScript Design Patterns and Development Practices”, I feel that JS is designed around objects, and I find that daily writing code can be used for not much. Here are several commonly used design patterns.

Design patterns

The core of the single pattern is to ensure that there is only one instance and provide global access. In JS development, it is often wrapped in a single object, which reduces the contamination of global variables, such as var a = {}.

Common writing:

  //Every time you click on a button, you create a div
  var createLayer1 = (function () {
    var div = document.createElement('div');
      div.innerHTML = 'I am content';
      div.style.display = 'none';
      document.body.appendChild(div);
      returndiv; }) ()document.getElementById('#btn').onclick = function () {
    var layer1 = createLayer1(a);layer1.style.display = 'block';
  }
Copy the code

Singleton mode:

  //Instance objects are always created when we call methods, not when the page loads.
  //So you don't have to create a div every time you click on a button
  var createLayer2 = function () {
    var div;
    return function () {
      if (!div) {
        document.createElement('div');
        div.innerHTML = 'I am content';
        div.style.display = 'none';
        document.body.appendChild(div);
      }
      returndiv; }}document.getElementById('#btn').onclick = function () {
    var layer2 = createLayer2(a);layer2.style.display = 'block';
  }
Copy the code

The strategy pattern

Policy mode code is very elegant, one of my favorite patterns, and easy to modify, see the code.

Common mode:

  var awardS = function (salary) {
    return salary * 4
  };

  var awardA = function (salary) {
    return salary * 3
  };

  var awardB = function (salary) {
    return salary * 2
  };

  var calculateBonus = function (level.salary) {
    if (level = = = 'S') {
      return awardS(salary);
    }
    if (level = = = 'A') {
      return awardA(salary);
    }
    if (level = = = 'B') {
      return awardB(salary); }};calculateBonus('A'.10000);
Copy the code

Strategy mode:

  var strategies = {
    'S': function (salary) {
      return salary * 4;
    },
    'A': function (salary) {
      return salary * 3;
    },
    'B': function (salary) {
      return salary * 2; }}var calculateBonus = function (level.salary) {
    return strategies[level](salary);
  }

  calculateBonus('A'.10000);
Copy the code

The template method pattern uses the prototype chain method, which has good encapsulation and poor reusability.

  var Coffee = function() {};Coffee.prototype.boilWater = function () {
    // todo
    console.log('The water to a boil');
  };
  Coffee.prototype.brewCoffee = function () {
    // todo
    console.log('coffee');
  };
  Coffee.prototype.pourInCup = function () {
    // todo
    console.log('Pour the coffee into the cup');
  };
  Coffee.prototype.addSugarAndMilk = function () {
    // todo
    console.log('Add sugar and milk');
  };
  Coffee.prototype.init = function () {
    this.boilWater(a);this.brewCoffee(a);this.pourInCup(a);this.addSugarAndMilk(a); }var coffee = new Coffee(a);coffee.init(a);Copy the code

Chain of Responsibility model

Yes, it was nested like this when I started my first project, with too much repetitive code, too much logic, and poor maintenance.

  var order = function (orderType.pay.stock) {
    //500 yuan deposit mode
    if (orderType = = = 1) {
      if (pay = = = true) {
        console.log('500 yuan deposit, 100 yuan coupon');
      } else {
        if (stock > 0) {
          console.log('Regular purchase, no coupon');
        } else {
          console.log('Lack of mobile phone stock'); }}//200 yuan deposit mode
    } else if (orderType = = = 2) {
      if (pay = = = true) {
        console.log('200 yuan deposit, 50 yuan coupon');
      } else {
        if (stock > 0) {
          console.log('Regular purchase, no coupon');
        } else {
          console.log('Lack of mobile phone stock'); }}//No deposit model
    } else if (orderType = = = 3) {
      if (stock > 0) {
        console.log('Regular purchase, no coupon');
      } else {
        console.log('Lack of mobile phone stock'); }}}order(1.true.500);
Copy the code

Chain of responsibilities, where a series of objects that might handle a request are connected into a chain, and the request is passed from one object to another until one is found that can handle it, reducing a lot of repetitive code.

  var order500 = function (orderType.pay.stock) {
    if (orderType = = = 1 && pay = = = true) {
      console.log('500 yuan deposit, 100 yuan coupon');
    } else {
      order200(orderType, pay, stock); }}var order200 = function (orderType.pay.stock) {
    if (orderType = = = 2 && pay = = = true) {
      console.log('200 yuan deposit, 50 yuan coupon');
    } else {
      orderNormal(orderType, pay, stock); }}var orderNormal = function (orderType.pay.stock) {
    if (stock > 0) {
      console.log('Regular purchase, no coupon');
    } else {
      console.log('Lack of mobile phone stock'); }}order500(1.true.500);
  order500(1.false.500);
  order500(2.true.500);
Copy the code

The publish subscribe pattern, as the name implies, is a publish message, a listen message, and processes messages as they are received.

//Js front-end
  window.onload = function () {
    var socket = io.connect('http://localhost:20122?token=abc');
    socket.on('connect'.function() {
      socket.emit('message'.':chat socket')});socket.on('message'.function(data) {
      alert(data)
    })
  };

  //The service side
  io.on('connection'.function (socket) {
    socket.on('chat message'.function (msg) {
      console.log('receive a message: ' + msg)
      io.emit('chat message', msg);
    });
  })
Copy the code

Check out my other warehouse address, a simple live chat demo

reference

From reading notes on JavaScript Design Patterns and Development Practices
Github.com/hankzhuo/so…