打野决策之旅——JavaScript设计模式探秘（一）

2024-01-28 13:56:16

峡谷里的构造函数

在英雄联盟中，每个英雄都有自己的独特技能和属性。当我们选择一名英雄时，系统会自动创建一个该英雄的对象，该对象包含了英雄的名称、血量、法力值、攻击力等属性。这个对象是由构造函数创建的。

在 JavaScript 里，构造函数通常是认为用来实现实例的特殊的构造函数。通过 new 来调用定义的构造函数，你可以告诉 JavaScript 你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。在构造函数内部，this 关键字引用的是新创建的对象。

举个例子，我们来定义一个英雄的构造函数：

function Hero(name, health, mana, attack) {
  this.name = name;
  this.health = health;
  this.mana = mana;
  this.attack = attack;
}

要创建一个新的英雄对象，我们可以使用以下代码：

const Ashe = new Hero("Ashe", 460, 260, 60);

这样，我们就创建了一个新的英雄对象 Ashe，并为其设置了名称、血量、法力值和攻击力等属性。

单例模式：峡谷只有一个王者

在英雄联盟中，峡谷里只有一个王者。这句话体现了单例模式的思想。

单例模式是一种设计模式，它确保某一个类只有一个实例存在。在 JavaScript 中，我们可以通过以下代码实现单例模式：

const Singleton = (function () {
  let instance;

  function createInstance() {
    if (!instance) {
      instance = new Object();
    }

    return instance;
  }

  return {
    getInstance: createInstance,
  };
})();

这样，我们就可以通过调用 Singleton.getInstance() 来获取单例对象。

工厂模式：英雄百变不离其宗

在英雄联盟中，每种英雄都有自己独特的技能和玩法。但这些英雄的技能和玩法都遵循着一定的套路。

工厂模式是一种设计模式，它允许我们通过一个统一的接口来创建对象。在 JavaScript 中，我们可以通过以下代码实现工厂模式：

const HeroFactory = {
  createHero: function (name) {
    switch (name) {
      case "Ashe":
        return new Ashe();
      case "Garen":
        return new Garen();
      case "Lux":
        return new Lux();
      default:
        throw new Error("Invalid hero name");
    }
  },
};

这样，我们就可以通过调用 HeroFactory.createHero(name) 来创建不同的英雄对象。

适配器模式：峡谷里的翻译官

在英雄联盟中，玩家来自不同的国家，使用着不同的语言。但他们都能在峡谷里无障碍地交流。

适配器模式是一种设计模式，它允许我们将一个接口转换成另一个接口，以便不兼容的接口能够一起工作。在 JavaScript 中，我们可以通过以下代码实现适配器模式：

const Translator = {
  translate: function (message, language) {
    switch (language) {
      case "English":
        return message;
      case "Chinese":
        return "翻译为中文";
      case "Korean":
        return "翻译为韩文";
      default:
        throw new Error("Invalid language");
    }
  },
};

const KoreanPlayer = {
  sendMessage: function (message) {
    console.log("发送韩文消息：" + message);
  },
};

const Adapter = {
  sendMessage: function (message) {
    const translatedMessage = Translator.translate(message, "Korean");
    KoreanPlayer.sendMessage(translatedMessage);
  },
};

Adapter.sendMessage("你好，世界！");