JavaScript常用的設(shè)計(jì)模式

mengbo 發(fā)布于2019-08-21 17:14 / 3498人閱讀

摘要：前言設(shè)計(jì)模式幾十種，閱讀了設(shè)計(jì)模式與開發(fā)實(shí)踐這本書后，個人感覺就是圍繞對象來設(shè)計(jì)的，發(fā)現(xiàn)日常寫代碼能用上的并不多，下面是常用的幾種設(shè)計(jì)模式。前端服務(wù)端可以參考我的另一個倉庫地址，一個簡單的實(shí)時聊天參考來自設(shè)計(jì)模式與開發(fā)實(shí)踐讀書筆記

前言

設(shè)計(jì)模式幾十種，閱讀了《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》這本書后，個人感覺js就是圍繞對象來設(shè)計(jì)的，發(fā)現(xiàn)日常寫代碼能用上的并不多，下面是常用的幾種設(shè)計(jì)模式。

我的github，歡迎 star

模式列表

單例模式

策略模式

模板方法模式

職責(zé)鏈模式

發(fā)布訂閱模式

設(shè)計(jì)模式 單例模式

單一模式的核心是確保只有一個實(shí)例，并提供全局訪問，在 JS 開發(fā)中，經(jīng)常把用一個對象包裹，這樣減少了全局變量的污染，比如 var a = {}。

普通寫法:

  // 每次點(diǎn)擊點(diǎn)擊按鈕，都會創(chuàng)建一個 div
  var createLayer1 = (function () {
    var div = document.createElement("div");
      div.innerHTML = "我是內(nèi)容";
      div.style.display = "none";
      document.body.appendChild(div);
      return div;
  })()

  document.getElementById("#btn").onclick = function () {
    var layer1 = createLayer1();
    layer1.style.display = "block";
  }

單例模式：

  //實(shí)例對象總是在我們調(diào)用方法時才被創(chuàng)建，而不是在頁面加載好的時候就創(chuàng)建。  
  // 這樣就不會每次點(diǎn)擊按鈕，都會創(chuàng)建一個 div 了
  var createLayer2 = function () {
    var div;
    return function () {
      if (!div) {
        document.createElement("div");
        div.innerHTML = "我是內(nèi)容";
        div.style.display = "none";
        document.body.appendChild(div);
      }
      return div;
    }
  }

  document.getElementById("#btn").onclick = function () {
    var layer2 = createLayer2();
    layer2.style.display = "block";
  }

策略模式

策略模式代碼非常優(yōu)雅，最喜歡模式之一，也很便于修改，請看代碼。

普通模式：

  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);

策略模式：

  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);

模板方法模式

模板方法模式使用了原型鏈的方法，封裝性好，復(fù)用性差。

  var Coffee = function () {

  };
  Coffee.prototype.boilWater = function () {
    // todo
    console.log("把水煮沸");
  };
  Coffee.prototype.brewCoffee = function () {
    // todo
    console.log("沖咖啡");
  };
  Coffee.prototype.pourInCup = function () {
    // todo
    console.log("把咖啡倒進(jìn)杯子");
  };
  Coffee.prototype.addSugarAndMilk = function () {
    // todo
    console.log("加糖和牛奶");
  };
  Coffee.prototype.init = function () {
    this.boilWater();
    this.brewCoffee();
    this.pourInCup();
    this.addSugarAndMilk();
  }

  var coffee = new Coffee();
  coffee.init();

職責(zé)鏈模式

沒錯，我剛開始寫第一個項(xiàng)目時候就這么嵌套的，重復(fù)代碼太多，邏輯太亂，維護(hù)下太差。

  var order = function (orderType, pay, stock) {
    // 500 元定金模式
    if (orderType === 1) {
      if (pay === true) {
        console.log("500元定金預(yù)購，得到100元優(yōu)惠券");
      } else {
        if (stock > 0) {
          console.log("普通購買，無優(yōu)惠券");
        } else {
          console.log("手機(jī)庫存不足");
        }
      }
    // 200 元定金模式
    } else if (orderType === 2) {
      if (pay === true) {
        console.log("200元定金預(yù)購，得到50元優(yōu)惠券");
      } else {
        if (stock > 0) {
          console.log("普通購買，無優(yōu)惠券");
        } else {
          console.log("手機(jī)庫存不足");
        }
      }
    // 沒有定金模式  
    } else if (orderType === 3) {
      if (stock > 0) {
        console.log("普通購買，無優(yōu)惠券");
      } else {
        console.log("手機(jī)庫存不足");
      }
    } 
  }

  order(1, true, 500);

職責(zé)鏈，一系列可能處理請求的對象被連接成一條鏈，請求在這些對象之間依次傳遞，直到遇到一個可以處理它的對象，減少了很多重復(fù)代碼。

  var order500 = function (orderType, pay, stock) {
    if (orderType === 1 && pay === true) {
      console.log("500元定金預(yù)購，得到100元優(yōu)惠券");
    } else {
      order200(orderType, pay, stock);
    }
  }

  var order200 = function (orderType, pay, stock) {
    if (orderType === 2 && pay === true) {
      console.log("200元定金預(yù)購，得到50元優(yōu)惠券");
    } else {
      orderNormal(orderType, pay, stock);
    }
  }

  var orderNormal = function (orderType, pay, stock) {
    if (stock > 0) {
      console.log("普通購買，無優(yōu)惠券");
    } else {
      console.log("手機(jī)庫存不足");
    }
  }

  order500(1, true, 500);
  order500(1, false, 500);
  order500(2, true, 500);

發(fā)布-訂閱模式

發(fā)布訂閱模式，顧名思義，就是一個發(fā)布消息，一個監(jiān)聽消息，當(dāng)有消息接收時處理消息。

// js前端
  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)
    })
  };

  // 服務(wù)端
  io.on("connection", function (socket) {
    socket.on("chat message", function (msg) {
      console.log("receive a message: " + msg)
      io.emit("chat message", msg);
    });
  })

可以參考我的另一個倉庫地址，一個簡單的實(shí)時聊天 demo

參考

來自《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》讀書筆記

https://github.com/hankzhuo/s...