<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. Scut游戏服务器免费开源框架--快速开发(3)

    Scut快速开发(3) 1     开发环境 Scut Lib版本:5.2.3.2 需要安装的软件 a)        IIS和消息队列(MSMQ) b)        数据库,Sql2005以上版本 ...

  2. JVM监测分析JConsole

    一.基本操作   启动界面 1.JConsole是什么 从Java 5开始引入了JConsole.JConsole是一个内置Java性能分析器,可以从命令行或在GUI shell中运行.您可以轻松地使 ...

  3. 【ztree系列——图标的修改】Bootstrap风格的ztree

    前段时间项目中需要用树形结构,在选取的时候参考了很多插件,经过很多尝试,最后又回归到了ztree上.以前用的界面框架是EasyUI,但是它的树结构在实现起来有点复杂,并且功能不是特别完善.dtree在 ...

  4. python合并多个csv文件并去重

    #coding=utf-8 import os import pandas as pd import glob def hebing(): csv_list = glob.glob('*.csv') ...

  5. 我的mac OSX bash_profile文件

    A typical install of OS X won't create a .bash_profile for you. When you want to run functions from ...

  6. 传统项目目录结构下maven+junit+junitReport

    <build> <defaultGoal>compile</defaultGoal> <sourceDirectory>${basedir}/src&l ...

  7. PostgreSQL学习资料

    我的PostgreSQL学习笔记:http://note.youdao.com/share/?id=2e882717fc3850be9af503fcc0dfe7d0&type=notebook ...

  8. Lucene分词器

    Lucene分析器的基类为Analyzer,Analyzer包含两个核心组件:Tokenizer和 TokenFilter.自定义分析器必须实现Analyzer类的抽象方法createComponen ...

  9. Selenium webdriver Java 高级应用

    对于这一段还蛮有感慨的,只想说,代码还是需要自己去敲的. 1. 改变用户代理 import org.junit.AfterClass; import org.junit.BeforeClass; im ...

  10. Eclipse 一直Building Workspace 的解决办法

    Eclipse 一直不停 building workspace完美解决总结 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭  3.maven下载lib挂起 等.. 二.解决总结 (1).解决 ...