导语 | 以《羊了个羊》为代表的微信小游戏在去年屡次刷屏，引爆全网。近期又有几款微信小游戏成为热门，一度让“微信小游戏”热度指数上涨 20% 以上。微信小游戏商场一直都充满着期望与竞争，开发者怎样在爆品争霸中锋芒毕露呢？在小游戏开发中有哪些传统开发经历能够借鉴与学习呢？咱们特邀腾讯云 TVP、核算机作家/讲师 李艺教师，在他新书《微信小游戏开发》的基础上带咱们看看在微信小游戏项目开发中，从架构师视点怎样运用面向目标和软件规划思维和规划办法。

作者简介

李艺，腾讯云 TVP、日行一课联合创始人兼 CTO，极客时刻视频专栏《微信小程序全栈开发实战》讲师，一汽大众等知名企业内训培训讲师。具有近 20 年互联网软件研制经历，参加研制的音视频直播产品曾在腾讯 QQ 上线，为数千万人运用。是国内前期闪客之一，曾自界说课件标准并完结全渠道教育课件产品研制，官方评定为 Adobe 中国十五位社区管理员之一。一起，仍是中国人工智能学会会员，在北京协同创新研究院担任过人工智能项目的研制。业余喜爱写作，在微信大众号/视频号“艺述论”共享技能经历，著有《微信小游戏开发》、《小程序从 0 到 1：微信全栈工程师一本通》等核算机图书。

导言

去年 9 月，微信小游戏《羊了个羊》火爆全网，用户拜访量骤增时乃至呈现过屡次宕机，其火爆程度远超预期。其实，微信小游戏开发整体而言简略、独立、易上手，即便单人也能够完结开发，不少程序员都是独立的微信小游戏开发者。《羊了个羊》微信小游戏的炽热，招引了许多前端开发者向这个范畴转行。

一、为什么要在游戏开发中运用规划办法呢？

一般来说，游戏开发作为构思职业，不只要有过硬的技能，更要有别致的想法。特别当任何一个构思火爆后，立刻就会引发众多开发厂商快速跟进。这在游戏职业的开发史上，现已呈现过屡次后来者居上的案例了。

那么咱们该怎样应对这种状况呢？假如他人跑得快，就要想办法比他人跑得更快，跑得更久。游戏开发和其他一切软件产品的开发相同，并不是一锤子买卖，在榜首个版别上线今后，后续依据玩家反馈和竞品功用的升级，需求不断研制和推出新版别。

在版别迭代的过程中，怎样样让新功用更快地开发出来，一起老功用还能更大规模地保持安稳，这是最检测游戏架构师才能的。架构师在项目启动的时分，就要为后续可能的改变预留计划，让后边游戏版别的迭代进行得又快、又稳。这触及游戏架构师的一项中心才能：渐进式模块化重构与面向目标重构的才能。

软件开发是有老练的套路的，前辈大牛经过实践总结的规划办法便是套路的结晶，有认识地在游戏开发中运用老练的规划办法，不只能够显现程序员的内功水平，还能在必定程度上保证版别迭代的快速与安稳。

二、小游戏实战项目介绍

接下来共享的，是来自《微信小游戏开发》这本书中的一个小游戏实战案例，项目在基本功用开发完后，为了便利读者锻炼渐进式模块化重构与面向目标重构的才能，特意在这个阶段组织了规划办法实战。

在现在的项目中，有两类磕碰检测：一类产生在球与挡板之间；另一类产生在球与屏幕鸿沟之间。在游戏中，磕碰检测对错常常见一种功用，为了应对可能增加的磕碰检测需求，咱们运用规划办法将两类磕碰的耦合性降低，便利后续加入的磕碰与被磕碰目标。

详细从完结上来讲，咱们预备运用桥接办法，将产生磕碰的两边，别离界说为两个能够独立改变的笼统目标（HitObjectRectangle与HitedObjectRectangle），然后再让它们的详细完结部分独立改变，以此完结对桥接办法的运用。

现在球（Ball）与挡板（Panel）还没有基类，咱们能够让它们承继于新创立的笼统基类，但这样并不是很合理，它们都归于可视化目标，假如要承继，更应该承继于 Component 基类。在 JS 中一个类的承继只能完结单承继，不能让一个类一起承继于多个基类，在这种状况下咱们怎样完结桥接办法中的笼统部分呢？目标才能的扩展办法，除了承继，还有复合，咱们能够将界说好的桥接办法中的详细完结部分，以类特点的办法放在球和挡板目标中。

三、办法运用之桥接办法

在运用桥接办法之前，咱们首先需求把握它的概念，从界说下手。其实，桥接办法是一种结构型规划办法，可将一系列紧密相关的类拆分为笼统和完结两个独立的层次结构，从而能在开发时别离运用。

换言之，桥接办法将目标的笼统部分与它的详细完结部分分离，使它们都能够独立的改变。在桥接办法中，一般包含两个笼统部分和两个详细完结的部分，一个笼统部分和一个详细完结部分为一组，一共有两组，两组经过中心的笼统部分进行桥接，从而让两组的详细完结部分能够相对独立自由的改变。

为了更好地理解这个办法，咱们经过一张图看一个运用示例，如图 1 所示：

图1，桥接办法示例示意图

在这张图中，中心是一个跨渠道开发结构，它为开发者抽离出一套通用接口（笼统部分 B），这些接口是通用的、体系无关的，借此开发结构完结了跨渠道特性。在开发结构中，详细到每个体系（Mac、Windows和Linux），每个接口及 UI 有不同的完结（详细完结部分 B1、B2、B3）。左面，在运用程序中，开发者在软件中界说了一套笼统部分 A，在每个体系上有不同的详细完结（详细完结部分 A1、A2、A3）。运用程序面向笼统部分B编程，不用关心开发结构在每个体系下的详细完结；运用程序的详细完结部分 A1、A2、A3 是依据笼统部分A编程的，它们也不需求知道笼统部分 B。笼统部分 A 与笼统部分 B 之间仿佛有一个桥连接了起来，这两套笼统部分与其详细完结部分呈现的办法便是桥接办法。

试想一下，假如咱们不运用桥接办法，没有中心这一层跨渠道开发结构，没有笼统部分B和笼统部分 A，这时分咱们想完结详细完结部分 A1、A2、A3，需求怎样做呢？直接在各个体系的基础类库上完结呢？让 A1 与 B1 耦合、A2 与 B2 耦合、A3 与 B3 耦合吗？每次在运用程序中增加一个新功用，都要在三个当地别离完结。而有了桥接办法之后，B1、B2、B3 都不需求关心了，只需求知道笼统部分 B 就能够了；增加新功用时，只需求在笼统部分A中界说并依据笼统部分 B 完结中心功用就能够了，在详细完结部分 A1、A2、A3 中仅仅 UI 和交互办法不同罢了。这是运用桥接办法的价值。

（一）桥接办法的详细完结

接下来便进入实践步骤，咱们先界说桥接办法当中的笼统部分，一个是自动碰击目标的笼统部分（HitObjectRectangle），一个是被迫碰击目标的笼统部分（HitedObjectRectangle）。由于两个部分的笼统部分具有相似性，咱们能够先界说一个笼统部分的基类 Rectangle：

1.  // JS：src\views\hitTest\rectangle.js
2.  /** 目标的矩形描绘，默许将注册点放在左上角 */
3.  class Rectangle {
4.    constructor(x, y, width, height) {
5.      this.x = x
6.      this.y = y
7.      this.width = width
8.      this.height = height
9.    }
10.  
11.    /** X坐标 */
12.    x = 0
13.    /** Y坐标 */
14.    y = 0
15.    /** X轴方向上所占区域 */
16.    width = 0
17.    /** Y轴方向上所占区域 */
18.    height = 0
19.  
20.    /** 顶部鸿沟 */
21.    get top() {
22.      return this.y
23.    }
24.    /** 底部鸿沟 */
25.    get bottom() {
26.      return this.y + this.height
27.    }
28.    /** 左面界 */
29.    get left() {
30.      return this.x
31.    }
32.    /** 右鸿沟 */
33.    get right() {
34.      return this.x + this.width
35.    }
36.  }
37.  
38.exportdefaultRectangle

以上代码：

• 第 12 行至第 18 行，这是 4 个特点，x、y 决定注册点，width、height 决定尺度。

• 第 21 行至第 35 行，这是 4 个 getter 拜访器，别离代表目标在 4 个方向上的鸿沟值。

这 4 个特点不是实际存在的，而是经过注册点与尺度核算出来的。依据注册点方位的不同，这 4 个 getter 的值也不同。默许注册点，即（0，0）坐标点在左上角，这时分 top 等于 y；假如注册点在左下角，这时分 top 则等于 y 减去 height。

Rectangle 描绘了一个目标的距形规模，关于 4 个鸿沟特点 top、bottom、left、right 与注册点的联系，能够参见图 2：

图2，注册点与鸿沟值的联系

接下来咱们开端界说两个笼统部分：一个是碰击目标的，另一个是受碰击目标的。先看受碰击目标的，它比较简略：

1.  // JS：src\views\hitTest\hited_object_rectangle.js
2.  import Rectangle from "rectangle.js"
3.  
4.  /** 被磕碰目标的笼统部分，屏幕及左右挡板的注册点默许在左上角 */
5.  class HitedObjectRectangle extends Rectangle{
6.    constructor(x, y, width, height){
7.      super(x, y, width, height)
8.    }
9.  }
10.  
11.exportdefaultHitedObjectRectangle

HitedObjectRectangle 类它没有新增特点或办法，一切特征都是从基类承继的。它的首要效果是被承继，稍后有 3 个子类承继它。

再看一下碰击目标的界说：

1.  // JS：src\views\hitTest\hit_object_rectangle.js
2.  import Rectangle from "rectangle.js"
3.  import LeftPanelRectangle from "left_panel_rectangle.js"
4.  import RightPanelRectangle from "right_panel_rectangle.js"
5.  import ScreenRectangle from "screen_rectangle.js"
6.  
7.  /** 磕碰目标的笼统部分，球与方块的注册点在中心，不在左上角 */
8.  class HitObjectRectangle extends Rectangle {
9.    constructor(width, height) {
10.      super(GameGlobal.CANVAS_WIDTH / 2, GameGlobal.CANVAS_HEIGHT / 2, width, height)
11.    }
12.  
13.    get top() {
14.      return this.y - this.height / 2
15.    }
16.    get bottom() {
17.      return this.y + this.height / 2
18.    }
19.    get left() {
20.      return this.x - this.width / 2
21.    }
22.    get right() {
23.      return this.x + this.width / 2
24.    }
25.  
26.    /** 与被撞目标的磕碰检测 */
27.    hitTest(hitedObject) {
28.      let res = 0
29.      if (hitedObject instanceof LeftPanelRectangle) { // 磕碰到左挡板回来1
30.        if (this.left < hitedObject.right && this.top > hitedObject.top && this.bottom < hitedObject.bottom) {
31.          res = 1 << 0
32.        }
33.      } else if (hitedObject instanceof RightPanelRectangle) { // 磕碰到右挡板回来2
34.        if (this.right > hitedObject.left && this.top > hitedObject.top && this.bottom < hitedObject.bottom) {
35.          res = 1 << 1
36.        }
37.      } else if (hitedObject instanceof ScreenRectangle) {
38.        if (this.right > hitedObject.right) { // 触达右鸿沟回来4
39.          res = 1 << 2
40.        } else if (this.left < hitedObject.left) { // 触达左面界回来8
41.          res = 1 << 3
42.        }
43.        if (this.top < hitedObject.top) { // 触达上鸿沟回来16
44.          res = 1 << 4
45.        } else if (this.bottom > hitedObject.bottom) { // 触达下鸿沟回来32
46.          res = 1 << 5
47.        }
48.      }
49.      return res
50.    }
51.  }
52.  
53.exportdefaultHitObjectRectangle

在上面代码中：

• HitObjectRectangle 也是作为基类存在的，稍后有一个子类承继它。在这个基类中，第 13 行至第 24 行，咱们经过重写 getter 拜访器特点，将注册点由左上角移到了中心。

• 第 10 行，在构造器函数中咱们看到，默许的起始 x、y 是屏幕中心的坐标。

• 第 27 行至第 50 行，hitTest 办法的完结是中心代码，磕碰到左挡板与磕碰到右挡板回来的数字与之前界说的相同，磕碰四周墙面回来的数字是 4 个新增的数字。

• 第 35 行，这行呈现的 1<<0 代表数值的二进制向左移 0 个方位。移 0 个方位没有含义，这样书写是为了与下面的第 35 行、第 39 行、第 41 行等保持格式共同。1<<0 等于 1，1<<1 等于 2，1<<2 等于 4，1<<3 等于 8，这些数值是按 2 的 N 次幂递增的。

接下来咱们界说 ScreenRectangle，它是被碰击部分的详细完结部分：

1.  // JS：src\views\hitTest\screen_rectangle.js
2.  import HitedObjectRectangle from "hited_object_rectangle.js"
3.  
4.  /** 被磕碰目标屏幕的巨细数据 */
5.  class ScreenRectangle extends HitedObjectRectangle {
6.    constructor() {
7.      super(0, 0, GameGlobal.CANVAS_WIDTH, GameGlobal.CANVAS_HEIGHT)
8.    }
9.  }
10.  
11.exportdefaultScreenRectangle

ScreenRectangle 是屏幕的巨细、方位数据目标，是一个承继于 HitedObjectRectangle 的详细完结。ScreenRectangle 类作为一个详细的完结类，却没有增加额定的特点或办法，界说它的原因和含义在于是由它本身作为一个目标成立的，参见 HitObjectRectangle 类中的 hitTest 办法。

接下来咱们再看左挡板的巨细、方位数据目标：

1.  // JS：src\views\hitTest\left_panel_rectangle.js
2.  import HitedObjectRectangle from "hited_object_rectangle.js"
3.  
4.  /** 被磕碰目标左挡板的巨细数据 */
5.  class LeftPanelRectangle extends HitedObjectRectangle {
6.    constructor() {
7.      super(0, (GameGlobal.CANVAS_HEIGHT - GameGlobal.PANEL_HEIGHT) / 2, GameGlobal.PANEL_WIDTH, GameGlobal.PANEL_HEIGHT)
8.    }
9.  }
10.  
11.exportdefaultLeftPanelRectangle

LeftPanelRectangle 与 ScreenRectangle 相同，是承继于 HitedObjectRectangle 的一个详细完结，依然没有新增特点或办法，一切信息，包含巨细和方位，都现现已过构造器参数传递进去了。

再看一下右挡板的巨细、方位数据目标：

1.  // JS：src\views\hitTest\right_panel_rectangle.js
2.  import HitedObjectRectangle from "hited_object_rectangle.js"
3.  
4.  /** 被磕碰目标右挡板的巨细数据 */
5.  class RightPanelRectangle extends HitedObjectRectangle {
6.    constructor() {
7.      super(GameGlobal.CANVAS_WIDTH - GameGlobal.PANEL_WIDTH, (GameGlobal.CANVAS_HEIGHT - GameGlobal.PANEL_HEIGHT) / 2, GameGlobal.PANEL_WIDTH, GameGlobal.PANEL_HEIGHT)
8.    }
9.  }
10.  
11.exportdefaultRightPanelRectangle

RightPanelRectangle 也是承继于 HitedObjectRectangle 的一个详细完结，与 LeftPanelRectangle 不同的仅仅坐标方位。

接下来咱们再看碰击目标这边的详细完结部分，只要一个 BallRectangle 类：

1.  // JS：src\views\hitTest\ball_rectangle.js
2.  import HitObjectRectangle from "hit_object_rectangle.js"
3.  
4.  /** 磕碰目标的详细完结部分，球的巨细及运动数据目标 */
5.  class BallRectangle extends HitObjectRectangle {
6.    constructor() {
7.      super(GameGlobal.RADIUS * 2, GameGlobal.RADIUS * 2)
8.    }
9.  }
10.  
11.exportdefaultBallRectangle

BallRectangle 是描绘球的方位、巨细的，一切信息在基类中都具有了，所以它不需求增加任何特点或办法了。

以上便是咱们为运用桥接办法界说的一切类了，为了进一步明确它们之间的联系，看一张示意图，如图 3 所示：

图3，桥接办法示例类联系图

第二层的 HitObjectRectangle 和 HitedObjectRectangle 是桥接办法中的笼统部分，第三层是详细完结部分。事实上假如咱们需求的话，咱们在 HitObjectRectangle 和 HitedObjectRectangle 两条支线上，还能够界说更多的详细完结类。

（二）在项目中消费桥接办法

接下来看怎样运用，先改造原本的 Ball 类：

1.  // JS：src/views/ball.js
2.  import BallRectangle from "hitTest/ball_rectangle.js"
3.  
4.  /** 小球 */
5.  class Ball {
6.    ...
7.  
8.    constructor() { }
9.  
10.    get x() {
11.      // return this.#pos.x
12.      return this.rectangle.x
13.    }
14.    get y() {
15.      // return this.#pos.y
16.      return this.rectangle.y
17.    }
18.    /** 小于磕碰检测目标 */
19.    rectangle = new BallRectangle()
20.    // #pos // 球的起始方位
21.    #speedX = 4 // X方向分速度
22.    #speedY = 2 // Y方向分速度
23.  
24.    /** 初始化 */
25.    init(options) {
26.      // this.#pos = options?.ballPos ?? { x: GameGlobal.CANVAS_WIDTH / 2, y: GameGlobal.CANVAS_HEIGHT / 2 } 
27.      // const defaultPos = { x: this.#pos.x, y: this.#pos.y }
28.      // this.reset = () => {
29.      //   this.#pos.x = defaultPos.x
30.      //   this.#pos.y = defaultPos.y
31.      // }
32.      this.rectangle.x = options?.x ?? GameGlobal.CANVAS_WIDTH / 2
33.      this.rectangle.y = options?.y ?? GameGlobal.CANVAS_HEIGHT / 2
34.      this.#speedX = options?.speedX ?? 4
35.      this.#speedY = options?.speedY ?? 2
36.      const defaultArgs = Object.assign({}, this.rectangle)
37.      this.reset = () => {
38.        this.rectangle.x = defaultArgs.x
39.        this.rectangle.y = defaultArgs.y
40.        this.#speedX = 4
41.        this.#speedY = 2
42.      }
43.    }
44.  
45.    /** 重设 */
46.    reset() { }
47.  
48.    /** 烘托 */
49.    render(context) {
50.      ...
51.    }
52.  
53.    /** 运转 */
54.    run() {
55.      // 小球运动数据核算
56.      // this.#pos.x += this.#speedX
57.      // this.#pos.y += this.#speedY
58.      this.rectangle.x += this.#speedX
59.      this.rectangle.y += this.#speedY
60.    }
61.  
62.    /** 小球与墙面的四周磕碰查看 */
63.    // testHitWall() {
64.    //   if (this.#pos.x > GameGlobal.CANVAS_WIDTH - GameGlobal.RADIUS) { // 触达右鸿沟
65.    //     this.#speedX = -this.#speedX
66.    //   } else if (this.#pos.x < GameGlobal.RADIUS) { // 触达左面界
67.    //     this.#speedX = -this.#speedX
68.    //   }
69.    //   if (this.#pos.y > GameGlobal.CANVAS_HEIGHT - GameGlobal.RADIUS) { // 触达右鸿沟
70.    //     this.#speedY = -this.#speedY
71.    //   } else if (this.#pos.y < GameGlobal.RADIUS) { // 触达左面界
72.    //     this.#speedY = -this.#speedY
73.    //   }
74.    // }
75.    testHitWall(hitedObject) {
76.      const res = this.rectangle.hitTest(hitedObject)
77.      if (res === 4 || res === 8) {
78.        this.#speedX = -this.#speedX
79.      } else if (res === 16 || res === 32) {
80.        this.#speedY = -this.#speedY
81.      }
82.    }
83.  
84.    ...
85.  }
86.  
87.exportdefaultBall.getInstance()

在 Ball 类中产生了如下改变：

• 第 19 行，咱们增加了新的类特点 rectangle，它是 BallRectangle 的实例。一切关于球的方位、巨细等信息都移到了 rectangle 中，所以原本的类特点 #pos（第20 行）不再需求了，一起原本调用它的代码（例如第 58 行、第 59 行）都需求运用rectangle改写。

• 第 32 行至第 42 行，这是初始化代码，原本 #pos 是一个坐标，包含 x、y 两个值，现在将这两个值别离以 rectangle 中的 x、y 替代。

• 办法 testHitWall 用于屏幕边际磕碰检测的，第 63 行至第 74 行的是旧代码，第 75 行至第 82 行是新代码。hitedObject 是新增的参数，它是 HitedObjectRectangle 子类的实例。

小球归于碰击目标，它的 rectangle 是一个 HitObjectRectangle 的子类实例（BallRectangle）。

看一下对 Panel 类的改造，它是 LeftPanel 和 RightPanel 的基类：

1.  // JS：src/views/panel.js
2.  /** 挡板基类 */
3.  class Panel {
4.    constructor() { }
5.  
6.    // x // 挡板的起点X坐标
7.    // y // 挡板的起点Y坐标
8.    get x() {
9.      return this.rectangle.x
10.    }
11.    set x(val) {
12.      this.rectangle.x = val
13.    }
14.    get y() {
15.      return this.rectangle.y
16.    }
17.    set y(val) {
18.      this.rectangle.y = val
19.    }
20.    /** 挡板磕碰检测目标 */
21.    rectangle
22.    ...
23.  }
24.  
25.exportdefaultPanel

这个基类产生了如下改变：

• 第 21 行，rectangle 是新增的 HitedObjectRectangle 的子类实例，详细是哪个完结，要在子类中决定。

• 第 6 行、第 7 行将 x、y 去掉，代之以第 8 行至第 19 行的 getter 拜访器和 setter 设置器，对 x、y 特点的拜访和设置，将转变为对 rectangle 中 x、y 的拜访和设置。

为什么要在 Panel 基类中新增一个 rectangle 特点？由于要在它的子类 LeftPanel、RightPanel 中新增这个特点，挡板是被碰击目标，rectangle 是 HitedObjectRectangle 的子类实例。与其在子类中别离设置，不如在基类中一个当地共同设置；别的，基类中 render 办法烘托挡板时要运用 x、y 特点，x、y 特点需求重写，这也要求 rectangle 必须界说在基类中界说。

对 LeftPanel 类的改造：

1.  // JS：src/views/left_panel.js
2.  ...
3.  import LeftPanelRectangle from "hitTest/left_panel_rectangle.js"
4.  
5.  /** 左挡板 */
6.  class LeftPanel extends Panel {
7.    constructor() {
8.      super()
9.      this.rectangle = new LeftPanelRectangle()
10.    }
11.  
12.    ...
13.  
14.    /** 小球磕碰到左挡板回来1 */
15.    testHitBall(ball) {
16.      return ball.rectangle.hitTest(this.rectangle)
17.      // if (ball.x < GameGlobal.RADIUS + GameGlobal.PANEL_WIDTH) { // 触达左挡板
18.      //   if (ball.y > this.y && ball.y < (this.y + GameGlobal.PANEL_HEIGHT)) {
19.      //     return 1
20.      //   }
21.      // }
22.      // return 0
23.    }
24.  }
25.  
26.exportdefaultnewLeftPanel()

以上代码产生了两处改动：

• 第 9 行，这儿决定了基类中的 rectangle 是 LeftPanelRectangle 实例。LeftPanelRectangle 是 HitedObjectRectangle 的子类。

• 第 16 行，磕碰检测代码修正为：由小球的 rectangle 与当时目标的 rectangle 做磕碰测验。

接下来是对 RightPanel 类的改写：

1.  // JS：src/views/right_panel.js
2.  ...
3.  import RightPanelRectangle from "hitTest/right_panel_rectangle.js"
4.  
5.  /** 右挡板 */
6.  class RightPanel extends Panel {
7.    constructor() {
8.      super()
9.      this.rectangle = new RightPanelRectangle()
10.    }
11.  
12.    ...
13.  
14.    /** 小球磕碰到左挡板回来2 */
15.    testHitBall(ball) {
16.      return ball.rectangle.hitTest(this.rectangle)
17.      // if (ball.x > (GameGlobal.CANVAS_WIDTH - GameGlobal.RADIUS - GameGlobal.PANEL_WIDTH)) { // 磕碰右挡板
18.      //   if (ball.y > this.y && ball.y < (this.y + GameGlobal.PANEL_HEIGHT)) {
19.      //     return 2
20.      //   }
21.      // }
22.      // return 0
23.    }
24.  }
25.  
26.exportdefaultnewRightPanel()

与 LeftPanel 相似，在这个 RightPanel 类中也只要两处修正，见第 9 行与第 16 行。

最终，咱们开端改造 GameIndexPage，它是咱们运用桥接办法的最终一站了：

1.  // JS：src\views\game_index_page.js
2.  ...
3.  import ScreenRectangle from "hitTest/screen_rectangle.js"
4.  
5.  /** 游戏主页页面 */
6.  class GameIndexPage extends Page {
7.    ...
8.    /** 墙面磕碰检测目标 */
9.    #rectangle = new ScreenRectangle()
10.  
11.    ...
12.  
13.    /** 运转 */
14.    run() {
15.      ...
16.      // 小球磕碰检测
17.      // ball.testHitWall()
18.      ball.testHitWall(this.#rectangle)
19.      ...
20.    }
21.  
22.    ...
23.  }
24.  
25.exportdefaultGameIndexPage

在 GameIndexPage 类中，只要以下两处修正：

• 第 9 行，增加了一个私有特点 #rectangle，它是一个磕碰检测数据目标，是 HitedObjectRectangle 的子类实例。

• 第 18 行，在调用小球的 testHitWall 办法，将 #rectangle 作为参数传递了进去。

现在代码修正完了，从头编译测验，运转效果与之前共同，如下所示：

图4，运转效果图

（三）运用桥接办法的含义

咱们思考一下，咱们在磕碰检测这一块运用桥接办法，创立了许多新类，除了把项目变杂乱了，到底有什么积极效果？咱们将磕碰测验元素拆分为两个笼统目标（HitObjectRectangle 和 HitedObjectRectangle）的含义在哪里？

看一张结构图，如图 5 所示：

图5，待扩展的桥接办法示意图

HitObjectRectangle 代表磕碰目标的磕碰检测数据目标，HitedObjectRectangle 代表被磕碰目标的磕碰检测数据目标，后者有三个详细完结的子类：ScreenRectangle、LeftPanelRectangle 和 RightPanelRectangle，这三个子类代表三类被碰击的类型。

假如游戏中呈现一个四周需求被磕碰检测的目标，它的检测数据目标能够承继于 ScreenRectangle；假如呈现一个右侧需求磕碰检测的目标，它的检测数据目标能够承继于 RightPanelRectangle，以此类推左侧呈现的，它的数据目标能够承继于 LeftPanelRectangle。而假如呈现一个碰击目标，它的检测数据目标能够承继于 BallRectangle。

现在咱们这个小游戏项目太过简略，不满足显现桥接办法的效果。接下来咱们做一个人为拓宽，新增一个赤色立方体替代小球：

1.  // JS：src\views\cube.js
2.  import { Ball } from "ball.js"
3.  import CubeRectangle from "hitTest/cube_rectangle.js"
4.  
5.  /** 赤色立方块 */
6.  class Cube extends Ball {
7.    constructor() {
8.      super()
9.      this.rectangle = new CubeRectangle()
10.    }
11.  
12.    /** 烘托 */
13.    render(context) {
14.      context.fillStyle = "red"
15.      context.beginPath()
16.      context.rect(this.rectangle.left, this.rectangle.top, this.rectangle.width, this.rectangle.height)
17.      context.fill()
18.    }
19.  }
20.  
21.exportdefaultnewCube()

Cube 类的代码与 Ball 是相似的，只要 render 代码略有不同，让它承继于 Ball 是最简略的完结办法。第 9 行，rectangle 设置为 CubeRectangle 的实例，这个类尚不存在，稍后咱们创立，它是 BallRectangle 的子类。

在 cube.js 文件中引进的 Ball（第 2 行）现在还没有导出，咱们需求修正一下 ball.js 文件，如下所示：

1.  // JS：src/views/ball.js
2.  ...
3.  
4.  /** 小球 */
5.  // class Ball {
6.  export class Ball {
7.    ...
8.  }
9....

第 6 行，运用 export 关键字增加了常规导出，其它不会修正。

现在看一下新增的 CubeRectangle 类，如下所示：

1.  // JS：src\views\hitTest\ball_rectangle.js
2.  import BallRectangle from "ball_rectangle.js"
3.  
4.  /** 磕碰目标的详细完结部分，立方体的巨细及运动数据目标 */
5.  class CubeRectangle extends BallRectangle { }
6.  
7.exportdefaultCubeRectangle

CubeRectangle 是立方块的检测数据目标。CubeRectangle 能够承继于HitObjectRectangle 完结，但由于立方体与小球特征很像，所以让它承继于 BallRectangle 更简略完结。事实上它像一个“富二代”，只需求承继（第 5 行），什么也不用做。

接下来开端运用立方块。为了使测验代码简略，咱们将 game.js 文件中的页面创立代码修正一下，如下所示：

1.  // JS：disc\第11章\11.1\11.1.2\game.js
2.  ...
3.  // import PageBuildDirector from "src/views/page_build_director.js" // 引进页面制作指挥者
4.  import PageFactory from "src/views/page_factory.js" // 引进页面工厂
5.  
6.  /** 游戏目标 */
7.  class Game extends EventDispatcher {
8.    ...
9.  
10.    /** 游戏换页 */
11.    turnToPage(pageName) {
12.      ...
13.      // this.#currentPage = PageBuildDirector.buildPage(pageName, { game: this, context: this.#context })
14.      this.#currentPage = PageFactory.createPage(pageName, this, this.#context)
15.      ...
16.    }
17.  
18.    ...
19.  }
20....

只要两处改动，第 4 行和第 14 行，承继运用 PageBuildDirector 不利于代码测验，运用 PageFactory 代码会更简略。这一步改动与本末节的桥接办法没有直接联系。

最终修正 game_index_page.js 文件，运用立方块，代码如下：

1.  // JS：src\views\game_index_page.js
2.  ...
3.  // import ball from "ball.js" // 引进小球单例
4.  import ball from "cube.js" // 引进立方块实例
5....

只要第 4 行引进地址变了，其他不会改变。代码扩展完了，从头编译测验，游戏的运转效果如图 6 所示：

图6，小球变成了赤色方块

改动后，白色的小球变成了赤色的方块。此处，项目的可扩展性非常好，在运用了桥接办法今后，当咱们把小球扩展为方块时，只需求少量的改变就能够做到了。现在，将 CubeRectangle 归入结构图，如图 7 所示：

图7，扩展后的桥接办法示意图

第四层增加了一个 CubeRectangle，咱们的 HitObjectRectangle 修正了吗？没有。虽然在 HitObjectRectangle 的 hitTest 办法中，咱们运用 instanceof 进行了类型判别，如下所示：

1.  /** 与被撞目标的磕碰检测 */
2.  hitTest(hitedObject) {
3.    let res = 0
4.    if (hitedObject instanceof LeftPanelRectangle) { 
5.      ...
6.    } else if (hitedObject instanceof RightPanelRectangle) { 
7.      ...
8.    } else if (hitedObject instanceof ScreenRectangle) {
9.      ...
10.    }
11.    return res
12.}

但判别的是基本类型，在第四层增加子类型不会影响代码的履行。咱们增加的CubeRectangle 承继于 BallRectangle，归于 HitObjectRectangle 一支，假如增加一个新类承继于 HitedObjectRectangle 的子类（即 ScreenRectangle、LeftPanelRectangle 和 RightPanelRectangle），结果是相同的，代码不用修正依然有效。HitObjectRectangle 和 HitedObjectRectangle 作为笼统部分，是咱们完结的桥接办法中的重要组成部分，它们帮助详细完结部分屏蔽了改变的杂乱性。

注意：假如咱们增加了新的磕碰检测类型，不同于 ScreenRectangle、LeftPanelRectangle 和 RightPanelRectangle 中的任何一个，代码应该怎样拓宽？这时分就需求修正 HitObjectRectangle 类的 hitTest 办法啦，需求增加 else if 分支。

（四）桥接办法用法总结

综上所述，在桥接办法中，是有两部分目标别离完结笼统部分与详细部分，然后这两部分目标相对独立自由的改变。在本末节示例中，咱们首要运用桥接办法完结了磕碰检测。小球和立方块是碰击目标，左右挡板及屏幕是被碰击目标，经过相同的办法界说它们的巨细、方位数据，然后以一种相对高雅的办法完结了磕碰检测。

对比重构前后的代码，咱们不难发现，在运用桥接办法之前，咱们的磕碰检测代码是与 GameIndexPage、Ball、LeftPanel 和 RightPanel 耦合在一起的，并且不便利进行新的磕碰目标扩展；在重构今后，咱们磕碰检测的代码变成了只要 top、bottom、left 和 right 特点数值的对比，变得非常明晰。

一切面向目标重构中运用的规划办法，桥接办法是最杂乱的，在大型跨渠道 GUI 软件中，桥接办法基本也是必呈现的。

四、办法运用之拜访者办法

在运用了桥接办法今后，相信大家对规划办法的效果会有更深的了解，也有认识地运用规划办法，它能够帮助咱们更大极限地应对需求改变的杂乱性，从而保证版别迭代的安稳与快捷。

拜访者办法则是微信小游戏开发中另一运用规划，以下内容归于《微信小游戏开发》前端篇内容，咱们测验在源码基础之上，测验运用拜访者办法，目的依然是有针对性地锻炼学习者渐进性模块化重构和面向目标重构思维的才能。

（一）运用办法之前的项目状况

现在咱们在完结磕碰检测功用的时分，在 HitObjectRectangle 类中有一个很重要的办法：

1.  // JS：src\views\hitTest\hit_object_rectangle.js
2.  ...
3.  
4.  /** 磕碰目标的笼统部分，球与方块的注册点在中心，不在左上角 */
5.  class HitObjectRectangle extends Rectangle {
6.    ...
7.  
8.    /** 与被撞目标的磕碰检测 */
9.    hitTest(hitedObject) {
10.      let res = 0
11.      if (hitedObject instanceof LeftPanelRectangle) { // 磕碰到左挡板回来1
12.        ...
13.      } else if (hitedObject instanceof RightPanelRectangle) { // 磕碰到右挡板回来2
14.        ...
15.      } else if (hitedObject instanceof ScreenRectangle) {
16.        ...
17.      }
18.      return res
19.    }
20.  }
21.  
22.exportdefaultHitObjectRectangle

正是 hitTest 这个办法完结了磕碰检测，它依据不同的被碰击的目标，别离做了不同的鸿沟检测。

但是这个办法它存在缺点，其内部有 if else，并且这个 if else 是会随着被检测目标的类型增加而增加的。那么在实践中该怎样优化它呢？咱们能够运用拜访者办法重构。在拜访者办法中，能够依据不同的目标别离作不同的处理，这儿多个被碰击的目标，恰好是界说中所说的不同的目标。

（二）什么是拜访者办法

拜访者办法是一种行为规划办法， 它能将算法与算法所效果的目标隔离开来。换言之，拜访者办法依据拜访者不同，展示不同的行为或做不同的处理。运用拜访者办法，一般意味着调用回转，原本是 A 调用 B，结果该调用最终反赤来是经过 B 调用 A 完结的。

在这个办法中一般有两个方面，咱们能够拿软件外包商场中的甲方乙方类比一下，甲方是发包方，乙方是接包方，原本需求甲方到乙方公司体系阐明需求，由乙方依据不同需求组织不同的项目进行开发；现在则是与之相反。

拜访者办法的完结与运用

接下来开端拜访者办法的实践，咱们先给 LeftPanelRectangle、RightPanelRectangle 和 ScreenRectangle 都增加一个相同的办法 accept，榜首个 LeftPanelRectangle 的改动是这样的：

1.  // JS：src\views\hitTest\left_panel_rectangle.js
2.  ...
3.  
4.  /** 被磕碰目标左挡板的巨细数据 */
5.  class LeftPanelRectangle extends HitedObjectRectangle {
6.    ...
7.  
8.    visit(hitObject) {
9.      if (hitObject.left < this.right && hitObject.top > this.top && hitObject.bottom < this.bottom) {
10.        return 1 << 0
11.      }
12.      return 0
13.    }
14.  }
15.  
16.exportdefaultLeftPanelRectangle

第 8 行至第 13 行，在这个新增的 visit 办法中，代码是从原本 HitObjectRectangle 类中摘取一段并稍加修正完结的，这儿磕碰检测只触及两个目标的鸿沟，没有 if else，逻辑上便会愈加简练明晰。

第二个 RightPanelRectangle 类的改动是这样的：

1.  // JS：src\views\hitTest\right_panel_rectangle.js
2.  ...
3.  
4.  /** 被磕碰目标右挡板的巨细数据 */
5.  class RightPanelRectangle extends HitedObjectRectangle {
6.    ...
7.  
8.    visit(hitObject) {
9.      if (hitObject.right > this.left && hitObject.top > this.top && hitObject.bottom < this.bottom) {
10.        return 1 << 1
11.      }
12.      return 0
13.    }
14.  }
15.  
16.exportdefaultRightPanelRectangle

第 8 行至第 13 行，这个 visit 办法的完结，与 LeftPanelRectangle 中 visit 办法的完结千篇一律。

第 3 个是 ScreenRectangle 类的改动：

1.  // JS：src\views\hitTest\screen_rectangle.js
2.  ...
3.  
4.  /** 被磕碰目标屏幕的巨细数据 */
5.  class ScreenRectangle extends HitedObjectRectangle {
6.    ...
7.  
8.    visit(hitObject) {
9.      let res = 0
10.      if (hitObject.right > this.right) { // 触达右鸿沟回来4
11.        res = 1 << 2
12.      } else if (hitObject.left < this.left) { // 触达左面界回来8
13.        res = 1 << 3
14.      }
15.      if (hitObject.top < this.top) { // 触达上鸿沟回来16
16.        res = 1 << 4
17.      } else if (hitObject.bottom > this.bottom) { // 触达下鸿沟回来32
18.        res = 1 << 5
19.      }
20.      return res
21.    }
22.  }
23.  
24.exportdefaultScreenRectangle

第 8 行至第 21 行，是新增的 visit 办法。一切回来值，与原本均是相同的，代码的逻辑结构也是相同的，仅仅从哪个目标上取值上进行比较做了改变。

上面这 3 个类都是 HitedObjectRectangle 的子类，为了让基类的界说愈加完整，咱们也修正一下 hited_object_rectangle.js 文件，如下所示：

1.  // JS：src\views\hitTest\hited_object_rectangle.js
2.  ...
3.  
4.  /** 被磕碰目标的笼统部分，屏幕及左右挡板的注册点默许在左上角 */
5.  class HitedObjectRectangle extends Rectangle {
6.    ...
7.  
8.    visit(hitObject) { }
9.  }
10.  
11.exportdefaultHitedObjectRectangle

仅是第 8 行增加了一个空办法 visite，这个改动能够让一切 HitedObjectRectangle 目标都有一个默许的 visite办法，在某些状况下能够防止代码犯错。

最终咱们再看一下 HitObjectRectangle 类的改动，这也是拜访者办法中的中心部分：

1.  // JS：src\views\hitTest\hit_object_rectangle.js
2.  ...
3.  
4.  /** 磕碰目标的笼统部分，球与方块的注册点在中心，不在左上角 */
5.  class HitObjectRectangle extends Rectangle {
6.    ...
7.  
8.    /** 与被撞目标的磕碰检测 */
9.    hitTest(hitedObject) {
10.      // let res = 0
11.      // if (hitedObject instanceof LeftPanelRectangle) { // 磕碰到左挡板回来1
12.      //   if (this.left < hitedObject.right && this.top > hitedObject.top && this.bottom < hitedObject.bottom) {
13.      //     res = 1 << 0
14.      //   }
15.      // } else if (hitedObject instanceof RightPanelRectangle) { // 磕碰到右挡板回来2
16.      //   if (this.right > hitedObject.left && this.top > hitedObject.top && this.bottom < hitedObject.bottom) {
17.      //     res = 1 << 1
18.      //   }
19.      // } else if (hitedObject instanceof ScreenRectangle) {
20.      //   if (this.right > hitedObject.right) { // 触达右鸿沟回来4
21.      //     res = 1 << 2
22.      //   } else if (this.left < hitedObject.left) { // 触达左面界回来8
23.      //     res = 1 << 3
24.      //   }
25.      //   if (this.top < hitedObject.top) { // 触达上鸿沟回来16
26.      //     res = 1 << 4
27.      //   } else if (this.bottom > hitedObject.bottom) { // 触达下鸿沟回来32
28.      //     res = 1 << 5
29.      //   }
30.      // }
31.      // return res
32.      return hitedObject.visit(this)
33.    }
34.  }
35.  
36.exportdefaultHitObjectRectangle

第 10 行至第 31 行，是 hitTest 办法中被注释掉的旧代码，原本杂乱的 if else 逻辑没有了，只留下简略的一句话（第 32 行）。这便是规划办法的力气，不只现在简略，后续假如咱们要增加其他磕碰目标与被磕碰目标，这儿也不需求改变，足以证明代码的可扩展性。

这样咱们在增加新的磕碰检测目标时，只需求创立新类，没有 if else 逻辑需求增加，也不影响旧代码。第 9 行，这儿的 hitTest 办法，相当于一般拜访者办法中的 accept 办法。

当咱们将拜访者办法和桥接办法完结结合运用时，代码便变得异常简练明晰。小游戏的运转效果与之前是共同的，如下所示：

图7，运转效果示意图

（三）拜访者办法用法总结

综上，拜访者办法特别擅长将具有多个 if else 逻辑或 switch 分支逻辑的代码，以一种反向调用的办法，转化为两类目标之间一对一的逻辑联系进行处理。这是一个运用十分遍及的规划办法，当遇到杂乱的 if else 代码时，能够考虑运用该办法重构。

五、总结

桥接办法与拜访者办法是通用的，不只能够运用于小游戏开发中，并且能够用在其他前端项目中，乃至在其他编程语言中也能够发挥效果。规划办法本质上是一种组织软件功用、架构代码模块的面向目标思维，这种思维形似让咱们在开端写代码的时分多干了一些活，但干这些活的精力是值得投入的，它让咱们能够把其他的活干得更快、更稳、更好。

只要走得稳，才能够走得更远、更快。规划办法在项目开发中的效果一目了然，但也有一些反驳的声音认为，项目着急上线时根本没有仔细分析需求与架构的时刻，怎样运用规划办法？

其实，快速上线是没有问题的，时刻便是产品的生命；但在榜首版别上线之后，程序员能够进行渐进式重构，重构并不产生在项目之初，对规划办法的运用也是在基本功用尘埃落定之后进行的。

只要走得稳，才能够走得更远、更快，而规划办法与渐进式面向目标重构思维便能够帮助咱们完结。

本篇内容摘自腾讯云 TVP 李艺著、机械工业出书社出书的《微信小游戏开发》，该书已在京东上架，想要进一步深入了解微信小游戏开发的朋友们能够自行前往购买，文中触及的一切规划办法源码在随书源码中都能够找到。