最近有時(shí)間看看書，看了JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐這本書，之前草草看過這本書，已經(jīng)忘的差不多了，很多關(guān)于設(shè)計(jì)模式的書都是基于類的，這本書基于javascript的語言特點(diǎn)講了設(shè)計(jì)模式，把看到的實(shí)踐總結(jié)一遍才會變成自己的。

單例模式

這應(yīng)該是最簡單的一種設(shè)計(jì)模式，在應(yīng)用中我們通常需要一個(gè)單獨(dú)的實(shí)例來實(shí)現(xiàn)一些功能，比如線程池，登錄框，任務(wù)隊(duì)列。
例如這樣

function Single(name) {
  this.name = name;
  this.instance = null;
}
Single.getInstance = function(name) {
  if (!this.instance) {
    this.instance = new Single(name);
  }
  return this.instance;
};
var a = Single.getInstance("小明");
var b = Single.getInstance("小周");
console.log(a === b);

我們實(shí)現(xiàn)一個(gè)單例的方法還需要?jiǎng)?chuàng)建一個(gè)類，在執(zhí)行一個(gè)類上的方法，這樣寫代碼有些受java等面向?qū)ο笳Z言的干擾，利用js的特性可以直接實(shí)現(xiàn)一個(gè)單例模式，全局變量就是唯一的一個(gè)實(shí)例，但使用全局變量會引起變量污染問題，我們可以使用閉包來實(shí)現(xiàn)一個(gè)簡單的單例

// 實(shí)現(xiàn)一個(gè)代理的通用方法
var single = (function() {
  var instance;
  return function getInstance(fn) {
    if (!instance) {
      instance = fn.apply(this, [].slice.call(arguments, 1));
    }
    return instance;
  };
})();

// 單例模式具體執(zhí)行的方法
var createDiv = function(html) {
  var div = document.createElement("div");
  div.innerHTML = html;
  document.body.appendChild(div);
  return div;
};

var div1 = single(createDiv, "single1");
var div2 = single(createDiv, "single2");
console.log(div1 === div2);

根據(jù)單一職責(zé)的實(shí)踐，我們將負(fù)責(zé)單一實(shí)例的功能與具體執(zhí)行的方法分開設(shè)計(jì)，這樣保證了更好的通用性，和方便以后對方法進(jìn)行修改。其實(shí)我們在一些常用的方法中已經(jīng)用過這種模式，比如我們通常用來優(yōu)化頁面滾動(dòng)的函數(shù)截流和函數(shù)防抖。都是在滾動(dòng)的時(shí)候保證只有一個(gè)單例的方法去執(zhí)行自定義的邏輯，防止函數(shù)被多次調(diào)用。

策略模式

我們在寫代碼時(shí)經(jīng)常會寫if else邏輯判斷的代碼
例如年終評績效時(shí)得 A 會發(fā) 4 倍工資，B 是 3 倍工資，C 是 2 倍工資

/**
 * 獲取年終獎(jiǎng)金
 * @param {string} performance // 績效
 * @param {number} wage 基本工資
 */
function getBouns(performance, wage) {
  if (performance === "A") {
    return 4 * wage;
  } else if (performance === "B") {
    return 4 * wage;
  } else if (performance === "C") {
    return 4 * wage;
  }
}

這是很常見的代碼編寫，當(dāng)邏輯比較少的時(shí)候這樣寫是最佳的，但當(dāng)我們有很多判斷邏輯，并且之后可能會頻繁修改就需要用到策略模式了。下邊是用傳統(tǒng)方式實(shí)現(xiàn)的策略模式

// 下邊是績效類
function performanceA() {}
performanceA.prototype.caculate = function(wage) {
  return 4 * wage;
};
function performanceB() {}
performanceB.prototype.caculate = function(wage) {
  return 3 * wage;
};
function performanceC() {}
performanceC.prototype.caculate = function(wage) {
  return 2 * wage;
};
/**
 * 工資計(jì)算類
 * @param {*} performance
 * @param {*} wage
 */
function Bouns(performance, wage) {
  this.performance = performance;
  this.wage = wage;
}
Bouns.prototype.getBouns = function() {
  return this.performance.caculate(this.wage);
};

var bouns = new Bouns(new performanceA(), 10000);
console.log(bouns.getBouns());

在 java中我們要實(shí)現(xiàn)任何方法都要依賴類來實(shí)現(xiàn)，通過類去實(shí)例化對象。我們想要針對不同的條件去執(zhí)行不同的類，其實(shí)還是要ifelse的判斷。二期對于一個(gè)固定的對象我們還實(shí)現(xiàn)了構(gòu)造函數(shù)，有些畫蛇添足。在js中我們可以直接定義對象字面量，向下邊這樣

// 定義所有策略對象
var performances = {
  A: function(wage) {
    return wage * 4;
  },
  B: function(wage) {
    return wage * 3;
  },
  C: function(wage) {
    return wage * 2;
  }
};

function getBouns(performance, wage) {
  if (performances[performance]) {
    return performances[performance](wage);
  }
  throw new Error("performance is not define");
}

var bouns = getBouns("A", 10000);
console.log(bouns);

這里直接使用一個(gè)對象來接收所有計(jì)算獎(jiǎng)金的邏輯，我們的業(yè)務(wù)代碼getBouns在遇到修改比如我想加一個(gè)S的績效不用改變，我們直接修改performances這個(gè)承載所有計(jì)算邏輯的對象就可以實(shí)現(xiàn)業(yè)務(wù)的修改

這里再舉一個(gè)例子，我們可以使用策略模式實(shí)現(xiàn)一個(gè)js動(dòng)畫，我們使用動(dòng)畫的時(shí)候經(jīng)常會用css的動(dòng)畫，transtion的屬性有ease,linear代表運(yùn)動(dòng)速率函數(shù)，left,width代表要改變的css屬性，我們可以使用策略模式來簡單實(shí)現(xiàn)一個(gè)基于js的動(dòng)畫方法

// 計(jì)算運(yùn)動(dòng)的算法，4個(gè)參數(shù)是已消耗時(shí)間，原始位置，位置間的差距，持續(xù)的總時(shí)間
const motions = {
  linear: function(t, b, c, d) {
    return (c * t) / d + b;
  },
  ease: function(t, b, c, d) {
    return c * (t /= d) * t + b;
  }
};

/**
 * 動(dòng)畫的主方法，模仿css的屬性參數(shù)
 */
class Animate {
  /**
   *
   * @param {*} dom 需要修改的dom元素
   * @param {*} property 要改變的style屬性
   * @param {*} target 改變style的目標(biāo)值
   * @param {*} time 運(yùn)動(dòng)的時(shí)間
   * @param {*} motion 運(yùn)動(dòng)函數(shù)
   */
  constructor(dom, property, target, time, motion) {
    this.dom = document.querySelector(dom);
    this.property = property;
    this.startDom = +getComputedStyle(this.dom)[property].replace("px", "");
    this.startTime = +new Date();
    this.curTime = this.startTime;
    this.time = time;
    this.end = this.startTime + time;
    this.endDom = target;
    this.motion = motions[motion];
  }
  /**
   * 開始執(zhí)行動(dòng)畫
   */
  start() {
    this.timer = setInterval(() => {
      this.step();
    }, 60);
  }
  // 每一步執(zhí)行的具體步驟
  step() {
    this.curTime = +new Date();
    if (this.curTime > this.end) {
      clearInterval(this.timer);
      this.update(this.endDom);
      return;
    }
    var p = this.motion(
      this.curTime - this.startTime,
      this.startDom,
      this.endDom - this.startDom,
      this.time
    );
    this.update(p);
  }
  // 更新dom的方法
  update(value) {
    this.dom.style[this.property] = value + "px";
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #box{
      background: red;
      width: 100px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="./Animate.js"></script>
  <script>
    window.onload = function(){
      var animate  = new Animate("#box", "width", 200, 1000, "linear")
      animate.start()
    }
  </script>
</body>
</html>

這樣利用策略模式我們就可以模擬一個(gè)類似css動(dòng)畫的方法庫，在頁面中可以看到一個(gè)方塊勻速變大到200px的過程。我們想換一種運(yùn)動(dòng)方式只需要將linear改為ease。還有很多種實(shí)際應(yīng)用，我們可以在實(shí)際開發(fā)中應(yīng)用，例如表單校驗(yàn)，目前組件化流行，根據(jù)不同的數(shù)據(jù)展示不同的組件。都可以幫我們更好的優(yōu)化代碼。不用設(shè)計(jì)也可以實(shí)現(xiàn)所有功能，設(shè)計(jì)模式只是幫我們更好的使代碼邏輯更清晰，更好維護(hù)代碼，更好復(fù)用代碼。