Я знаю определение 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
Редактировать - Фрагмент показывает некоторую ошибку в Chrome, но отлично работает в Firefox