javascript - javascript中的模板方法

Question

我想在 javascript 中实现模板方法模式。

我有一个带有一些子类的 PropertyDecorator:OpenButtonDecorator、SeeButtonDecorator 等等。我想在属性装饰器中有下一个功能:

var build = function(){
   decorate(); //Abstract in PropertyDecorator, defined in subclasses
   return le.build();
}

我怎样才能让这个场景发挥作用？也许我实现了错误的继承 :S(也有帮助 :) )

提前谢谢你。

Answer 1

Javascript 是一种动态类型的、基于原型(prototype)的语言。模板方法是一种设计模式，因此与语言无关，但其实现可能因语言而异。

对于 javascript 以及其他动态类型语言，如 ruby​​，抽象类和接口(interface)没有多大意义，因为动态链接是通过委托(delegate)实现的。 (方法调用传播到继承树中的更高级别，直到原型(prototype)可以处理请求)。这与 duck-typing 结合，这意味着任何方法都可以在任何实例上调用，避免了显式契约的需要，在基于类的语言中，显式契约是由那些在特定类型上可见的声明方法定义的。

因此，为了实现该模式，只需在父类的原型(prototype)构建方法(该方法将成为模板)上调用一个不存在的方法，然后在子类上简单地实现该方法即可:

function PropertyDecorator()
{
   this.build = function()
   {
      var decoration=this.decorate();
      return "The decoration I did: "+decoration;
   };
}

//we set the parent (those prototype that instances of this class will delegate calls to) 
OpenButtonDecorator.prototype = new PropertyDecorator();
function OpenButtonDecorator()
{
   this.decorate = function()
   {
     return "open button";
   };
}


SeeButtonDecorator.prototype = new PropertyDecorator();
function SeeButtonDecorator()
{
   this.decorate = function()
   {
      return "see button";
   };
}



var decorators=Array(new SeeButtonDecorator(),new OpenButtonDecorator());
for (var decorator in decorators){
    document.writeln(decorators[decorator].build());
}

方法分派(dispatch)是这样发生的:

• 实例是否调用了方法？
  • 否 -> 将调用委托(delegate)给父级(它是原型(prototype))并重复。
  • 是-> 在隐式对象(一开始接收调用的对象)的上下文中执行方法体。

因此，当调用 new SeeButtonDecorator().build() 时，首先，它会尝试在实例上执行构建方法。由于它未在实例中定义，方法调用将委托(delegate)给实例父实例，在本例中，SeeButtonDecorator 原型(prototype)也没有获得该方法，因此它将调用委托(delegate)给它的父实例(PropertyDecorator)。 PropertyDecorator，有 build() 方法。

function PropertyDecorator()
{
   this.build = function()
   {
      var decoration=this.decorate();
      return "The decoration I did: "+decoration;
   };
}

执行它时，build 方法的主体将在新的 SeeButtonDecorator() 的上下文中进行评估。实例本身不会有 decorate() 方法，因为它是在 SeeButtonDecorator() 函数(它的原型(prototype))中定义的。那么，这次调用将委托(delegate)给实例原型(prototype)，最终将获得一个 decorate() 方法:

function SeeButtonDecorator()
{
   this.decorate = function()
   {
      return "see button";
   };
}

该方法将再次在实例的上下文中执行，并返回字符串，回落到调用堆栈中直到返回

The decoration I did: see button