谈谈JavaScript MVC模式

最新推荐文章于 2022-11-14 13:09:41 发布

spring21st

最新推荐文章于 2022-11-14 13:09:41 发布

阅读量1.3w

点赞数 1

分类专栏：前端开发 JavaScript 文章标签： javascript mvc function backbone.js xhtml html

本文链接：https://blog.csdn.net/spring21st/article/details/7852179

版权

前端开发同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

前端越来越重，原来那种意大利面似的代码显得越来越难以维护。

重构势在必行，初步方案我选定backbone.js 作为javascript mvc框架。如果说原因，我觉得一个方面是由于它的轻量级，另外，就是它不像ember.js 绑定ui视图，灵活性更大一些。

鉴于有同学没有接触过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模式

<!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>

第二个例子中，进行了简单的mvc分层，看似代码量比第一种多了许多，但是对于后期模块的维护还是有很大的好处的。

spring21st

关注

1
点赞
踩
11

收藏

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

前端越来越重，原来那种意大利面似的代码显得越来越难以维护。重构势在必行，初步方案我选定backbone.js 作为javascript mvc框架。如果说原因，我觉得一个方面是由于它的轻量级，另外，就是它不像ember.js 绑定ui视图，灵活性更大一些。鉴于有同学没有接触过javascript mvc模式，我写了两个小例子：第一个是：没有使用mvc模式的：
复制链接

扫一扫