谈谈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模式开发, ...
随机推荐
- Orchard CMS中如何打包不带源码的模块
在Orchard CMS的官网已经提供了文档说明如何打包,但是如果使用它的打包方式,打好的nuget包是带源代码的.如果是为开源系统写模块,不需要关注源代码是否可见.但是如果是用Orchard CMS ...
- 面向对象的PHP
类的实例(包括继承) <?php // 父类 class Animal { public $name; public $age; // 构造函数,使用new操作符生成实例的时候自动调用 func ...
- 纯C#实现Hook功能
发布一个自己写的用于Hook .Net方法的类库,代码量不大,完全的C#代码实现,是一个比较有趣的功能,分享出来希望能和大家共同探讨 安装:Install-Package DotNetDetour源码 ...
- Java：注解（元数据）
初识Java注解 所谓的元数据是指用来描述数据的数据,可能刚听到元数据的时候你会有点陌生,其实任何一个使用过struts或者hibernate的开发人员都在不知不觉中使用元数据,更通俗一点来说元数据是 ...
- Android开发自学笔记(Android Studio1.3.1)—1.环境搭建
一.引言 .Google推出的 毫无疑问,这个是它的最大优势,Android Stuido是Google推出,专门为Android"量身订做"的,是Google大力支持的一款基于I ...
- Replace Pioneer注册
以下是目前合法长期使用Replace Pioneer的唯一方法(除了购买之外): Replace Pioneer过期后,会弹出一个注册(Registration)窗口,其中有一个试用选项(Trial ...
- JavaScript鼠标拖拽特效及相关问题总结
#div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...
- 用centos光盘安装RPM包的方法
1.在虚拟机光盘选项中设置连接路径为centos安装光盘. 2.将光盘挂载到本地目录. #新建一个文件夹 mkdir cdrom #把光盘挂载到cdrom目录下 mount /dev/cdrom cd ...
- 转 为什么文件存储要选用B+树这样的数据结构？
为什么文件存储要选用B+树这样的数据结构? "文件存储要选用B+树这样的数据结构"--没记错的话,这是严蔚敏那本数据结构书上的一句结论.不知道是我没细看还是她没细讲,反正当时纯粹应 ...
- android AccessibltyService 辅助服务
1.使用Accessibility可以模拟手机点击,获取屏幕文字,通知消息等. 2.使用该类需新建一个AccessibilityService的子类,并在AndroidManifest.xml文件中注 ...