策略模式在前端代码中的应用
2017-10-26 11:34
218 查看
策略模式和迭代器模式在代码重构的过程中,常常用来消除大量的重复性判断语句(if,else或try,catch)。分支条件在开发过程中是很好应用的,但是不方便进行维护,也减少代码的可读性和美观。
如果要消除这种分支条件带来的不好的影响,可以使用策略模式和迭代器模式进行编码,这两种模式在应用场景上的主要区别为:迭代器模式按照顺序对聚合对象中的元素进行遍历,因此其元素在某种意义上来讲,具有一定的遍历优先级。而策略模式中的元素没有这种优先级。下面主要对策略模式的应用进行讲解。
策略模式的定义:定义一系列算法,把他们一个一个封装起来,并且使他们可以相互替换(见《JavaScript设计模式与开发实践》71页)。
结合税收调查项目进行具体讲解。该项目场景如下:存在一个tab选项卡控件,有四个tab页可以切换,对应显示四个不同的表格,要求点击tab页上标,刷新出对应的表格。同时页面中还存在两种触发刷新对应表格的点击事件A和B,当A和B触发的时候,要刷新当前显示的tab页中的表格(具有记忆功能。)因此在第一版中这3个触发刷新表格的事件中都要对当前是哪个tab页被选中进行判读,以此来找到对应的刷新表函数。伪代码如下:
。这一段代码存在于tab点击事件和A与B中。这样一来,如果增加了新的tab页和新的对应点击事件,就必须在这三个位子的if条件中增加新的判读条件,不方便维护和更新。下面来进行重构,将if条件提取出来,封装成新的策略对象。
封装成策略对象之后,在使用的时候可以直接调用reflashMappedtabid,这样在添加或更改新的刷新事件的时候,只需要更改reflashMapped对象即可。
如果要消除这种分支条件带来的不好的影响,可以使用策略模式和迭代器模式进行编码,这两种模式在应用场景上的主要区别为:迭代器模式按照顺序对聚合对象中的元素进行遍历,因此其元素在某种意义上来讲,具有一定的遍历优先级。而策略模式中的元素没有这种优先级。下面主要对策略模式的应用进行讲解。
策略模式的定义:定义一系列算法,把他们一个一个封装起来,并且使他们可以相互替换(见《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对象即可。
相关文章推荐
- 策略模式-应用代码示例
- Java设计模式——Comparable接口&&Comparator(CC系)策略模式的应用
- 设计模式学习——策略模式:模拟鸭子应用
- 三大移动营销策略破解移动应用商业模式难题
- Java设计模式之策略模式代码示例
- 策略模式在java中的简单使用的代码
- Spring 设计模式之策略模式应用
- Java实现策略模式的简单应用
- 关于策略模式的应用的思考
- web应用优化策略-前端
- 应用泛型的策略模式
- Spring 资源访问剖析和策略模式应用
- 转:Spring 资源访问剖析和策略模式应用
- Spring 资源访问剖析和策略模式应用
- 策略模式在Android中的应用
- JAVA设计模式-策略模式应用实例
- JAVA设计模式-策略模式应用实例
- 设计模式之策略模式代码展示
- 设计模式——23、策略模式剖析及在集合框架中的应用
- 策略模式在游戏客户端中的应用