第一个是:没有使用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模式的更多相关文章

  1. 【译】采用MVC模式创建一个简单的javascript App

    原文标题:Build A Simple Javascript App The MVC Way 作者:joshcrawmer4 翻译人:huansky 初次翻译,翻译的不好,还请见谅 JavaScrip ...

  2. 谈谈MVC模式

    谈谈MVC模式   作者: 阮一峰 1. 如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architectural pattern),属于编程的方法论. MVC模式 ...

  3. 稍微谈一下 javascript 开发中的 MVC 模式

    随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在javascript开发里应用MVC模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧. MVC模式的基本理念,是通过把 ...

  4. 采用MVC模式创建一个简单的javascript App

    初次翻译,翻译的不好,还请见谅 JavaScript中最好的一部分之一,也可能是最糟糕的. 在HTML文档的头部添加一个开始和结束脚本标记,并在其中引入一些意大利面条式的代码,毫无疑问这是一种过分简单 ...

  5. 谈谈JavaEE的mvc模式及典型的三层架构

    首先,向读者介绍一下mvc架构,mvc是一种源于桌面程序的架构模式,它的基本思想是把程序界面和业务逻辑分开,这样便于软件的后期维护,同时也方便开发时期分工及管理,mvc有很多有点所以现在已经被广泛的应 ...

  6. 20.谈谈对mvc的认识。

    MVC是 模型(Model) .视图(View).控制器(Control) 的英文首字母的缩写,核心思想是:视图和用户交互 通过事件导致控制器改变 控制器改变导致模型改变 或者控制器同时改变两者 模型 ...

  7. 二十七、EFW框架BS系统开发中的MVC模式探讨

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

  8. 【JavsScript】JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember

    摘要:选择JavaScript MVC框架很难.一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思.本文对JavaScript MVC框架Angular.Ba ...

  9. 【JavaScript】对比12 款优秀的JavaScript MVC/MVVC框架 你最喜欢Backbone or Ember

    http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ 目前基本所以后台程序都是面向对象MVC模式开发, ...

随机推荐

  1. 实验二 Java面向对象程序设计

    实验二 Java面向对象程序设计 实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计 ...

  2. Use Dapper ORM With ASP.NET Core

    Dapper.NET is not just another ORM tool, it's considered as the king of ORM. Because it's fast, easy ...

  3. climits

    <climits>头文件定义的符号常量 CHAR_MIN  char的最小值SCHAR_MAX  signed char 最大值SCHAR_MIN   signed char 最小值UCH ...

  4. 仿各种APP将文章DOM转JSON并在APP中以列表显示(android、ios、php已开源)

    背景 一直以来都想实现类似新闻客户端.鲜城等文章型app的正文显示,即在web editor下编辑后存为json,在app中解析json并显示正文. 网上搜过,没找到轮子.都是给的思路,然后告知是公司 ...

  5. 使用Spring Sleuth和Zipkin跟踪微服务

    随着微服务数量不断增长,需要跟踪一个请求从一个微服务到下一个微服务的传播过程, Spring Cloud Sleuth 正是解决这个问题,它在日志中引入唯一ID,以保证微服务调用之间的一致性,这样你就 ...

  6. nios II--实验3——led 100M硬件部分

    led_100M 硬件开发 新建原理图 参照实验二(led) QSys调用模块 参照实验二(led) 原理图添加IP模块 参照实验二(led),在调用PLL的时候需要修改系统和SDRAM的时钟频率为1 ...

  7. 使用js和jq去掉左右空格方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  8. js和jQuery的日常

    让当前页面显示整个屏幕 - (iframe 从后台跳转到前台的时候容易多层嵌套)$(document).ready(function(){ if(window.top != window.self) ...

  9. Android延时执行的几种方法

    开启新线程 new Thread(new Runnable(){ public void run(){ Thread.sleep(XXXX); handler.sendMessage(); //告诉主 ...

  10. [转]《Hadoop基础教程》之初识Hadoop

    原文地址:http://blessht.iteye.com/blog/2095675 Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴定Hadoop不 ...