谈谈JavaScript MVC模式

Posted 白马非马

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谈谈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"> 
<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‘).onchange=callback;
	},
	onchange:function(callback){
		callback(document.getElementById(‘setAnimal‘).value);
	},
	update:function(data){
		document.getElementById(‘whatDoesThisAnimalDo‘).innerHTML=data;
	}
};
Animal.start();

  

以上是关于谈谈JavaScript MVC模式的主要内容,如果未能解决你的问题,请参考以下文章

简单谈谈js中的MVC

谈谈MVC模式

谈谈JAVA工程狮面试中经常遇到的面试题目------什么是MVC设计模式

1.3 谈谈你对MVC的理解

对MVC模式的理解是啥?

谈谈我对严格模式的理解