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 ...
随机推荐
- ArcMap绘图时,节点显示时的小数点位数
直接来图吧,省的啰嗦了: 打开选中节点的,节点坐标列表(Edit Sketch Properties):
- SpringBoot拦截器中service或者redis注入为空的问题
原文:https://my.oschina.net/u/1790105/blog/1490098 这两天遇到SpringBoot拦截器中Bean无法注入问题.下面介绍我的思考过程和解决过程: 1.由于 ...
- CSS3:animation动画
animation只应用在页面上已存在的DOM元素上,学这个不得不学keyframes,我们把他叫做“关键帧”. keyframes的语法法则: @keyframes flash { from{ le ...
- C#之Raw Socket网络封包监视源码
大家可以建立一个Windows Form应用程序,在下面的各个文件中添加对应的源码: //RawSocket.csnamespace ReceiveAll{ using System; using S ...
- 从C转到JAVA学习路之struct与class对比(转)
转自:http://blog.csdn.net/andywxf01/article/details/53506549 JAVA里最牛B的最基本的就是类,而C语言中的struct也可以定义自己的数据结构 ...
- 2017.11.21 查询某个字段为null的记录
注意,不使用 = null, 而是 is null. select fd_username, fd_tenantid, fd_validity from t_user WHERE fd_validit ...
- 绝对让你理解Android中的Context
这个问题是StackOverFlow上面一个热门的问题What is Context in Android? 整理这篇文章的目的是Context确实是一个非常抽象的东西.我们在项目中随手都会用到它,但 ...
- 对AOP切面的一些整理与理解
首先上一张AOP的图示 一:几个重要的概念 1> 切面:横切关注点(跨越应用程序多个模块的功能)被模块化的特殊对象[验证切面.日志切面] 2> 通知:切面中的每个方法 3& ...
- POJ Cow Exhibition
题目链接:Click Here~ 题目意思自己看吧. 算法分析: 对我来想是没有想到,最后看别人的博客才知道的.要把当中的一个条件当作体积.由于两个条件都存在负数,所以还要先保证最后不会再体积中出现负 ...
- A – EIGHT
八数码转换问题-- 经典bfs-- 关键问题: 1.状态的保存(见longwuxu该题解题报告中的全排列Hash表示) 2.bfs中标记数组的处理: bfs中有两个标记数组,一个是标记队列中节 ...