前端mvc

本文探讨了前端MVC架构,分享了如何深入理解和学习这一概念。通过对前端MVC的理解,揭示了其在复杂应用中的重要性,并提供了相关的学习资源链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

讲了些前端mvc的知识

前端MVC变形记

http://web.jobbole.com/84100/

怎样深入了解和学习前端 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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值