访问者模式 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 的类型，从而达到解耦的效果。

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