讲了些前端mvc的知识
前端MVC变形记
怎样深入了解和学习前端 MVC 架构?
https://www.zhihu.com/question/20135390
我对前端MVC的理解
https://www.cnblogs.com/macliu/p/5238734.html也许很多人跟我一样对明明几行代码就可以敲出来的,却偏偏要用前端mvc很不解。
看例子吧。里面有点问题,有空解决。
这是对照组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<select id="drinkSelect">
<option value="coffee">coffee</option>
<option value="milk">milk</option>
<option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p>
<script type="text/javascript">
document.getElementById("drinkSelect").onchange = function() {
var color;
var colorOfDrink = {
"coffee": "brown",
"milk": "white",
"juice": "orange"
};
color = colorOfDrink[this.value];
document.getElementById("theColorOfDrink").innerHTML = color;
}
</script>
</body>
</html>
实验组:这组就是分层了,但是代码有点问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<select id="drinkSelect">
<option value="coffee">coffee</option>
<option value="milk">milk</option>
<option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p>
<script type="text/javascript">
//showDrinkColor is Controller
var showDrinkColor = {
start: function() {
this.view.start();
},
set: function(drinkName) {
this.model.setDrink(drinkName);
}
};
//Model
showDrinkColor.model = {
colorOfDrink: {
"coffee": "brown",
"milk": "white",
"juice": "orange"
},
selectedDrink: null,
setDrink: function(drinkName) {
this.selectedDrink = this.colorOfDrink[this.selectedDrink] ? drinkName : null;
this.onchange();
},
onchange: function() {
showDrinkColor.view.update();
},
getDrinkColor: function() {
return this.selectedDrink ? this.colorOfDrink[this.selectedDrink] : "white";
}
};
//View
showDrinkColor.view = {
start: function() {
document.getElementById("drinkSelect").onchange = this.onchange;
},
onchange: function() {
showDrinkColor.set(document.getElementById("drinkSelect").value);
},
update: function() {
document.getElementById("theColorOfDrink").innerHTML = showDrinkColor.model.getDrinkColor();
}
};
showDrinkColor.start();
</script>
</body>
</html>