您的位置:首页 > Web前端

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

2017-10-26 11:34 218 查看
策略模式和迭代器模式在代码重构的过程中,常常用来消除大量的重复性判断语句(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对象即可。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  前端 设计模式