<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. iis日志字段解析

    IIS日志字段 #Software: Microsoft Internet Information Services 7.5 #Version: 1.0 #Date: 2013-08-21 01:00 ...

  2. vscode 使用笔记

    https://code.visualstudio.com/docs/setup/setup-overview#_proxy-server-support 如果使用代理上网时,需要配置:   在 se ...

  3. Swift,循环及判断

    1.for循环(执行固定次数的操作) (1)基本数组循环 var a=[1,2,3] for value in a{ print(value) //1 2 3 } (2)自定义循环次数 for i i ...

  4. 性能测试之工具对比-ngrinder jmeter loadunner及ngrinder安装使用方法

    参考:https://blog.csdn.net/bear_w/article/details/78366078

  5. GyoiThon:基于机器学习的渗透测试工具

    简介 GyoiThon是一款基于机器学习的渗透测试工具. GyoiThon根据学习数据识别安装在Web服务器上的软件(操作系统,中间件,框架,CMS等).之后,GyoiThon为已识别的软件执行有效的 ...

  6. unity render pipeline

    post process v2 GUI temp8->TaregtPool0->temp8       tem8                      temp8->backbu ...

  7. MyBatis批量添加、修改和删除

    1.批量添加元素session.insert(String string,Object o) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  8. jbpm4(参数设置)

    1.processDefinition.getDescription() <process name="task_test_2" xmlns="http://jbp ...

  9. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面HMI自锁按钮和自复位按钮如何理解(Toggle variable Tap variable)

    我分别创建两个按钮,自锁和自复位,绑定到主程序的两个布尔值上去   自锁按钮是指点击一下为TRUE,再点击一下为FALSE,自复位按钮是指按下的时候为TRUE,松开的时候为FALSE(也可以勾选Tap ...

  10. CentOS系统使用yum安装配置MariaDB数据库

    http://www.server110.com/mariadb/201310/2670.html 1.在 /etc/yum.repos.d/ 下建立 MariaDB.repo,内容如下:[azure ...