大前端晋级系列之-策略模式

谨代表自己的理解，有错误欢迎指出!

因为有jQuery的源码分析系列，所以尽量走jQuery的设计风格，便于理解.

为什么要使用策略模式？

举个例子，企业或者个人都要纳税，但是不同的国家税点自然是不一样的，那么这个税点的计算的方式就会有很多了，如何有效的管理呢？

可以采用策略模式，使用算法的责任和算法本身分割开来，委派给不同的对象管理。策略模式通常把一个系列的算法包装到一系列的策略类里面，作为一个抽象策略类的子类。

简单的说：“准备一组算法，并将每一个算法封装起来，使得它们可以互换”。

tom大叔的帖子有一套设计模式，关于策略模式讨论的颇为激烈

http://www.cnblogs.com/TomXu/archive/2012/03/05/2358552.html

大话设计模式里面一套比较经典的，超市打折的场景来阐述策略模式，有兴趣可以去看看

从定义上来看

策略模式的本质：少用继承，多用组合

从上面原型图就能大概的了解

策略类，抽象出所有的算法的接口，然后具体的算法都通过各自的类封装起来

最后用一个content来维护策略对象的引用，说起来很抽象，来点实际的

GOF注重策略模式封装的是算法，

就我个人前端使用而言，策略模式的重心个人感觉不是如何实现算法，而是如何组织、调用这些算法，从而让程序结构更灵活，具有更好的维护性和扩展性

我们可能会说,这种模式提供了最大的好处是它允许算法独立于客户,利用他们的不同。

那么举一个例子：

在jQuery的toggle()允许将两个或多个处理程序绑定到匹配的元素,在交替点击执行。

$('#elem').toggle(function(){}, function(){});

为什么说是类似策略模式

1 策略模式允许替代算法独立使用客户端内部函数

2 二组回调句柄中封装了具体的算法

3 二组算法完成的都是相同的工作，都是对元素状态的操作

4 通过toggle达到切换的目的，可以认为content的目的了。。

好吧，是不是有点牵强了，大家理解这个意思就好了。。。。

如果说硬是要套算法的话，或许jQuery animaten能算一个

参数'linear'，表示过渡使用哪种缓动函数，我们自己可以重写这个算法的分支

$( elem).animate( {"left: 200px"}, 5000, 'linear' );

策略模式的场景也比较容易模拟

假设我要测试排序算法的性能，比如希尔排序，堆排序，冒泡排序，快速排序等

我们可以应用的策略模式，用测试代码遍历所有的算法

现在做一个模拟，就不采用经典的表单验证了

模拟的场景：淘宝快递

假如是免邮商品，那么卖家就需要对不同的地区，商品重量，运费情况，采用不同的快递公司来节约成本

假设有：顺丰，圆通，申通

那么我就会根据不同的地区，调出每一个快递公司的成本的计算类

模拟代码

//淘宝
var Taobao = function() {this.company = "";
};Taobao.prototype = {//设置物流setStrategy: function(company) {this.company = company;},//计算费用calculate: function(package) {return this.company.calculate(package);}
};//算法
var 顺丰 = function() {this.calculate = function(package) {return "20";}
};var 圆通 = function() {this.calculate = function(package) {return "15";}
};var 申通 = function() {this.calculate = function(package) {return "15";}
};function run() {//商品信息var info = { from: "浙江", to: "长沙", weigth: "lkg" };var sf = new 顺丰();var yt = new 圆通();var st = new 申通();var taobao = new Taobao();
　　//顺丰的算法taobao.setStrategy(sf);taobao.calculate(info)

　　//圆通的算法taobao.setStrategy(yt);taobao.calculate(info)

　　//申通的算法taobao.setStrategy(st);taobao.calculate(info)
}

好吧，够接地气吧。。。大家是否看懂了？

附加资料:

http://weblog.bocoup.com/the-strategy-pattern-in-javascript/

大前端晋级系列之-策略模式相关推荐

设计模式初学者系列－策略模式 -------为什么总是继承
设计模式初学者系列-策略模式 -------为什么总是继承模板方法的延续这篇稿子是基于我的前一篇模板 ...
各大前端巨头反爬虫策略
各大前端巨头反爬虫策略 1. 前言对于一张网页,我们往往希望它是结构良好,内容清晰的,这样搜索引擎才能准确地认知它. 而反过来,又有一些情景,我们不希望内容能被轻易获取,比方说电商网站的交易额,教育 ...
【设计模式实践系列】策略模式应用订单折扣方案
策略模式策略模式指的是一个类的行为或其算法可以在运行时更改,在不同的场景中,有不同的实现算法. 意图:定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换. 主要解决:在有多种算法相似的情 ...
VS Code 折腾记 - (15) 再来一波大前端适用系列的插件(主打编码体验改善)
前言距离上次推荐又过去半年了.这期间我又搜罗一些感觉比较好用的插件; 有些体验后被我干掉,有些依旧保留.优秀的拓展插件产出真的有限,这次主推比较实用的小拓展对于插件我不推荐重复的,有些优秀的插件在 ...
android上方导航条跳转页面,《成为大前端》系列 7. 多页面、页面跳转和Navigation模块...
介绍开发过移动 Web 页面的同学都知道,单个页面由客户端的 UI 所承载,页面间的跳转也不再是使用 window 和 location,也不是使用 a 标签,而且调用 Native 写好的 br ...
VS Code 折腾记 - (14) 再来推荐一波大前端适用系列(Node/React/Vue/小程序/主题/代码体验等)的插件
前言时隔半年,这期间我又搜罗了一波感觉比较好的插件, 依旧是那句话,好的插件需要作者去创造,时间去迭代- 废话不多说,直入主题; 插件集 React ES7 React/Redux/GraphQL/ ...
VS Code 折腾记 - (14) 再来推荐一波大前端适用系列 (Node/React/Vue/小程序/主题/代码体验等) 的插件...
前言时隔半年,这期间我又搜罗了一波感觉比较好的插件, 依旧是那句话,好的插件需要作者去创造,时间去迭代... 废话不多说,直入主题; 2018/7/10: 又追加了几个比较实用的(留言以及最新发现的 ...
一统江湖的大前端React.js-从开发者到工程师
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
一统江湖的大前端（7）React.js-从开发者到工程师
前言:<一统江湖的大前端>系列是自己学习前端笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的 ...

大前端晋级系列之-策略模式

大前端晋级系列之-策略模式相关推荐

最新文章

热门文章