您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

详解JavaScript的策略模式编程

作者:佚名    责任编辑:admin    更新时间:2022-06-22

   这篇文章主要介绍了详解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 i