js设想形式--战略形式

2023年2月4日 72次阅读来源: aoping

媒介

本系列文章重要依据《JavaScript设想形式与开辟实践》整顿而来，个中会加入了一些本身的思索。愿望对人人有所协助。

文章系列

js设想形式–单例形式

js设想形式–战略形式

js设想形式–代办形式

观点

战略形式的定义是:定义一系列的算法，把它们一个个封装起来，而且使它们能够互相替换。

战略形式指的是定义一系列的算法，把它们一个个封装起来。将稳定的部份和变化的部份离隔是每一个设想形式的主题，战略形式也不破例，战略形式的目的就是将算法的运用与算法的完成星散开来。

一个基于战略形式的顺序最少由两部份构成。第一个部份是一组战略类，战略类封装了详细的算法，并担任详细的盘算历程。第二个部份是环境类Context，Context 接收客户的要求，随后把要求托付给某一个战略类。要做到这点，申明 Context中要保持对某个战略对象的援用。

战略形式的完成并不庞杂，关键是怎样从战略形式的完成背地，找到封装变化、托付和多态性这些头脑的代价。

场景

从定义上看，战略形式就是用来封装算法的。但假如把战略形式仅仅用来封装算法，难免有一点牛鼎烹鸡。在现实开辟中，我们一般会把算法的寄义散布开来，使战略形式也能够用来封装一系列的“营业划定规矩”。只需这些营业划定规矩指向的目的一致，而且能够被替换运用，我们就能够用战略形式来封装它们。

优瑕玷

长处

战略形式应用组合、托付和多态等手艺和头脑，能够有效地防止多重前提遴选语句。
战略形式供应了对开放—关闭准绳的圆满支撑，将算法封装在自力的strategy中，使得它们易于切换，易于明白，易于扩大。
战略形式中的算法也能够复用在体系的其他地方，从而防止许多反复的复制粘贴事情。
在战略形式中应用组合和托付来让 Context 具有实行算法的才，这也是继续的一种更轻巧的替换计划。

瑕玷

增添许多战略类或许战略对象，但现实上这比把它们担任的逻辑堆砌在 Context 中要好。
要运用战略形式，必需相识一切的 strategy，必需相识各个 strategy 之间的不同点，如许才遴选一个适宜的 strategy。

但这些瑕玷并不严峻

例子

盘算奖金

粗拙的完成

    var calculateBonus = function( performanceLevel, salary ){
        if ( performanceLevel === 'S' ){
            return salary * 4;
        }
        if ( performanceLevel === 'A' ){
            return salary * 3;
        }
        if ( performanceLevel === 'B' ){
            return salary * 2;
        }
    };

    calculateBonus( 'B', 20000 ); // 输出：40000
    calculateBonus( 'S', 6000 ); // 输出：24000

瑕玷：

calculateBonus 函数比较巨大，包含了许多 if-else 语句
calculateBonus 函数缺少弹性，假如增添了一种新的绩效品级 C，或许想把绩效 S 的奖金系数改成 5，那我们必需深切 calculateBonus 函数的内部完成，这是违背开放关闭准绳的。
算法的复用性差

运用组合函数重构代码


    var performanceS = function( salary ){
        return salary * 4;
    };
    var performanceA = function( salary ){
        return salary * 3;
    };
    var performanceB = function( salary ){
        return salary * 2;
    };
    var calculateBonus = function( performanceLevel, salary ){
        if ( performanceLevel === 'S' ){
            return performanceS( salary );
        }
        if ( performanceLevel === 'A' ){
            return performanceA( salary );
        }
        if ( performanceLevel === 'B' ){
            return performanceB( salary );
        }
    };
    calculateBonus( 'A' , 10000 ); // 输出：30000

题目依旧存在：calculateBonus 函数有能够愈来愈巨大，而且在体系变化的时候缺少弹性

运用战略形式重构代码


    var performanceS = function(){};
    performanceS.prototype.calculate = function( salary ){
        return salary * 4;
    };
    var performanceA = function(){};
    performanceA.prototype.calculate = function( salary ){
        return salary * 3;
    };
    var performanceB = function(){};
    performanceB.prototype.calculate = function( salary ){
        return salary * 2;
    };

    //接下来定义奖金类Bonus：

    var Bonus = function(){
        this.salary = null; // 原始工资
        this.strategy = null; // 绩效品级对应的战略对象
    };
    Bonus.prototype.setSalary = function( salary ){
        this.salary = salary; // 设置员工的原始工资
    };
    Bonus.prototype.setStrategy = function( strategy ){
        this.strategy = strategy; // 设置员工绩效品级对应的战略对象
    };
    Bonus.prototype.getBonus = function(){ // 取得奖金数额
        return this.strategy.calculate( this.salary ); // 把盘算奖金的操纵托付给对应的战略对象
    };

    var bonus = new Bonus();
    bonus.setSalary( 10000 );

    bonus.setStrategy( new performanceS() ); // 设置战略对象
    console.log( bonus.getBonus() ); // 输出：40000
    bonus.setStrategy( new performanceA() ); // 设置战略对象
    console.log( bonus.getBonus() ); // 输出：30000

但这段代码是基于传统面向对象言语的模拟，下面我们用JavaScript完成的战略形式。

JavaScript 版本的战略形式

在 JavaScript 言语中，函数也是对象，所以更简朴和直接的做法是把 strategy 直接定义为函数

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

    console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000
    console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000

es6类完成


var performanceS = function () {};
performanceS.prototype.calculate = function (salary) {
  return salary * 4;
};
var performanceA = function () {};
performanceA.prototype.calculate = function (salary) {
  return salary * 3;
};
var performanceB = function () {};
performanceB.prototype.calculate = function (salary) {
  return salary * 2;
};

//接下来定义奖金类Bonus：
class Bonus {
  constructor() {
    this.salary = null; // 原始工资
  this.strategy = null; // 绩效品级对应的战略对象
  }
  setSalary(salary) {
    this.salary = salary; // 设置员工的原始工资
  }
  setStrategy(strategy) {
    this.strategy = strategy; // 设置员工绩效品级对应的战略对象
  }
  getBonus() { // 取得奖金数额
    return this.strategy.calculate(this.salary); // 把盘算奖金的操纵托付给对应的战略对象
  }
}

var bonus = new Bonus();
bonus.setSalary(10000);

bonus.setStrategy(new performanceS()); // 设置战略对象
console.log(bonus.getBonus()); // 输出：40000
bonus.setStrategy(new performanceA()); // 设置战略对象
console.log(bonus.getBonus()); // 输出：30000

缓动动画

目的：编写一个动画类和一些缓动算法，让小球以林林总总的缓动效果在页面中活动

剖析：

起首缓动算法的职责是完成小球怎样活动

然后动画类（即context）的职责是担任：

初始化动画对象
在活动最先之前，须要提早纪录一些有效的信息，最少包含以下信息:
- 动画最先时的正确时候点;
- 动画最先时，小球地点的原始位置;
- 小球挪动的目的位置;
- 小球活动延续的时候。
盘算小球某时候的位置
更新小球的位置

完成：


<!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>
</head>

<body>
  <div style="position:absolute;background:blue" id="div">我是div</div>

</body>
<script>
  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;
    }
  };

  var Animate = function (dom) {
    this.dom = dom; // 举行活动的dom 节点
    this.startTime = 0; // 动画最先时候
    this.startPos = 0; // 动画最先时，dom 节点的位置，即dom 的初始位置
    this.endPos = 0; // 动画完毕时，dom 节点的位置，即dom 的目的位置
    this.propertyName = null; // dom 节点须要被转变的css 属性名
    this.easing = null; // 缓动算法
    this.duration = null; // 动画延续时候
  };


  Animate.prototype.start = function (propertyName, endPos, duration, easing) {
    this.startTime = +new Date; // 动画启动时候
    this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom 节点初始位置
    this.propertyName = propertyName; // dom 节点须要被转变的CSS 属性名
    this.endPos = endPos; // dom 节点目的位置
    this.duration = duration; // 动画延续事宜
    this.easing = tween[easing]; // 缓动算法
    var self = this;
    var timeId = setInterval(function () { // 启动定时器，最先实行动画
      if (self.step() === false) { // 假如动画已完毕，则消灭定时器
        clearInterval(timeId);
      }
    }, 16);
  };

  Animate.prototype.step = function () {
    var t = +new Date; // 取得当前时候
    if (t >= this.startTime + this.duration) { // (1)
      this.update(this.endPos); // 更新小球的CSS 属性值
      return false;
    }
    var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
    // pos 为小球当前位置
    this.update(pos); // 更新小球的CSS 属性值
  };

  Animate.prototype.update = function (pos) {
    this.dom.style[this.propertyName] = pos + 'px';
  };

  var div = document.getElementById('div');
  var animate = new Animate(div);
  animate.start('left', 500, 1000, 'linear');
  // animate.start( 'top', 1500, 500, 'strongEaseIn' );
</script>

</html>

考证表单

简朴的完成


<html>

<body>
  <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName" />
    请输入暗码：<input type="text" name="password" />

    请输入手机号码：<input type="text" name="phoneNumber" />
    <button>提交</button>
  </form>
  <script>
    var registerForm = document.getElementById('registerForm');
    registerForm.onsubmit = function () {
      if (registerForm.userName.value === '') {
        alert('用户名不能为空');
        return false;
      }
      if (registerForm.password.value.length < 6) {
        alert('暗码长度不能少于6 位');
        return false;
      }
      if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
        alert('手机号码花样不正确');
        return false;
      }
    }
  </script>
</body>

</html>

运用战略形式革新


<html>

<body>
  <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName" />
    请输入暗码：<input type="text" name="password" />

    请输入手机号码：<input type="text" name="phoneNumber" />
    <button>提交</button>
  </form>
  <script>
    var strategies = {
      isNonEmpty: function (value, errorMsg) { // 不为空
        if (value === '') {
          return errorMsg;
        }
      },
      minLength: function (value, length, errorMsg) { // 限定最小长度
        if (value.length < length) {
          return errorMsg;
        }
      },
      isMobile: function (value, errorMsg) { // 手机号码花样
        if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
          return errorMsg;
        }
      }
    };

    var validataFunc = function () {
      var validator = new Validator(); // 建立一个validator 对象
      /***************增加一些校验划定规矩****************/
      validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空');
      validator.add(registerForm.password, 'minLength:6', '暗码长度不能少于6 位');
      validator.add(registerForm.phoneNumber, 'isMobile', '手机号码花样不正确');
      var errorMsg = validator.start(); // 取得校验效果
      return errorMsg; // 返回校验效果
    }

    var registerForm = document.getElementById('registerForm');
    registerForm.onsubmit = function () {
      var errorMsg = validataFunc(); // 假如errorMsg 有确实的返回值，申明未经由过程校验
      if (errorMsg) {
        alert(errorMsg);
        return false; // 阻挠表单提交
      }
    };

    var Validator = function () {
      this.cache = []; // 保留校验划定规矩
    };

    Validator.prototype.add = function (dom, rule, errorMsg) {
      var ary = rule.split(':'); // 把strategy 和参数离开
      this.cache.push(function () { // 把校验的步骤用空函数包装起来，而且放入cache
        var strategy = ary.shift(); // 用户遴选的strategy
        ary.unshift(dom.value); // 把input 的value 增加进参数列表
        ary.push(errorMsg); // 把errorMsg 增加进参数列表
        return strategies[strategy].apply(dom, ary);
      });
    };

    Validator.prototype.start = function () {
      for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
        var msg = validatorFunc(); // 最先校验，并取得校验后的返回信息
        if (msg) { // 假如有确实的返回值，申明校验没有经由过程
          return msg;
        }
      }
    };
  </script>
</body>

</html>

瑕玷：一个文本输入框只能对应一种校验划定规矩

再革新：能够有多个校验划定规矩

<html>

<body>
  <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName" />
    请输入暗码：<input type="text" name="password" />

    请输入手机号码：<input type="text" name="phoneNumber" />
    <button>提交</button>
  </form>
  <script>
    /***********************战略对象**************************/
    var strategies = {
      isNonEmpty: function (value, errorMsg) {
        if (value === '') {
          return errorMsg;
        }
      },
      minLength: function (value, length, errorMsg) {
        if (value.length < length) {
          return errorMsg;
        }
      },
      isMobile: function (value, errorMsg) {
        if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
          return errorMsg;
        }
      }
    };
    /***********************Validator 类**************************/
    var Validator = function () {
      this.cache = [];
    };
    Validator.prototype.add = function (dom, rules) {
      var self = this;
      for (var i = 0, rule; rule = rules[i++];) {
        (function (rule) {
          var strategyAry = rule.strategy.split(':');
          var errorMsg = rule.errorMsg;
          self.cache.push(function () {
            var strategy = strategyAry.shift();
            strategyAry.unshift(dom.value);
            strategyAry.push(errorMsg);
            return strategies[strategy].apply(dom, strategyAry);
          });
        })(rule)
      }
    };
    Validator.prototype.start = function () {
      for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
        var errorMsg = validatorFunc();
        if (errorMsg) {
          return errorMsg;
        }
      }
    };
    /***********************客户挪用代码**************************/
    var registerForm = document.getElementById('registerForm');
    var validataFunc = function () {
      var validator = new Validator();
      validator.add(registerForm.userName, [{
        strategy: 'isNonEmpty',
        errorMsg: '用户名不能为空'
      }, {
        strategy: 'minLength:6',
        errorMsg: '用户名长度不能小于10 位'
      }]);
      validator.add(registerForm.password, [{
        strategy: 'minLength:6',
        errorMsg: '暗码长度不能小于6 位'
      }]);
      var errorMsg = validator.start();
      return errorMsg;
    }
    registerForm.onsubmit = function () {
      var errorMsg = validataFunc();
      if (errorMsg) {
        alert(errorMsg);
        return false;
      }

    };
  </script>
</body>

</html>

    原文作者：aoping
    原文地址: https://segmentfault.com/a/1190000017721211
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。