JavaScript设计模式学习—策略模式

什么是策略模式

策略模式,就是将不同的算法各自封装起来,然后根据程序的不同情况,采用不同的算法,有点像工厂模式。比如在很多种情况下,都要写ifXXX dosometing() else if XXX,这是最基本的程序逻辑写法,但随着情况越来越复杂,那么代码将非常难读,混乱不堪。

策略模式实现

之前写过的一个页面就非常痛苦,是一个订单页加一些新功能,我是中途接手的,这个页面大概的描述是根据不同的角色(用户,商家,管理员)和不同的订单状态对页面进行相应的DOM操作和提供不同的接口功能。之前情况不多,代码也就是最简单的if else,虽然丑陋了点,但也没到不可读的地步,但随着订单不同的status增加到十几种,和夹杂一些订单不同状态转换前的判断,代码就看起来不可控了。
我尝试用策略模式重构代码,先简化一下,看看一种状态下不同角色操作实现:

if(role == 1){          $('.order_btn').text('查看订单');          checkOrder();}else if(role == 2){          $('.order_btn').text('发货');          deilverGoods();}else if(role == 3){          $('.order_btn').text('取消订单');          cancelOrder();}

1代表用户,2代表商家,3代表管理员,随着角色不同,相应页面按钮进行不同处理,也相应调用不同的实现算法。
先尝试将角色与操作对应封装:

var performanceByRole={    user:function(){      $('.order_btn').text('查看订单');      checkOrder();    },    seller:function(){      $('.order_btn').text('发货');      deilverGoods();    },    manage:function(){     $('.order_btn').text('取消订单');      cancelOrder();    }};function shiftRole(role){    if(role == 1){      return 'user';    }else if(role == 2){      return 'seller'    }else if(role == 3){      return 'manage'    };}function toDiffStrategy(role){    var funcname = shiftRole(role);    performanceByRole[funcname]();}var role = fromServer();toDiffStrategy(role);

首先把要采取的不同策略封装在一个键值对里,shiftRole这个函数是“多余的”,转换一下后台传给前端的数据,这里即使用了if else也是可控的,因为角色就那么几个,之后toDiffStrategy将根据传入的不同角色,采取不同的策略算法。在其他语言中,实现这样的思路也比较费劲,而js得函数非常灵活,本来可以当值传递,所以实现策略模式非常轻松,也很灵活。

关键字:JavaScript, 设计模式, 前端, role

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部