谈谈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模式的更多相关文章
- 【译】采用MVC模式创建一个简单的javascript App
原文标题:Build A Simple Javascript App The MVC Way 作者:joshcrawmer4 翻译人:huansky 初次翻译,翻译的不好,还请见谅 JavaScrip ...
- 谈谈MVC模式
谈谈MVC模式 作者: 阮一峰 1. 如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architectural pattern),属于编程的方法论. MVC模式 ...
- 稍微谈一下 javascript 开发中的 MVC 模式
随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在javascript开发里应用MVC模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧. MVC模式的基本理念,是通过把 ...
- 采用MVC模式创建一个简单的javascript App
初次翻译,翻译的不好,还请见谅 JavaScript中最好的一部分之一,也可能是最糟糕的. 在HTML文档的头部添加一个开始和结束脚本标记,并在其中引入一些意大利面条式的代码,毫无疑问这是一种过分简单 ...
- 谈谈JavaEE的mvc模式及典型的三层架构
首先,向读者介绍一下mvc架构,mvc是一种源于桌面程序的架构模式,它的基本思想是把程序界面和业务逻辑分开,这样便于软件的后期维护,同时也方便开发时期分工及管理,mvc有很多有点所以现在已经被广泛的应 ...
- 20.谈谈对mvc的认识。
MVC是 模型(Model) .视图(View).控制器(Control) 的英文首字母的缩写,核心思想是:视图和用户交互 通过事件导致控制器改变 控制器改变导致模型改变 或者控制器同时改变两者 模型 ...
- 二十七、EFW框架BS系统开发中的MVC模式探讨
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...
- 【JavsScript】JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember
摘要:选择JavaScript MVC框架很难.一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思.本文对JavaScript MVC框架Angular.Ba ...
- 【JavaScript】对比12 款优秀的JavaScript MVC/MVVC框架 你最喜欢Backbone or Ember
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ 目前基本所以后台程序都是面向对象MVC模式开发, ...
随机推荐
- 认识HTML5的WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- 从setTimeout谈JavaScript运行机制
从setTimeout说起 众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执 ...
- java的HashCode方法
总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set. 前者集合内的元素是有序的,元素可以重复: 后者元素无序,但元素不可重复. 要想保证元素不重复,可两个元素是 ...
- nios II--实验5——定时器软件部分
软件开发 首先,在硬件工程文件夹里面新建一个software的文件夹用于放置软件部分:打开toolsàNios II 11.0 Software Build Tools for Eclipse,需要进 ...
- 最小/大费用最大流模板(codevs1914)
void addedge(int fr,int to,int cap,int cos){ sid[cnt].fr=fr;sid[cnt].des=to;sid[cnt].cap=cap;sid[cnt ...
- 隐马尔可夫模型（Hidden Markov Model，HMM）
介绍 崔晓源 翻译 我们通常都习惯寻找一个事物在一段时间里的变化规律.在很多领域我们都希望找到这个规律,比如计算机中的指令顺序,句子中的词顺序和语音中的词顺序等等.一个最适用的例子就是天气的预测. 首 ...
- android服务之启动方式
服务有两种启动方式 通过startService方法来启动 通过bindService来开启服务 布局文件 在布局文件中我们定义了四个按键来测试这两种方式来开启服务的不同 <?xml versi ...
- position为absolute的元素如何实现居中
当给div设置absolute时,该元素已经脱离文档流,呈现浮动状态,只能通过left,top,right,bottom来设置属性,要实现居中有两种方法: 一.css法 <div class=& ...
- python学习笔记整理——列表
Python 文档学习笔记 数据结构--列表 列表的方法 添加 list.append(x) 添加元素 添加一个元素到列表的末尾:相当于a[len(a):] = [x] list.extend(L) ...
- Day Five (beta)
站立式会议 站立式会议内容总结 331 今天:爬虫抓取豆瓣数据; 明天:数据展示在话题详情页,话题页修改 442 今天:了解聊天模块 遇到的问题:无 明天:编写聊天模块 439 今天:学习 遇到困难 ...