<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. css的checkbox样式变化

    1.CSS body{font-family:'微软简行楷'} ul li{list-style:none; margin:10px;color:#4985d7;} .myCheck { displa ...

  2. Linux下获取本机IP地址的代码

    Linux下获取本机IP地址的代码,返回值即为互联网标准点分格式的字符串. #define ETH_NAME "eth0" //获得本机IP地址 char* GetLocalAdd ...

  3. windows server 2012将计算机图标添加到桌面(图文教程)(转)

    windows server 2012系统安装完以后桌面默认只有回收站一个图标,如何将window常用的图标(计算机.控制面板.网络.用户文件)的图标添加到桌面呢,下面为作者本人亲测.操作简单至极. ...

  4. 几个opengl立方体绘制案例

    VC6 下载 http://blog.csdn.net/bcbobo21cn/article/details/44200205 opengl环境配置 http://blog.csdn.net/bcbo ...

  5. Python——标准库 Sys模块

    ---------------------------------------------------------------------------------------------------- ...

  6. PgSql备份pg_dump与还原手记pg_restore(转)可以直接跳转至最后面的示例进行查看

    PgSql备份pg_dump与还原手记pg_restore(转) 可以直接跳转至最后面的示例进行查看 真没有想到,以前一直是PostgreSQL使用者,突然需要库移植又成了头一招了!原来它与mysql ...

  7. 访问vector元素方法的效率比较(转)

    LInux下: gcc 4.47,red hat6 #include<iostream> #include<vector> #include<time.h> usi ...

  8. (转)java 打印自身代码——真实世界不存在自指

    public class SelfPrint {      public static void main(String args[]) {          char s = 34;         ...

  9. struts上传文件 血案

    记录一个图片上传之后没有后缀 拓展名问题 平常我们查询数据都是  fileImage=fileImageService.getQuery();  让entity等于它 那么fileImage.getF ...

  10. NodeJS 安装cnpm命令行工具错误问题解决

    考虑问题从两个方面: 1.网速(网络太慢也是安装失败的一个原因) 2.系统用户权限(需要系统最开始使用的用管理员,新增的管理员安装会有问题) 报错问题记录于此: 实际上问题是:Windows_NT 6 ...