谈谈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模式开发, ...
随机推荐
- Logging的这点小事
真正做项目,才发觉Logging的好处和学问.自己胡搞的时候,常常使用System.out.println作为输出. 但实际的项目,尤其是library比较多的时候,好好配置好Logging,才能在后 ...
- ImageMagick常用指令详解
Imagemagick常用指令 (ImageMagick--蓝天白云) (ImageMagick官网) (其他比较有价值的IM参考) (图片自动旋转的前端实现方案) convert 转换图像格式和大小 ...
- FineUI小技巧（1）简单的购物车页面
起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多 ...
- 前端备忘录 — IE 的条件注释
CSS hack 由于不同厂商的浏览器,比如 Internet Explorer,Safari,Mozilla Firefox, Chrome 等,或者是同一厂商的浏览器的不同版本,如 IE6 和 I ...
- GitHub中国区前100名到底是什么样的人？
本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排名,分析前一百名的用户属性,剖析这些活跃在技术社区的牛人到底是何许人也!后续会根据我的一些经验出品<技术人员 ...
- 木耳听歌记---Clip+安装Rockbox
黑五嫌着无聊,在什么值得买的诱惑下从美国亚马逊买了一个Clip+ 8GB版本,不为别的,就为了一直听别人说可以装Rockbox,谁让咱的魅族MX2无法安装这听歌神器来. 转运过程就不说了, 历时一个多 ...
- Javascript/jQuery 获取地址栏URL参数的方法
1.jquery获取url很简单,代码如下 window.location.href; 2.javascript获取url参数 function getUrlParam(name) { var reg ...
- 【Zeyphr】保存json到数据库
方法一: public int SaveJob(JObject data) { var formWrapper = RequestWrapper.Instance().LoadSettingXmlSt ...
- 37-more 简明笔记
分页显示文本 more [options] file more用于分页显示文本文件,最早出现在BSD当中,但这一命令非常基本,后来less命令对其做了增强,所谓的less也就是少即是多 参数 file ...
- 如何设置unobtrusive的语言包
场景:网站是用的validate.unotrusive.js验证的,网站的语言已经切换到繁体了,但是提示语言还是英文. 环境:asp.net mvc4,jquery.validate.unotrusi ...