Question

我正在开发一款浏览器游戏。我有很多升级，制作，行星等我用jS生成的（1盒（或方块？）PER EACH项目）。这是我游戏中的迷你片段，显示了我当前生成HTML的方法

我做一个简单的循环并插入与升级一样多的框

for(i = 0; i < 9; i ++)

然后，我在一个函数中放了一个巨大的HTML代码块，并使用数组来识别升级ID，名称，信息......

这是生成大量HTML内容的好习惯吗？如果没有，我该怎么做才能改善它？

另外，我开始编码＆＃34;一个主要目标是学习JS的游戏。如果你有更好的解决方案，但它们包含一个lib（jQuery等），那么你可以发布它，但我在这里是纯粹的jS。谢谢！

- 更新 -

过去一年，我一直在学习很多JS。 @DoXicK前一段时间提供了一个很好的例子，但我当时并不了解它。这是我提出的最终渲染方法，感谢他的例子，我想我会坚持下去：

JS：

const game = {};
// make our life easier
const $ = key => document.getElementById(key);
const render = (key, str) => $(key).insertAdjacentHTML("beforeend", str);
// a function that returns upgrades html content
const html = self => `
  <div class="some-class" id="${self.id}">
    <h2>${self.name}</h2>
    <p>${self.damage}</p>
  </div>
`;
// object containing each upgrades template
const template = {
  laserGun: {
    id: "laserGun",
    name: "Laser Gun",
    damage: 10
  },
  plasmaGun: {
    id: "plasmaGun",
    name: "Plasma Gun",
    damage: 30
  }
};
// Upgrade class
class Upgrade {
  constructor(upg) {
    this._id = upg.id;
    this._name = upg.name;
    this._damage = upg.damage;
  }

  get id() {return this._id;}
  get name() {return this._name;}
  get damage() {return this._damage;}

  generate() {
    // find div with upgrade id, and inject it's html content inside
    render("upgrade", html(this));
  }

  static make(key) {
    game.upgrade[key] = new Upgrade(template[key]);
    game.upgrade[key].generate();
  }
}

let laserGun = Upgrade.make("laserGun");

HTML：

<div class="upgrade-container" id="upgrade">

我希望你觉得它有用！

Answer 1

正如我在评论中已经解释的那样，如果你将代码保留为意大利面条代码，你的代码将变得非常难以维护。

我已经制作了一个更新的示例，它与您完成了相同的操作，只需使用一些更新的javascript，并通过您的＆＃34;模板制作一个javascript组件＆＃34;。

https://jsfiddle.net/7L8e5kmg/3/

class UpgradeBlock {
    constructor(props) {
      this.props = props;
  }
  render() {
    let { Id, Name, Info, Res } = this.props;
    // basically:
    // let Id = this.props.Id;
    // let Name = this.props.Name;
    // etc
    return (`
<div class="hud-item" id="${Id}">
    <img src="client/img/${Id}.png" id="${Id}Img" />
    <div class="hud-tooltip f16 fwhite">
        <div class="hud-tt-header-container">
            <div class="hud-tt-info-container">
                <div class="col-full">${Name}</div>
                <div class="col-half">
                    <img style="vertical-align: text-bottom;" src="img/${Res}16.png" />
                  <span id="${Id}Cost"></span>
                                </div>
                <div class="col-half">
                    +<span id="${Id}dmgPerLv"></span>
                  <img style="vertical-align: text-bottom;" src="client/img/character/dps16.png" />
                                </div>
            </div>
            <div class="hud-tt-lv-container">
                <canvas id="${Id}Bar" width="64px" height="64px"></canvas>
                        </div>
        </div>
        <hr/>
        <div class="hud-tt-info-container">
            <div class="col-half fwhite f16">
                <img style="vertical-align: text-bottom" src="client/img/character/dps16.png" />
              <span id="${Id}Dmg"></span>
            </div>
            <div class="col-half fgrey f10"><span class="fwhite f16" id="${Id}ofTotal"></span> of total</div>
            <div class="col-full fgrey f10">${Info}</div>
            <div class="col-full f10" id="${Id}click"></div>
        </div>
    </div>
</div>
    `)
  }
}

您可以通过以下方式使用它：

let upgrade = {
  Id: 'id', 
  Name: 'name',
  Info: 'info',
  Res: 'res'
};
let html = new UpgradeBlock(upgrade).Render()

对于那些做出反应的人：是的，它旨在引导这种方式。

生成大量的HTML

1 个答案: