摘要：什么是策略模式說(shuō)到設(shè)計(jì)模式一般人像我一樣的新鳥(niǎo)們首先想到的是單例模式哇單例模式又是什么假設(shè)有個(gè)需求有四種計(jì)算方法輸出輸入其中使用單例模式如下這么做的話會(huì)保證一個(gè)類僅有一個(gè)實(shí)例并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)但是問(wèn)題來(lái)了如果我有成百上千的方法會(huì)特

說(shuō)到設(shè)計(jì)模式, 一般人(像我一樣的新鳥(niǎo)們)首先想到的是單例模式!. 哇, 單例模式又是什么? ....^&^%^

假設(shè)有個(gè)需求: 有A,B,C,D四種計(jì)算方法, y(輸出) = x(輸入) * n, 其中A(n=2),B(n=4),C(n=6),D(n=8).

使用單例模式如下:

var obj = (function() {
  var logA = function(x) {
    console.log(x * 2);
  };
  var logB = function(x) {
    console.log(x * 4);
  };
  var logC = function(x) {
    console.log(x * 6);
  };
  var logD = function(x) {
    console.log(x * 8);
  };

  return {
    logA: logA,
    logB: logB,
    logC: logC,
    logD: logD,
  }
})();

obj.logA(2); // 4
// 這么做的話, 會(huì)保證一個(gè)類僅有一個(gè)實(shí)例, 并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn).

但是問(wèn)題來(lái)了, 如果我有成百上千的方法, 會(huì)特別難維護(hù).

定義: 定義一系列的算法, 把它們一個(gè)個(gè)封裝起來(lái), 并且使它們可以相互替換.
不太懂?沒(méi)關(guān)系, 先上代碼!

var logTypes = {
  A: function(x) {
    console.log(x * 2);
  },
  B: function(x) {
    console.log(x * 4);
  },
  C: function(x) {
    console.log(x * 6);
  },
  D: function(x) {
    console.log(x * 8);
  },
};
var log = function(type, x) {
  logTypes[type](x);
};

log("A", 20); // 40

有什么區(qū)別? 就只是多了個(gè)入口, 但是我們真正內(nèi)部方法會(huì)被封裝起來(lái), 使用的時(shí)候交給log函數(shù), 它就負(fù)責(zé)托管, 負(fù)責(zé)計(jì)算的邏輯放在頂部logTypes中.
所以策略模式的關(guān)鍵在于托管, 一個(gè)派發(fā)器, 分發(fā)給不同的算法.(類似redux)

讓我們優(yōu)雅地讓div亂飛吧!

各種動(dòng)畫運(yùn)動(dòng)函數(shù), tween對(duì)象

初始化目標(biāo)位置和信息, Animate類(假裝是個(gè)類)

因?yàn)榛诓呗阅Ｊ? 需要有一個(gè)托管入口, start函數(shù)

動(dòng)畫是一幀一幀組成的, 所以還需要一個(gè)step函數(shù)來(lái)計(jì)算每一幀

最后進(jìn)行dom操作, 需要update函數(shù)

/**
 * @desc 定義一系列算法, 均接收4個(gè)參數(shù)
 * @param t 動(dòng)畫已消耗的時(shí)間
 * @param b 小球原始的位置
 * @param c 小球的目標(biāo)位置
 * @param d 動(dòng)畫持續(xù)的總時(shí)間
 */
var tween = {
  linear: function(t, b, c, d) {
    return c * t / d + b;
  },
  easeIn: function(t, b, c, d) {
    return c * (t /= d) * t + b;
  },
  strongEaseIn: function(t, b, c, d) {
    return c * (t /= d) * t * t * t * t + b;
  },
  strongEaseOut: function(t, b, c, d) {
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
  },
  sineaseIn: function(t, b, c, d) {
    return c * (t /= d) * t * t + b;
  },
  sineaseOut: function(t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
  },
}

/**
 * @desc Animate類
 */
var Animate = function(dom) {
  this.dom = dom;
  this.startTime = 0;
  this.startPos = 0; // 運(yùn)動(dòng)開(kāi)始時(shí)候dom初始位置
  this.endPos = 0; // 目標(biāo)位置
  this.propertyName = null; // dom節(jié)點(diǎn)需要被改變的css屬性名
  this.easing = null; // 緩動(dòng)算法
  this.duration = null; // 持續(xù)時(shí)間
};

/**
 * @desc 在Animate原型上添加start方法, 啟動(dòng)動(dòng)畫
 * @param propertyName 要改變的css屬性名, 如: left
 * @param endPos 小球運(yùn)動(dòng)的目標(biāo)位置
 * @param duration 動(dòng)畫持續(xù)時(shí)間
 * @param easing 緩動(dòng)算法
 */
Animate.prototype.start = function(propertyName, endPos, duration, easing) {
  this.startTime = +new Date; // 動(dòng)畫啟動(dòng)時(shí)間
  this.startPos = this.dom.getBoundingClientRect()[propertyName];
  this.propertyName = propertyName;
  this.endPos = endPos;
  this.duration = duration;
  this.easing = tween[easing];

  var self = this;
  var timeId = setInterval(function() {
    if (self.step() === false) {
      clearInterval(timeId);
    }
  }, 19);
};

/**
 * @desc 小球運(yùn)動(dòng)每一幀需要做的事情
 */
Animate.prototype.step = function() {
  var t = +new Date; // 取得當(dāng)前時(shí)間
  if (t >= this.startTime + this.duration) {
    this.update(this.endPos); // 更新小球的css屬性值
    return false;
  }
  var pos = this.easing(t - this.startTime, this.startPos,
    this.endPos - this.startPos, this.duration);
  // pos為小球當(dāng)前位置
  this.update(pos);
}
/**
 * @desc 操作dom, 改變小球位置
 */
Animate.prototype.update = function(pos) {
  this.dom.style[this.propertyName] = pos + "px";
}

部分代碼參考 <>
源碼地址: github