详解JavaScript的策略模式编程

   这篇文章主要介绍了详解JavaScript的策略模式编程,包括函数和类作为策略的情况以及多环境下的策略模式,需要的朋友可以参考下

  我喜欢策略设计模式。我尽可能多的试着去使用它。究其本质,策略模式使用委托去解耦使用它们的算法类。

  这样做有几个好处。他可以防止使用大条件语句来决定哪些算法用于特定类型的对象。将关注点分离开来,因此降低了客户端的复杂度,同时还可以促进子类化的组成。它提高了模块化和可测性。每一个算法都可以单独测试。每一个客户端都可以模拟算法。任意的客户端都能使用任何算法。他们可以互调。就像乐高积木一样。

  为了实现策略模式,通常有两个参与者:

  该策略的对象,封装了算法。

  客户端(上下文)对象,以即插即用的方式能使用任何策略。

  这里介绍了我在Javascrip里,怎样使用策略模式,在混乱无序的环境中怎样使用它将库拆成小插件,以及即插即用包的。

  函数作为策略

  一个函数提供了一种封装算法的绝佳方式,同时可以作为一种策略来使用。只需通过一个到客户端的函数并确保你的客户端能调用该策略。

  我们用一个例子来证明。假设我们想创建一个Greeter 类。它所要做的就是和人打招呼。我们希望Greeter 类能知道跟人打招呼的不同方式。为了实现这一想法,我们为打招呼创建不同的策略。

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

// Greeter is a class of object that can greet people.
// It can learn different ways of greeting people through
// 'Strategies.'
//
// This is the Greeter constructor.
var Greeter = function(strategy) {
this.strategy = strategy;
};
 
// Greeter provides a greet function that is going to
// greet people using the Strategy passed to the constructor.
Greeter.prototype.greet = function() {
return this.strategy();
};
 
// Since a function encapsulates an algorithm, it makes a perfect
// candidate for a Strategy.
//
// Here are a couple of Strategies to use with our Greeter.
var politeGreetingStrategy = function() {
console.log("Hello.");
};
 
var friendlyGreetingStrategy = function() {
console.log("Hey!");
};
 
var boredGreetingStrategy = function() {
console.log("sup.");
};
 
// Let's use these strategies!
var politeGreeter = new Greeter(politeGreetingStrategy);
var friendlyGreeter = new Greeter(friendlyGreetingStrategy);
var boredGreeter = new Greeter(boredGreetingStrategy);
 
console.log(politeGreeter.greet()); //=> Hello.
console.log(friendlyGreeter.greet()); //=> Hey!
console.log(boredGreeter.greet()); //=> sup.

  在上面的例子中,Greeter 是客户端,并有三种策略。正如你所看到的,Greeter 知道怎样使用算法,但对于算法的细节却一无所知。

  对于复杂的算法,一个简单的函数往往不能满足。在这种情况下,对好的方式就是按照对象来定义。

  类作为策略

  策略同样可以是类,特别是当算比上述例子中使用的人为的(策略/算法)更复杂的时候。使用类的话,允许你为每一种策略定义一个接口。

  在下面的例子中,证实了这一点。

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// We can also leverage the power of Prototypes in Javascript to create
// classes that act as strategies.
//
// Here, we create an abstract class that will serve as the interface
// for all our strategies. It isn't needed, but it's good for documenting
// purposes.
var Strategy = function() {};
 
Strategy.prototype.execute = function() {
throw new Error('Strategy#execute needs to be overridden.')
};
 
// Like above, we want to create Greeting strategies. Let's subclass
// our Strategy class to define them. Notice that the parent class
// requires its children to override the execute method.
var GreetingStrategy = function() {};
GreetingStrategy.prototype = Object.create(Strategy.prototype);
 
// Here is the `execute` method, which is part of the public interface of
// our Strategy-based objects. Notice how I implemented this method in term of
// of other methods. This pattern is called a Template Method, and you'll see
// the benefits later on.
GreetingStrategy.prototype.execute = function() {
return this.sayHi() + this.sayBye();
};
 
GreetingStrategy.prototype.sayHi = function() {
return "Hello, ";
};
 
GreetingStrategy.prototype.sayBye = function() {
return "Goodbye.";
};
 
// We can already try out our Strategy. It requires a little tweak in the
// Greeter class before, though.
Greeter.prototype.greet = function() {
return this.strategy.execute();
};
 
var greeter = new Greeter(new GreetingStrategy());
greeter.greet() //=> 'Hello, Goodbye.'

  通过使用类,我们与anexecutemethod对象定义了一个策略。客户端可以使用任何策略实现该接口。

  同样注意我又是怎样创建GreetingStrategy的。有趣的部分是对methodexecute的重载。它以其他函数的形式定义。现在类的后继子类可以改变特定的行为,如thesayHiorsayByemethod,并不改变常规的算法。这种模式叫做模板方法,非常适合策略模式。

  让我们看个究竟。

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// Since the GreetingStrategy#execute method uses methods to define its algorithm,
// the Template Method pattern, we can subclass it and simply override one of those
// methods to alter the behavior without changing the algorithm.
 
var PoliteGreetingStrategy = function() {};
PoliteGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
PoliteGreetingStrategy.prototype.sayHi = function() {
return "Welcome sir, ";
};
 
var FriendlyGreetingStrategy = function() {};
FriendlyGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
FriendlyGreetingStrategy.prototype.sayHi = function() {
return "Hey, ";
};
 
var BoredGreetingStrategy = function() {};
BoredGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
BoredGreetingStrategy.prototype.sayHi = function() {
return "sup, ";
};
 
var politeGreeter = new Greeter(new PoliteGreetingStrategy());
var friendlyGreeter = new Greeter(new FriendlyGreetingStrategy());
var boredGreeter = new Greeter(new BoredGreetingStrategy());
 
politeGreeter.greet(); //=> 'Welcome sir, Goodbye.'
friendlyGreeter.greet(); //=> 'Hey, Goodbye.'
boredGreeter.greet(); //=> 'sup, Goodbye.'

  GreetingStrategy 通过指定theexecutemethod的步骤,创建了一个类的算法。在上面的代码片段中,我们通过创建专门的算法从而利用了这一点。

  没有使用子类,我们的Greeter 依然展示出一种多态行为。没有必要在Greeter 的不同类型上进行切换来触发正确的算法。这一切都绑定到每一个Greeter 对象上。

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13

var greeters = [
new Greeter(new BoredGreetingStrategy()),
new Greeter(new PoliteGreetingStrategy()),
new Greeter(new FriendlyGreetingStrategy()),
];
 
greeters.forEach(function(greeter) {
 
// Since each greeter knows its strategy, there's no need
// to do any type checking. We just greet, and the object
// knows how to handle it.
greeter.greet();
});

  多环境下的策略模式

  我最喜欢的有关策略模式的例子之一,实在 Passport.js库中。Passport.js提供了一种在Node中处理身份验证的简单方式。大范围内的供应商都支持(Facebook, Twitter, Google等等),每一个都作为一种策略实现。

  该库作为一个npm包是可行的,其所有的策略也一样。库的用户可以决定为他们特有的用例安装哪一个npm包。下面是展示其如何实现的代码片段:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// Taken from http://passportjs.org
 
var passport = require('passport')
 
// Each authentication mechanism is provided as an npm package.
// These packages expose a Strategy object.
, LocalStrategy = require('passport-local').Strategy
, FacebookStrategy = require('passport-facebook').Strategy;
 
// Passport can be instanciated using any Strategy.
passport.use(new LocalStrategy(
function(username, password, done) {
User.findOne({ username: username }, function (err, user) {
if (err) { return done(err); }
if (!user) {
return done(null, false, { message: 'Incorrect username.' });
}
if (!user.validPassword(password)) {
return done(null, false, { message: 'Incorrect password.' });
}
return done(null, user);
});
}
));
 
// In this case, we instanciate a Facebook Strategy
passport.use(new FacebookStrategy({
clientID: FACEBOOK_APP_ID,
clientSecret: FACEBOOK_APP_SECRET,
callbackURL: "http://www.example.com/auth/facebook/callback"
},
function(accessToken, refreshToken, profile, done) {
User.findOrCreate(..., function(err, user) {
if (err) { return done(err); }
done(null, user);
});
}
));

  Passport.js库只配备了一两个简单的身份验证机制。除此之外,它没有超过一个符合上下文对象的一个策略类的接口。这种机制让他的使用者,很容易的实现他们自己的身份验证机制,而对项目不产生不利的影响。

  反思

  策略模式为你的代码提供了一种增加模块化和可测性的方式。这并不意味着(策略模式)总是有效。Mixins 同样可以被用来进行功能性注入,如在运行时的一个对象的算法。扁平的老式 duck-typing多态有时候也可以足够简单。

  然而,使用策略模式允许你在一开始没有引入大型体系的情况下,随着负载型的增长,扩大你的代码的规模。正如我们在Passport.js例子中看到的一样,对于维护人员在将来增加另外的策略,将变得更加方便。

时间: 2024-08-03 04:20:39

详解JavaScript的策略模式编程的相关文章

详解JavaScript的策略模式编程_基础知识

 我喜欢策略设计模式.我尽可能多的试着去使用它.究其本质,策略模式使用委托去解耦使用它们的算法类. 这样做有几个好处.他可以防止使用大条件语句来决定哪些算法用于特定类型的对象.将关注点分离开来,因此降低了客户端的复杂度,同时还可以促进子类化的组成.它提高了模块化和可测性.每一个算法都可以单独测试.每一个客户端都可以模拟算法.任意的客户端都能使用任何算法.他们可以互调.就像乐高积木一样. 为了实现策略模式,通常有两个参与者: 该策略的对象,封装了算法. 客户端(上下文)对象,以即插即用的方式能使用

详解JavaScript中的客户端消息框架设计原理

  这篇文章主要介绍了详解JavaScript中的客户端消息框架设计原理,包括客户端和服务器端的通信等方面的内容,需要的朋友可以参考下 哇--是个危险的题目,对吗?我们对于什么是本质的理解当然会随着我们对要解决问题的理解而变化.因此我不会说谎--一年前我所理解的本质很不幸并不完整,因为我确信我将要写的已经快伴随我有6个月之久.所以,这篇文章是我在发现JavaScript中成功的运用客户端消息模式的一些关键要点时的一个掠影. 1.) 理解中介者与观察者的区别 大多数人在描述任何事件/消息机制的时候

详解JavaScript基本类型和引用类型_javascript技巧

一.值的类型        早在介绍JS的数据类型的时候就提到过基本类型和引用类型,不过在说两种类型之前,我们先来了解一下变量的值的类型.在ECMAScript中,变量可以存在两种类型的值,即原始值和引用值.(1)原始值        存储在栈中的简单数据段,也就是说,它们的值直接存储在变量访问的位置.(2)引用值        存储在堆中的对象,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处.        为变量赋值时,ECMAScript的解释程序必须判断该值是原始类型,还是引

详解JavaScript中的forEach()方法的使用

这篇文章主要介绍了详解JavaScript中的forEach()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下 JavaScript数组的 forEach()方法调用数组中的每个元素. 语法 ? 1 array.forEach(callback[, thisObject]); 下面是参数的详细信息: callback : 函数测试数组的每个元素. thisObject : 对象作为该执行回调时使用. 返回值: 返回创建数组. 兼容性: 这种方法是一个JavaScript扩展到ECM

详解JavaScript中循环控制语句的用法

  这篇文章主要介绍了详解JavaScript中循环控制语句的用法,包括break语句和continue语句的使用方法,需要的朋友可以参考下 JavaScript提供完全控制来处理循环和switch语句.可能有一种情况,当你需要退出一个循环,但未达到其底部.也可能有一种情况,当要跳过的码块的一部分,并直接开始下一个迭代. 为了处理这些情况下,JavaScript提供了break和continue语句.这些语句是用来马上退出任何循环或启动循环的下一次迭代. break 语句: break语句,这是

详解JavaScript中void语句的使用

  这篇文章主要介绍了详解JavaScript中void语句的使用,是JS入门学习中的基础知识,需要的朋友可以参考下 void是在JavaScript中的一个重要的关键字可被用作其单操作数之前出现一元运算符,其可以是任何类型. 此运算符指定不需要返回值,进行计算的表达式.它的语法可能是下列之一: ? 1 2 3 4 5 <head> <script type="text/javascript"> <!-- void func() javascript:vo

详解JavaScript节流函数中的Throttle_javascript技巧

首先我们来了解下什么是Throttle     1. 定义 如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出. 也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期.       接口定义: * 频率控制 返回函数连续调用时,action 执行频率限定为 次 / delay * @param delay {number} 延迟时间,单位毫秒 * @param action {function} 请求关联函数,实际应用

详解javascript实现瀑布流绝对式布局_javascript技巧

瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我们就聊一聊瀑布流.一.绝对式布局: JS实现原理 其实瀑布式主要的难点就在于,如果将图片整齐的排列在对应的列下,以及什么时候开始刷新加载图片. 而图片整齐的排列的主要逻辑和算法即,先获取容器内可以放多少列,然后,通过计算,存放第一列的高度,再遍历剩下(除第一列的元素

详解java动态代理模式_java

本文针对java动态代理进行知识点整理,具体内容如下 一. JAVA的动态代理(比较官方说法) 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处 理消息.过滤消息.把消息转发给委托类,以及事后处理消息等. 代理类与委托类之间通常会存在关联关系,一个代理类的对象与一个委托类的对象关联,代理类的 对象本身并不真正实现服务,而是通过调用委托类的对象的相关方法,来提 供特定的服务. 按照代理的创建时期,代理类可以分为两种. 静态代理:由程序员创建或特定工