<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>
</div>
<p id="animalDo"></p>
<script>
// controller
Animal = {
start : function() {
this.view.start();//从视图触发
},
set : function(animalName) {
this.model.setAnimal(animalName);
//controller 改变 model
}
};
// model
Animal.model = {
animalDictionary : {
car : 'meows',
fish : 'swims',
bird : 'flies'
},
currentAnimal : null,
setAnimal : function(name) {
this.currentAnimal = this.animalDictionary[name] ? name : null;
this.onchange();
},
onchange : function() {
Animal.view.update();
//model传递结果到View(个人觉得这里可以由Controller来专递,最好不要直接操作视图)
},
getAnimalAction : function() {
return this.currentAnimal ? this.currentAnimal + ' ' + this.animalDictionary[this.currentAnimal] : 'unknow';
}
};
// view
Animal.view = {
start : function() {
document.getElementById('setAnimal').onchange = this.onchange;
//视图绑定事件
},
onchange : function() {
Animal.set(document.getElementById('setAnimal').value);
//视图执行操作,调用Controller
},
update : function() {
//视图执行最后的更新响应
console.log(Animal.model.getAnimalAction());
document.getElementById('animalDo').innerHTML = Animal.model.getAnimalAction();
}
};
Animal.start();//入口
</script>

javascript simple MVC的更多相关文章

  1. JavaScript客户端MVC 框架综述

    简介 15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站.我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据.这类架构适合于向 ...

  2. web 纯 javascript 的MVC 实现的简单实践

    现在javascript是越来越火了,好多javascript框架随之产生,大大简化了我们的开发,一般的开发模式大家是比较喜欢MVC 的model controller view 这种模式 方便了我们 ...

  3. javaScript与MVC

    MVC,就是Module,View,Controller分离,使业务逻辑更加清晰,但是现在公司的项目中很多地方那个不是这样的,很多业务逻辑放在了javascript中实现,这样做的优点就是对于技术要求 ...

  4. directly receive json data from javascript in mvc

    if you send json data to mvc,how can you receive them and parse them more simply? you can do it like ...

  5. ASP.NET MVC 中使用JavaScriptResult asp.net mvc 返回 JavaScript asp.mvc 后台返回js

    return this.Content("<script>alert('暂无!');window.location.href='/Wap/Index';</script&g ...

  6. JavaScript Simple Explain and Use

    Javascript 说明: JavaScript 和 Java 之间几乎没有任何关系. JavaScript原名为LiveScript,他的作用只是为了处理一些复杂的动态网页. 目前,JS是遵循EC ...

  7. JavaScript Simple

    ylbtech-JavaScript: 1.返回顶部 1.   2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http: ...

  8. 谈谈JavaScript MVC模式

    第一个是:没有使用mvc模式的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. JS 实现MVC的写法

    案例:当select 下拉选择框值变化时,显示其值(不是文本) 常规写法 <h3>JavaScript no MVC</h3>  <div>   <selec ...

随机推荐

  1. GNS3 思科模块 说明

    GNS3整合了如下的软件:   Dynamips :一款可以让用户直接运行Cisco系统(IOS)的模拟器   Dynagen :是Dynamips的文字显示前端   Pemu : PIX防火墙设备模 ...

  2. ldr与adr的区别

    参考: http://coon.blogbus.com/logs/2738861.html http://hi.baidu.com/for_guanghui/item/73e60bbcc8be15a2 ...

  3. python安全编程

    ##入门 这将是第一个一系列关于python编程的博客文章.python是一门非常强大的语言,因为它有信息安全社区的支撑.这意味着很多工具都是由python编写并且可以在脚本中调用很多模块.使用模块的 ...

  4. Shell--命令执行的判断依据:;,&&,||

    :在命令与命令中间利用分号来隔开,这样一来,分号前得命令执行完后就会立刻接着执行后面的命令了 &&若第一个命令执行完毕并且正确执行也就是$?=0,则开始执行后一个命令,否则不执行 || ...

  5. 常见的七大排序算法Java实现

    /** * @author Javen * @Email javenlife@126.com * 2015年12月9日 */ public class Sorting { static int[] a ...

  6. spock+maven+junitReport接口测试框架

    1.POM 文件: <?xml version="1.0" encoding="UTF-8"?><project xmlns="ht ...

  7. 学习ajax总结

    之前公司的ajax学习分享,做一点总结,加深记忆 什么是ajax? 异步的的js和xml,用js异步形式操作xml,工作主要是数据交互 借阅用户操作时间,减少数据请求,可以无刷新请求数据 创建一个对象 ...

  8. 倍福TwinCAT(贝福Beckhoff)应用教程13.2 TwinCAT控制松下伺服 CS说明

    虚拟仿真上,要注意仿真只是为了可视化,可以看到数据的变动是否和实际一致,所以Robot2D才是主要因素,虚拟仿真采集机器人的关节位置或者TCP位置来显示而已,为了测试一些别的算法,我们还可以在虚拟仿真 ...

  9. EasyBoot使用方法

    1 修改背景图片直接替换掉EasyBoot\disk1\ezboot目录下面的BACK.BMP文件即可.但是限于DOS功能限制,只能使用640×480像素,256位色的BMP图片.   2 鼠标左键单 ...

  10. Ubuntu git 安装、生成sshkey、克隆、切换分支

    #1.安装git apt-get install git; #2生成公钥私钥文件 2.配置git账户: git config --global user.name "yourname&quo ...