Apprendre le modèle de conception JavaScript (modèle de stratégie)_compétences Javascript

Qu'est-ce que la stratégie ? Par exemple, si nous voulons voyager quelque part, nous pouvons choisir l’itinéraire en fonction de la situation réelle.
1. Définition du modèle de stratégie

Si vous n’avez pas le temps mais que vous ne vous souciez pas de l’argent, vous pouvez choisir de voler.
Si vous n’avez pas d’argent, vous pouvez choisir de prendre le bus ou le train.
Si vous êtes plus pauvre, vous pouvez choisir de faire du vélo.
En programmation, nous rencontrons souvent des situations similaires. Il existe de nombreuses options parmi lesquelles choisir pour implémenter une certaine fonction. Par exemple, un programme qui compresse des fichiers peut choisir soit l'algorithme zip, soit l'algorithme gzip.

Définition : Le modèle de stratégie définit une série d'algorithmes, qui sont encapsulés séparément afin qu'ils puissent être remplacés les uns par les autres. Ce modèle rend les modifications d'algorithme indépendantes des clients. qui utilisent Suanfan.

Le modèle de stratégie a un large éventail d'applications. Dans cette section, nous prendrons comme exemple le calcul de la prime de fin d’année.

2. Exemples de bonus de fin d'année

Les primes de fin d’année de nombreuses entreprises sont basées sur la base salariale et les performances des employés à la fin de l’année. Par exemple, la prime de fin d'année d'une personne ayant une performance S est égale à 4 fois le salaire, la prime de fin d'année d'une personne ayant une performance A est égale à 3 fois le salaire et la prime de fin d'année d'une personne ayant une performance B est 2 fois le salaire. Supposons que le service financier nous demande de lui fournir un morceau de code pour faciliter le calcul des primes de fin d'année des employés.

1). Implémentation initiale du code

Nous pouvons écrire une fonction appelée calculateBonus pour calculer le montant du bonus pour chaque personne. Évidemment, pour que la fonction calculateBonus fonctionne correctement, elle doit recevoir deux paramètres : le montant du salaire du salarié et sa note d'évaluation. Le code est le suivant :

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

On constate que ce code est très simple, mais il présente des défauts évidents.

La fonction calculateBonus est relativement volumineuse, contient de nombreuses instructions if-else, qui doivent couvrir toutes les branches logiques.

La fonction calculateBonus est inflexible. Si un nouveau niveau de performance C est ajouté, ou si nous voulons changer le coefficient de performance du bonus S à 5, alors nous devons approfondir la mise en œuvre interne de calculateBonus. fonction, ce qui est une violation du principe ouvert-fermé.

La réutilisabilité de l'algorithme est médiocre. Et si ces algorithmes de calcul des bonus devaient être réutilisés ailleurs dans le programme ? Nos seules options sont le copier-coller. Par conséquent, nous devons refactoriser ce code.

2). Refactorisez le code à l'aide de fonctions combinées

En général, la façon la plus simple de penser est d'utiliser des fonctions de combinaison pour le reconstruire. Nous encapsulons divers algorithmes dans de petites fonctions. Ces petites fonctions sont bien nommées, et vous pouvez savoir en un coup d'œil à quel algorithme elles correspondent. peut également être réutilisé ailleurs dans le programme. Le code est le suivant :

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

Actuellement, notre programme a été amélioré dans une certaine mesure, mais cette amélioration est très limitée. Nous n'avons toujours pas résolu le problème le plus important : la fonction calculateBonus peut devenir de plus en plus grande, et elle manque de flexibilité lorsque le système change.

3). Utiliser un modèle de stratégie pour refactoriser le code

Après y avoir réfléchi, nous avons trouvé une meilleure solution : utiliser un modèle de stratégie pour refactoriser le code. Le modèle de stratégie fait référence à la définition d’une série d’algorithmes et à leur encapsulation un par un. Séparer les parties inchangées des parties changeantes est le thème de chaque modèle de conception, et le modèle de stratégie ne fait pas exception. Le but du modèle de stratégie est de séparer l'utilisation de l'algorithme de la mise en œuvre de l'algorithme.

Dans cet exemple, la méthode d'utilisation de l'algorithme reste la même et le montant du bonus calculé est obtenu sur la base d'un certain algorithme. La mise en œuvre des algorithmes est différente et changeante, et chaque performance correspond à des règles de calcul différentes.

Un programme basé sur le modèle de stratégie se compose d'au moins deux parties. La première partie est un ensemble de classes de stratégie. La classe de stratégie encapsule des algorithmes spécifiques et est responsable du processus de calcul spécifique. La deuxième partie est la classe d'environnement Context. Context accepte la demande du client puis délègue la demande à une certaine classe de stratégie. Pour ce faire, cela signifie qu'une référence à un objet de stratégie doit être conservée dans le contexte.

Utilisez maintenant le modèle de stratégie pour refactoriser le code ci-dessus. La première version a été calquée sur l'implémentation dans les langages orientés objet traditionnels. Nous encapsulons d’abord chaque règle de calcul de performance dans la classe de stratégie correspondante :

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

Définissez ensuite le type de bonus 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 ); //把计算奖金的操作委托给对应的策略对象
};

在完成最终的代码之前，我们再来回顾一下策略模式的思想：

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

这句话如果说得更详细一点，就是：定义一系列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。在客户对Context发起请求的时候，Context总是把请求委托给这些策略对象中间的某一个进行计算。

“并且使它们可以相互替换”，这句话在很大程度上是相对于静态类型语言而言的。因为静态类型语言中有类型检查机制，所以各个策略类需要实现同样的接口。当它们的真正类型被隐藏在接口后面时，它们才能被相互替换。而在JavaScript这种“类型模糊”的语言中没有这种困扰，任何对象都可以被替换使用。因此，JavaScript中的“可以相互替换使用”表现为它们具有相同的目标和意图。

现在我们来完成这个例子中剩下的代码。先创建一个bonus对象，并且给bonus对象设置一些原始的数据，比如员工的原始工资数额。接下来把某个计算奖金的策略对象也传入bonus对象内部保存起来。当调用bonus.getBonus()来计算奖金的时候，bonus对象本身并没有能力进行计算，而是把请求委托给了之前保存好的策略对象：

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实现的策略模式。

在5.1节中，我们让strategy对象从各个策略类中创建而来，这是模拟一些传统面向对象语言的实现。实际上在JavaScript语言中，函数也是对象，所以更简单和直接的做法是把strategy直接定义为函数：

var strategies = {
 "S": function( salary ){
 return salary * 4;
 },
 "A": function( salary ){
 return salary * 3;
 },
 "B": function( salary ){
 return salary * 2;
 }
}; 

同样，Context也没有必要必须用Bonus类来表示，我们依然用calculateBonus 函数充当Context来接受用户的请求。经过改造，代码的结构变得更加简洁：

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

3、实例再讲解

一个小例子就能让我们一目了然。
回忆下jquery里的animate方法.

$( div ).animate( {"left: 200px"}, 1000, 'linear' ); 
//匀速运动
$( div ).animate( {"left: 200px"}, 1000, 'cubic' ); 
//三次方的缓动

这2句代码都是让div在1000ms内往右移动200个像素. linear(匀速)和cubic(三次方缓动)就是一种策略模式的封装.

再来一个例子. 很多页面都会有个即时验证的表单. 表单的每个成员都会有一些不同的验证规则.

比如姓名框里面， 需要验证非空，敏感词，字符过长这几种情况。 当然是可以写3个if else来解决，不过这样写代码的扩展性和维护性可想而知。如果表单里面的元素多一点，需要校验的情况多一点，加起来写上百个if else也不是没有可能。

所以更好的做法是把每种验证规则都用策略模式单独的封装起来。需要哪种验证的时候只需要提供这个策略的名字。就像这样：

nameInput.addValidata({
 notNull: true,
 dirtyWords: true,
 maxLength: 30
})
而notNull，maxLength等方法只需要统一的返回true或者false，来表示是否通过了验证。

validataList = {
 notNull: function( value ){
 return value !== '';
 },
 maxLength: function( value, maxLen ){
 return value.length() > maxLen;
 }
}

可以看到，各种验证规则很容易被修改和相互替换。如果某天产品经理建议字符过长的限制改成60个字符。那只需要0.5秒完成这次工作。

大概内容就为大家介绍到这。

聊一聊题外话，马上2015年要过去了，大家的年终奖是不是很丰厚呀！！！

希望大家可以在这一年里有所收获，通过这篇文章也能有所收获，知道什么是策略模式，理解小编精心为大家准备的两个实例。