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 ...
随机推荐
- sql server线程等待信息
http://www.cnblogs.com/lyhabc/articles/3236984.html http://blog.csdn.net/isoleo/article/details/4547 ...
- VisualSVN设置提交时必须输入log信息
在别人的基础上修改的: 自己在Windows上用VisualSVN搭了个服务器,默认提交代码是可以不填任何信息,这可不是我所期望的,于是找到了下面的解决方案: 在VisualSVN的管理控制台中可以设 ...
- PHP中使用XMLRPC
PHP中简单使用XMLRPC,服务器端和客户端都为PHP代码实现. 这里使用的XML-RPC完整包括client和server的XML-RPC实现. 客户端和服务器端分别由 xmlrpc_client ...
- SpingMVC实现集合参数(Could not instantiate bean class [java.util.List])
需求,要求批量新增或者修改一个List,在springMVC中是不支持下面代码的写法: @RequestMapping(value = "/update", method = Re ...
- zClip使用时ZeroClipboard生成的位置不对的问题
zclip官网:http://steamdev.com/zclip 我之前在另外一篇博文里面写了一个解决生成的位置不对的问题,请参考:http://www.cnblogs.com/longshiyVi ...
- solr6.6 配置拼音分词
参考:solr6.6 配置同义词 1.下载拼音分析包 下载地址:pinyin.zip 解压后放在core下面的lib文件夹下面: 2.修改managed-schema配置文件 <fieldTyp ...
- java源码阅读LinkedBlockingQueue
1类签名与简介 public class LinkedBlockingQueue<E> extends AbstractQueue<E> implements Blocking ...
- webmagic 初始化 startRequests
在spider类中有三个方法可以初始化startRequests.可以对这些地方进行扩展. /** * create a spider with pageProcessor. * * @param p ...
- TestNG+Jenkins+Maven参数化测试dubbo接口
1.TestNG参数化测试用例: package com.tree.autotest.testcase.IUserBankSummaryService; import com.datatrees.fi ...
- java基础知识汇总4
三.集合(collection.set.list.map) 一.定义: 集合是Java里面最经常使用的,也是最重要的一部分.可以用好集合和理解好集合对于做Java程序的开发拥有无比的优点. 容器:用来 ...