策略模式在前端代码中的应用

策略模式和迭代器模式在代码重构的过程中，常常用来消除大量的重复性判断语句（if，else或try，catch）。分支条件在开发过程中是很好应用的，但是不方便进行维护，也减少代码的可读性和美观。
如果要消除这种分支条件带来的不好的影响，可以使用策略模式和迭代器模式进行编码，这两种模式在应用场景上的主要区别为：迭代器模式按照顺序对聚合对象中的元素进行遍历，因此其元素在某种意义上来讲，具有一定的遍历优先级。而策略模式中的元素没有这种优先级。下面主要对策略模式的应用进行讲解。
策略模式的定义：定义一系列算法，把他们一个一个封装起来，并且使他们可以相互替换（见《JavaScript设计模式与开发实践》71页）。
结合税收调查项目进行具体讲解。该项目场景如下：存在一个tab选项卡控件，有四个tab页可以切换，对应显示四个不同的表格，要求点击tab页上标，刷新出对应的表格。同时页面中还存在两种触发刷新对应表格的点击事件A和B，当A和B触发的时候，要刷新当前显示的tab页中的表格（具有记忆功能。）因此在第一版中这3个触发刷新表格的事件中都要对当前是哪个tab页被选中进行判读，以此来找到对应的刷新表函数。伪代码如下：

A.onclick=function(){
其他逻辑代码，如获取tabid等。
If(tabid="tab1"){
reflashTable1();
}else if(tabid="tab2"){
reflashTable2();
}else if(tabid="tab3"){
reflashTable3();
}else if(tabid="tab4"){
reflashTable4();}
}

。这一段代码存在于tab点击事件和A与B中。这样一来，如果增加了新的tab页和新的对应点击事件，就必须在这三个位子的if条件中增加新的判读条件，不方便维护和更新。下面来进行重构，将if条件提取出来，封装成新的策略对象。

Var reflashMapped={
"tab1":function(){
return reflashTable1();
},"tab2":function(){
return reflashTable2();
},"tab3":function(){
return reflashTable3(); 
},"tab4":function(){
return reflashTable4();
}
}

封装成策略对象之后，在使用的时候可以直接调用reflashMappedtabid,这样在添加或更改新的刷新事件的时候，只需要更改reflashMapped对象即可。