【6/25】使用简单工厂模式（Simple Factory Pattern）改写Page基类

LIYI

发布于 2021-02-23 16:05:45

3460

发布于 2021-02-23 16:05:45

文章被收录于专栏：艺述论专栏艺述论专栏

这是《小游戏从0到1设计模式重构》系列内容第6篇，所有源码及资料在“程序员LIYI”公号回复“小游戏从0到1”获取。

工厂模式有三个姐妹：简单工厂模式、工厂方法模式和抽象工厂模式。这三个模式具有相同的目的和实现策略，都是通过一个简单的名称，从一系列对象中选择一个创建并返回。不同点在于，抽象程度和代码维护的自由程度不一样。

现在在我们的小游戏项目中，有两个页面，正常情况下我们还会有更多的页面。在创建这个些页面时，就可以应用工作模式。这一小节我们先看一下如何应用简单工厂模式。先看一下对page.js页面的改动：

// page/page.js
...
class Page extends Box {
  // 创建页面对象
  static createPage(pageName){
    let page 
    switch (pageName) {
      case "index":
        const IndexPage = require("./index_page")
        page = new IndexPage()
        break;
      case "gameOver":
      default:
        const GameOverPage = require("./game_over_page")
        page = new GameOverPage()
          break;
    }
    return page 
  }
  ...
}

在Page类中，我们增加了一个名称为createPage的静态方法，该方法接受一个名称为pageName的参数，返回一个具体的页面实例。如果以后添加新的页面，只需要来这里扩展一个新的case就可以了。

再看一下game.js中的改动，如何使用这个实现了简单工厂模式的静态方法：

// game.js
...
import Page from './page/page.js'
...
class Game extends Event {
  ...
  constructor() { 
    super()
    GameGlobal.game = this
    // this.gameOverPage = new GameOverPage()
    // this.indexPage = new IndexPage()
    this.gameOverPage = Page.createPage("gameOver") //游戏结束页面
    this.indexPage = Page.createPage("index") //主页
  }
  ...
}

没有复杂的变化，简单正确的重构就像渭城的朝雨一样，随风潜入夜，润物细无声。

游戏的运行效果与之前无异：

阶段源码

本小节阶段源码见：disc/第五章/5.1.6。

我讲明白没有，欢迎提问。

2021年1月30日

本文视频：

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-01-30，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自艺述论微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度