谈谈JavaScript MVC模式

最新推荐文章于 2024-07-27 21:41:27 发布

annuobin1120

最新推荐文章于 2024-07-27 21:41:27 发布

阅读量103

点赞数

文章标签：测试 javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/WhiteHorseIsNotHorse/p/6103819.html

版权

第一个是：没有使用mvc模式的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>javascript demo no mvc</title>
</head> 
<body> 
	<h3>JavaScript no MVC</h3>
	<div>
		<select name="" id="setAnimal">
			<option value="cat">cat</option>
			<option value="fish">fish</option>
			<option value="bird">bird</option>
		</select>
		<p id="whatDoesThisAnimalDo"></p>
	</div>
	
	<script type="text/javascript"> 
        document.getElementById('setAnimal').onchange = function(){
			var thisAnimalDoes;
			switch(this.value){
				case 'cat': 
					thisAnimalDoes = 'cat meows';
					break;
				case 'fish':
					thisAnimalDoes = 'fish swims';
					break;
				case 'bird':
					thisAnimalDoes = 'bird fies';
					break;
				default: 
					thisAnimalDoes = 'wuff?';
			}
			
			document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes;
		};
    </script> 
	
</body> 
</html>

　　第二个例子：采用mvc模式(其实是伪mvc 因为数据视图没有完全分开)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>javascript demo mvc</title>
</head> 
<body> 
	<h3>JavaScript simple MVC</h3>
	<div>
		<select name="" id="setAnimal">
			<option value="cat">cat</option>
			<option value="fish">fish</option>
			<option value="bird">bird</option>
		</select>
		<p id="whatDoesThisAnimalDo"></p>
	</div>
	
	
	
	<script type="text/javascript"> 
		// controller
		Animal = {
			start: function(){
				this.view.start();
			},
			set: function(animalName){
				this.model.setAnimal(animalName);
			}
		};
	
        // model
		Animal.model = {
			animalDictionary :{
				cat: 'meows',
				fish: 'swims',
				bird: 'flies'
			},
			
			currentAnimal:null,
			
			setAnimal: function(animalName){
				this.currentAnimal = this.animalDictionary[animalName]?animalName:null;
				this.onchange();
			},
			
			onchange: function(){
				Animal.view.update();
			},
			
			getAnimalAction: function(){
				return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : 'wuff?';
			}
		};
		
		
		// view
		Animal.view = {
			start: function(){
				document.getElementById('setAnimal').onchange = this.onchange;
			},
			
			onchange: function(){
				Animal.set(document.getElementById('setAnimal').value);
			},
			
			update: function(){
				document.getElementById('whatDoesThisAnimalDo').innerHTML = Animal.model.getAnimalAction();
			}
		};
		
		Animal.start();
    </script> 
	
</body> 
</html>

　　第三种还可以

Animal={
	start:function(){
		Animal.view.onchange(Animal.set);
		Animal.view.start(Animal.onchange);
	},
	onchange:function(){
		Animal.view.onchange(Animal.set);
	},
	set:function(animalName){
		Animal.model.setAnimal(animalName);
		Animal.view.update(Animal.model.getAnimalAction());
	}
};
Animal.model={
	animalDictionary:{
		cat:'meows',
		fish:'swims',
		bird:'flies'
	},
	currentAnimal:null,
	setAnimal:function(animalName){
		this.currentAnimal=this.animalDictionary[animalName]?animalName:null;
	},
	getAnimalAction:function(){
		return this.currentAnimal?this.currentAnimal+" "+this.animalDictionary[this.currentAnimal]:'wuff?';
	}
};
Animal.view={
	start:function(callback){
		document.getElementById('setAnimal').οnchange=callback;
	},
	onchange:function(callback){
		callback(document.getElementById('setAnimal').value);
	},
	update:function(data){
		document.getElementById('whatDoesThisAnimalDo').innerHTML=data;
	}
};
Animal.start();

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6103819.html

annuobin1120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谈谈JavaScript MVC模式

第一个是：没有使用mvc模式的：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"...
复制链接

扫一扫