谈谈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模式开发, ...
随机推荐
- 20145222GDB调试汇编堆栈过程分析
GDB调试汇编堆栈过程分析 实践代码example.c #include<stdio.h> short addend1 = 1; static int addend2 = 2; const ...
- 小记sql server临时表与表变量的区别
临时表与表变量都可以起到“临时”的作用,那么两者主要的区别是什么呢? 这里不讨论创建方式,以及全局临时表.会话临时表这些,主要记录一下个人对两者的主要区别以及适用情况的看法,有什么不对或补充的地方,欢 ...
- [BZOJ1264][AHOI2006]Match(DP+树状数组)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1264 分析: 考虑做一般的LCS的时候,更新结果的条件是a[i]==b[j]时候 于是 ...
- T4模板——一个神奇的代码生成器
利用T4模板,可以很方便的从数据库映射成Model模型,相当于动软等功效.但动软是可以直接生成三层,抽象工厂的,T4没那么牛叉,所以我们一般只用作生成Modle或者Server等指定方法了. 废话少说 ...
- 清空KindEditor富文本编辑器里面的内容方法
//清空KindEditorKindEditor.instances[0].html(""); 0表示第一个KindEditor编辑器对象 详情见链接:http://www.new ...
- php 升级php5.5
rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm yum install php55w php55w-opcache yum install ...
- XSS attack
<html> <form action="" method="post"> <input type="text" ...
- Swift&NodeJS 使用Alamofire进行Post(zhuan)
这篇博客主要实现Swift客户端和NodeJS后台的Post.Get请求实现. 我是一个略有点讨厌重复使用工具的人,比如这些基本功能完全可以用OC和PHP等替代,但是没办法,现在知识更新的太快啦,Sw ...
- 开发错误记录3:问题 Error:failed to find Build Tools revision 23.0.2
今天导入swiperefreshlayoutdemo 问题 Error:failed to find Build Tools revision 23.0.2 修改build.gradle 里面设置,其 ...
- 在Windows .NET平台下使用Memcached
网上关于Memcached的文章很多,但据我观察,大多是互相转载或者抄袭的,千篇一律.有些则是直接整理的一些超链接然后贴出来.那些超链接笔者大概都进去看了,其实关于Memcached的中文的技术文章, ...