предисловие
Эта серия статей в основном основана на "Шаблонах проектирования и практике разработки JavaScript", которые дополнят мои собственные размышления.. Я надеюсь быть полезным.
Серия статей
шаблон проектирования js — одноэлементный шаблон
шаблон проектирования js -- шаблон стратегии
шаблон проектирования js — шаблон прокси
концепция
Определение шаблона стратегии: определить ряд алгоритмов, инкапсулировать их один за другим и сделать доступными.заменяют друг друга.
Шаблон стратегии относится к определению ряда алгоритмов и их инкапсуляции один за другим. Отделение постоянного от изменяющегося является темой каждого шаблона проектирования, и шаблон стратегии не является исключением.Цель шаблона стратегии состоит в том, чтобы отделить использование алгоритма от реализации алгоритма..
Программа, основанная на шаблоне стратегии, состоит как минимум из двух частей. Первая часть представляет собой наборСтратегия, класс стратегии инкапсулирует конкретный алгоритм и отвечает за конкретный процесс расчета. Вторая частьКонтекст класса среды, Context принимает запрос клиента, а затем делегирует запрос определенному классу политики. Для этого необходимо поддерживать ссылку на объект политики в Context.
Реализация шаблона стратегии не сложна, ключ в том, как найти ценность инкапсуляции идей изменений, делегирования и полиморфизма из-за реализации шаблона стратегии.
Сцены
По определению, шаблон стратегии используется для инкапсуляции алгоритма. Но если шаблон стратегии используется только для инкапсуляции алгоритма, это немного излишне. В реальной разработке мы обычно расширяем значение алгоритма, чтобы шаблон стратегии также можно было использовать для инкапсуляции ряда «бизнес-правил». Пока эти бизнес-правила указывают на одни и те же цели и могут использоваться взаимозаменяемо, мы можем инкапсулировать их в шаблон стратегии.
Преимущества и недостатки
преимущество
- В шаблоне стратегии используются методы и идеи, такие как композиция, делегирование и полиморфизм, которые позволяют эффективно избежать множественных операторов условного выбора.
- Шаблон стратегии обеспечивает идеальную поддержку принципа открытого-закрытого, инкапсулируя алгоритмы в независимые стратегии, что упрощает их переключение, понимание и расширение.
- Алгоритмы в шаблоне стратегии также можно повторно использовать в других частях системы, избегая большого количества повторяющихся операций копирования и вставки.
- Более легкая альтернатива на наследство является использование состава и делегирования в структуре стратегии, чтобы дать контекст способность выполнять алгоритмы.
недостаток
- Добавьте много классов стратегии или объектов стратегии, но на самом деле это лучше, чем складывать логику, за которую они отвечают, в контексте.
- Чтобы использовать шаблон стратегии, вы должны понимать все стратегии, а также понимать различия между стратегиями, чтобы выбрать подходящую стратегию.
Но эти недостатки не серьезные
пример
Рассчитать бонус
грубая реализация
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 функции также являются объектами, поэтому проще и понятнее определить стратегию непосредственно как функцию.
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
Ослабить анимацию
Цель: Написать класс анимации и несколько алгоритмов привязки, позволяющих мячу выполнять различные эффекты замедления.
анализировать:
Прежде всего, алгоритм смягчения должен понять, как движется мяч.
Тогда ответственность класса анимации (т.е. контекста) заключается в том, чтобы отвечать за:
-
Инициализировать объект анимации
Перед тренировкой необходимо заранее записать некоторую полезную информацию, включая, по крайней мере, следующую информацию:
- точный момент времени начала анимации;
- Исходное положение шара в начале анимации;
- Целевая позиция, в которой движется мяч;
- Продолжительность движения мяча.
-
Рассчитать положение мяча в определенный момент
-
Обновите положение мяча
выполнить:
<!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>