访问者模式 in JavaScript

访问者模式,即 visitor pattern,是一个很常见的模式,这是因为它能有效地构建出复杂的系统。更关键的是,在函数式语言中,它表现起来是如此的直观。因此,我决定利用一个简单的例子,来谈谈访问者模式,并且希望能够通过这个例子,让大家感受到这一模式的威力。

王垠曾在他的文章 解密“设计模式” 中提到过访问者模式:

所谓的 visitor,本质上就是函数式语言里的含有‘模式匹配’(pattern matching)的递归函数。

这一定义还是非常精确的,在我们介绍完访问者模式后,会再回顾一下这句话。

一个简单的例子

下面我们将会利用一个小例子,介绍访问者模式。

假设在一个二维的坐标系中,定义一个类 Point,有两个方法,

  • getDistance 用于计算 point 到原点的距离
  • minus 接收一个点 p 作为参数,将两个点的坐标相减得到一个新坐标,通过新坐标创建一个新的点

代码如下:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  
  // 计算 point 到原点的距离
  getDistance() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }
  
  // point 与另一个点 p 的坐标相减得到一个新坐标,通过新坐标创建一个新的点
  minus (p) {
    const delX = this.x - p.x;
    const delY = this.y - p.y;
    return new Point(delX, delY);
  }
}

再定义一个基本的形状类 Circle,Circle 有一个方法 hasPoint 用于判断传进来的 point 是否在 circle 的范围内,代码如下:

class Circle {
  constructor(r) {
    this.r = r;
  }
  
  // 判断 p 是否在 circle 的范围内
  hasPoint (p) {
    return p.getDistance() <= this.r;
  }
}

再定义一个基本的形状类 Square,和 Circle 一样有一个 hasPoint 方法,代码如下:

class Square {
  constructor(s) {
    this.s = s;
  }
  
  // 判断 p 是否在 square 的范围内
  hasPoint (p) {
    return (p.x <= this.s) && (p.y <= this.s);
  }
}

在有了上面的几个类定义后,我们通过下面的代码观察下如何使用这些类:

var p1 = new Point(1, 2);

var square1 = new Square(2);
var circle1 = new Circle(2);

square1.hasPoint(p1);   // true
circle1.hasPoint(p1);   // false

上面的例子虽然符合我们的期望。但是,这个系统还过于简单。

仔细观察就会发现,创建出来的形状都是基于原点的。为了增加一些难度,我们新增一个类 Trans,让形状可以位移。注意新的类 Trans 的 hasPoint 方法的实现。

class Trans {
  constructor(point, shape) {
    this.point = point;
    this.shape = shape;
  }
  
  hasPoint (p) {
    var { point, shape } = this;
    var newP = p.minus(point);
    return shape.hasPoint(newP);
  }
}

让我们再添加一些简单的例子吧。

var p1 = new Point(1, 2);
var p2 = new Point(1, 1);

var square1 = new Square(2);
var circle1 = new Circle(2);
var trans1 = new Trans(p2, circle1);

square1.hasPoint(p1);       // true
trans1.hasPoint(p1);        // true

通过上面的例子可以发现,传递给 Trans 的 shape 不仅仅只能是基本的形状 Circle,Square,还能是位移之后的 Trans。这是因为 Trans.hasPoint 的实现是依赖传进来的 shape.hasPoint,但是这个 shape 具体是什么它并不关心。而这正是访问者模式的核心所在。

通过让 Circle,Square,Trans 实现同一个方法 hasPoint,并且通过 Trans 实现形状的组合功能,从而让这个系统更加强大。可以想象,我们可以像定义 Trans 一样,引入更多的转换功能,比如实现 Rotate,Scale 类等等,并且让各种 shape 相互组合,得到更加复杂的 shape。从而做到,在不修改原有代码的情况下,构建出更加复杂的系统。

分析与变换

细心的读者也许发现了,上面的例子虽然有趣,当是似乎和本文开头所讲的函数式语言关系不大,和王垠所定义的访问者模式也不相同(甚至和 Java 中的访问者模式也不一样)。

这是因为,在实际开发中,为了让系统各个部分更加清晰,尤其是大型系统,人们会更倾向于将所有的 hasPoint 方法的实现放在一起,然后将这些实现作为部件添加到 Shape 中。而完成了这一步,才算是真正实现了访问者模式。

想在 Java 中实现访问者模式会比较绕,所幸我们用的是 JavaScript。下面,我会将上面的例子做一些简单的变换,使其更符合预期。但要记住,这些变换从本质上来说其实都是等价的,只是代码形式的转换而已。

首先,去除所有形状中的 hasPoint 方法,并且引入一个 type 的属性。代码如下:

var CIRCLE = 'CIRCLE';
var SQUARE = 'SQUARE';
var TRANS = 'TRANS';

class Circle {
  constructor(r) {
    this.r = r;
    this.type = CIRCLE;
  }
}

class Square {
  constructor(s) {
    this.s = s;
    this.type = SQUARE;
  }
}

class Trans {
  constructor(point, shape) {
    this.point = point;
    this.shape = shape;
    this.type = TRANS;
  }
}

然后,我们创建一个新函数,将原先所有的 hasPoint 方法集中在一起,这个函数就是访问者模式的关键啦。

var hasPoint = (s, p) => {
  // 利用 switch 做模式匹配
  switch (s.type) {
    case CIRCLE:
      return p.getDistance() <= s.r;
    case SQUARE:
      return (p.x <= s.s) && (p.y <= s.s);
    case TRANS:
      var { point, shape } = s;
      var newP = p.minus(point);
      return hasPoint(shape, newP);     // 递归调用 hasPoint
     default:
      console.error('HAS_POINT -- unexpteced type', s.type);
  }
}

这个新函数只是利用 switch 将原来的 hasPoint 方法集合,但它确实符合王垠定义中的两个关键点

  • 模式匹配
  • 递归

而这正是访问者模式的特征所在。

如果你是面向对象的忠实粉丝的话,还可以添加一个抽象类,通过让所有的 shape 都继承这一抽象类,重新获得原来的 hasPoint方法。代码如下:

class AbstractShape {
  hasPoint (p) { return hasPoint(this, p) }
}

最后

希望这个简单的例子,能向大家阐明访问者模式是如何构建复杂系统的。其关键是:

  • 通过组合的方式构建出更加复杂的系统
  • 利用递归达到解耦的效果

比如上面的例子,定义了组合类 Trans( 甚至 Rotate,Scale 等),让基本类 Circle,Square 得以通过不同的组合方式构建出更加复杂的 shape。而 hasPoint 函数中的递归,则让 Trans 可以不关心其接收的 shape 的类型,从而达到解耦的效果。

希望这篇文章,能够对你有所启发,有所帮助。

你可能感兴趣的:(访问者模式 in JavaScript)