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 ...
随机推荐
- css字体font-family
1."Arial" 2."Microsoft YaHei" 3."黑体" 4."宋体" 5.sans-serif 6.T ...
- http://blog.sina.com.cn/s/blog_62e1faba010147k4.html
http://blog.sina.com.cn/s/blog_62e1faba010147k4.html
- Druid对比Cassandra
不是Cassandra专家, 如果描绘有错误, 请通过邮件列表或者其他方式告知, 我们会修正. Druid对扫描和聚合做了很大程度的优化, 不用提前计算就支持任意的向下钻取, 还可以实时摄入流式数据并 ...
- paste,两个文件相同行拼接在一起的shell命令
今天又学到一个命令,果然厉害 参考这里 http://blog.csdn.net/anders_zhuo/article/details/8461641
- 门窗ERP——让门窗幕墙加工更简单
系统特点: 本系统包括:生产销售.采购.库存.财务模块 型材按重量算成本,玻璃按面积算成本 单据采用推送的方式推进单据流程,层层递进严格把握管理流程.保证数据的严密.严谨性. 销售订单支持门窗.幕墙. ...
- mysql Connector C++ 操作数据库 vs2012
最近想写一个应用程序,要连接和操作mysql数据库,以前只是用c++ builder 操作过mysql数据库,那是用控件操作的,感觉比较弱智,但是c++ builder vcl控件感觉在多线程里比较坑 ...
- curl Error : maximum redirects followed , 这种问题的一种原因 .
在stack overflow 上查找到有些网站上需要返回一些cookie的,所以当我们curl当相应的网站时,必须要将返回的cookie保存起来. $cookie = tempnam (" ...
- win10 环境下 MinGW-w64安装
MinGW-w64 就是 著名C/C++编译器GCC的Windows版本. 一.什么是 MinGW-w64 ?MinGW 的全称是:Minimalist GNU on Windows .它实际上是将经 ...
- RIP协议
1.概念:RIP协议是一种内部网关协议(IGP),是一种动态路由选择协议,用于自治系统(AS)内的路由信息的传递. RIP协议基于距离矢量算法(DistanceVectorAlgorit ...
- 记一起和前端没什么卵关系的OPTION 405问题
记一起和前端没什么卵关系的后端405问题 问题的关键点在于本来是POST请求,会变成OPTION请求,并且提示405报错,会类似跨域.并且只有某些手机机型才会(如Oppo系列). 其实跨域的问题,如果 ...