javascript simple MVC
<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的更多相关文章
- JavaScript客户端MVC 框架综述
简介 15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站.我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据.这类架构适合于向 ...
- web 纯 javascript 的MVC 实现的简单实践
现在javascript是越来越火了,好多javascript框架随之产生,大大简化了我们的开发,一般的开发模式大家是比较喜欢MVC 的model controller view 这种模式 方便了我们 ...
- javaScript与MVC
MVC,就是Module,View,Controller分离,使业务逻辑更加清晰,但是现在公司的项目中很多地方那个不是这样的,很多业务逻辑放在了javascript中实现,这样做的优点就是对于技术要求 ...
- 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 ...
- ASP.NET MVC 中使用JavaScriptResult asp.net mvc 返回 JavaScript asp.mvc 后台返回js
return this.Content("<script>alert('暂无!');window.location.href='/Wap/Index';</script&g ...
- JavaScript Simple Explain and Use
Javascript 说明: JavaScript 和 Java 之间几乎没有任何关系. JavaScript原名为LiveScript,他的作用只是为了处理一些复杂的动态网页. 目前,JS是遵循EC ...
- JavaScript Simple
ylbtech-JavaScript: 1.返回顶部 1. 2. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http: ...
- 谈谈JavaScript MVC模式
第一个是:没有使用mvc模式的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- JS 实现MVC的写法
案例:当select 下拉选择框值变化时,显示其值(不是文本) 常规写法 <h3>JavaScript no MVC</h3> <div> <selec ...
随机推荐
- GNS3 思科模块 说明
GNS3整合了如下的软件: Dynamips :一款可以让用户直接运行Cisco系统(IOS)的模拟器 Dynagen :是Dynamips的文字显示前端 Pemu : PIX防火墙设备模 ...
- ldr与adr的区别
参考: http://coon.blogbus.com/logs/2738861.html http://hi.baidu.com/for_guanghui/item/73e60bbcc8be15a2 ...
- python安全编程
##入门 这将是第一个一系列关于python编程的博客文章.python是一门非常强大的语言,因为它有信息安全社区的支撑.这意味着很多工具都是由python编写并且可以在脚本中调用很多模块.使用模块的 ...
- Shell--命令执行的判断依据:;,&&,||
:在命令与命令中间利用分号来隔开,这样一来,分号前得命令执行完后就会立刻接着执行后面的命令了 &&若第一个命令执行完毕并且正确执行也就是$?=0,则开始执行后一个命令,否则不执行 || ...
- 常见的七大排序算法Java实现
/** * @author Javen * @Email javenlife@126.com * 2015年12月9日 */ public class Sorting { static int[] a ...
- spock+maven+junitReport接口测试框架
1.POM 文件: <?xml version="1.0" encoding="UTF-8"?><project xmlns="ht ...
- 学习ajax总结
之前公司的ajax学习分享,做一点总结,加深记忆 什么是ajax? 异步的的js和xml,用js异步形式操作xml,工作主要是数据交互 借阅用户操作时间,减少数据请求,可以无刷新请求数据 创建一个对象 ...
- 倍福TwinCAT(贝福Beckhoff)应用教程13.2 TwinCAT控制松下伺服 CS说明
虚拟仿真上,要注意仿真只是为了可视化,可以看到数据的变动是否和实际一致,所以Robot2D才是主要因素,虚拟仿真采集机器人的关节位置或者TCP位置来显示而已,为了测试一些别的算法,我们还可以在虚拟仿真 ...
- EasyBoot使用方法
1 修改背景图片直接替换掉EasyBoot\disk1\ezboot目录下面的BACK.BMP文件即可.但是限于DOS功能限制,只能使用640×480像素,256位色的BMP图片. 2 鼠标左键单 ...
- Ubuntu git 安装、生成sshkey、克隆、切换分支
#1.安装git apt-get install git; #2生成公钥私钥文件 2.配置git账户: git config --global user.name "yourname&quo ...