Question

我知道MVC的定义。我知道有一些框架，如果使用它们，我将实现MVC。但是我对它的理解还不够，无法独自完成。请提出在编写代码之前如何开始思考，以便我将代码专业地组织成MVC风格。

实际上，这不仅与MVC的实现有关，请您检查一下我的代码并提出为什么它可能是或不是专业外观的代码。我只是以程序员的身份开始，我能够编写代码，但我真的不知道我在哪里正确和哪里错了。

这是猫计分应用程序的代码

const imageBasePath = "https://raw.githubusercontent.com/smartcoder2/CatClickerApp/master/images/";
      const imageNameArrary = [
        "tom.jpg",
        "jack.jpeg",
        "zoe.jpeg",
        "simba.jpg",
        "george.jpeg"
      ];
      let catScore = [0, 0, 0, 0, 0]; // this keeps the score of each cat. index of array determines the cat
      let htmlUpdate;
      let ddl;
      const imageVar = document.getElementById("cat-image");
      const textVar = document.getElementById("show-click-value");

      imageVar.addEventListener("click", incrementClickVar);

      function incrementClickVar() {
        ddl = document.getElementById("select-cat");
        catScore[ddl.selectedIndex]++;
        htmlUpdate =
          catScore[ddl.selectedIndex] == 0
            ? "zero"
            : catScore[ddl.selectedIndex];
        textVar.innerHTML = htmlUpdate;
        //
      }
      function validate() {
        ddl = document.getElementById("select-cat");
        htmlUpdate =
          catScore[ddl.selectedIndex] == 0
            ? "zero"
            : catScore[ddl.selectedIndex];
        textVar.innerHTML = htmlUpdate;
        let selectedValue = ddl.options[ddl.selectedIndex].value;
        imageVar.src = imageBasePath + imageNameArrary[ddl.selectedIndex];
      }

.outer-box {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 2vw;
  align-items: center;
}
.outer-box > div,
img {
  max-width: 25vw;
  min-height: 10vh;
  max-height: 44vh;
  justify-self: center;
}
.outer-box > div {
  text-align: center;
}
#show-click-value {
  font-size: 6vh;
}

<html>
  <head>
    <link rel="stylesheet" href="styles\style.css" />
  </head>
  <body>
    <div class="outer-box">
      <div class="item1"></div>
      <div class="item2">
        <label class="cat-label" for="select-cat">Select a cat</label>
        <select id="select-cat" name="cats" onchange="validate()">
          <option value="Tom">Tom</option>
          <option value="Jack">Jack</option>
          <option value="Zoe">Zoe</option>
          <option value="Simba">Simba</option>
          <option value="George">George</option>
        </select>
        <br />
      </div>
      <div class="item3"></div>
      <div class="item4"></div>
      <img id="cat-image" src="https://raw.githubusercontent.com/smartcoder2/CatClickerApp/master/images/tom.jpg" alt="image not loaded" />
      <div class="item6"></div>
      <div class="item7"></div>
      <div id="show-click-value">zero</div>
      <div class="item9"></div>
    </div>
    <!-- srr-to-do-later: position the image and other elements properly -->
 
  </body>
</html>

如果您想下载并运行项目，请访问GitHub链接Cat CLicker App

编辑- 代码段在chrome中显示了一些错误，但在firefox中运行正常

如何在此代码上实现mvc方法？

0 个答案: