<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. [Lync]lync同步通讯簿

    概述 在客户现场部署lync的时候,突然发现新安装的lync客户端,搜索联系人功能无法使用,而将lync客户端安装后,隔一段时间后,又可以查询了,发现可能是数据没有同步的原因. 解决方案 客户端地址簿 ...

  2. 纯JS操作获取桌面路径方法

    //active 控件获取当前用户的桌面的路径的方法 var wsh = new ActiveXObject("wscript.shell"); listall(wsh.Speci ...

  3. JS中的Math.pow(a,b)方法

    定义和用法 pow() 方法可返回 x 的 y 次幂的值. 语法 Math.pow(x,y) 参数 描述 x 必需.底数.必须是数字. y 必需.幂数.必须是数字. 返回值 x 的 y 次幂. 说明 ...

  4. 定期访问WebLogic Server返回状态的脚本

    在运维过程中,经常要获悉WebLogic Server的状态以便于主动的维护,本文通过weblogic WLST脚本初步设计了一下 脚本大概为2个,一是WLST的py脚本,getStates.py c ...

  5. redis基本命令,配置参数

    https://www.w3cschool.cn/redis/redis-pub-sub.html redis-server --maxclients 100000 客户端命令CLIENT LIST ...

  6. SQLSERVER调用DLL程序

    在SQL Server中调用dll分为两个步骤 1.创建一个dll文件(dll文件分成3种类型,讲其中一种) 2.把dll文件放进SQL Server的程序集中.然后定义一个Function,就可以通 ...

  7. 【java】为数组全部元素赋同样的值 以及 数组之间的复制

    为数组全部元素赋同样的值 : boolean[] resArray=new boolean[100]; Arrays.fill(resArray, true); 数组之间的复制: System.arr ...

  8. Java ActiveMQ队列模式案例

    创建Eclipse项目并运行 创建java project:ActiveMQ-5.14,新建lib文件夹 打开apache-activemq-5.14.0-bin\apache-activemq-5. ...

  9. 开启GodMode

    上帝模式的开启方法:首先你可以在任何地方创建一个新文件夹,这个操作对于几乎所有电脑用户来说都非常简单,然后重要的是,将这个新文件夹重命名为 “GodMode.{ED7BA470-8E54-465E-8 ...

  10. 序列化和反序列化Java 8的时间/日期类

    序列化 假如有 Clock 类: public class Clock { private LocalDate localDate; private LocalTime localTime; priv ...