<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. sql server线程等待信息

    http://www.cnblogs.com/lyhabc/articles/3236984.html http://blog.csdn.net/isoleo/article/details/4547 ...

  2. VisualSVN设置提交时必须输入log信息

    在别人的基础上修改的: 自己在Windows上用VisualSVN搭了个服务器,默认提交代码是可以不填任何信息,这可不是我所期望的,于是找到了下面的解决方案: 在VisualSVN的管理控制台中可以设 ...

  3. PHP中使用XMLRPC

    PHP中简单使用XMLRPC,服务器端和客户端都为PHP代码实现. 这里使用的XML-RPC完整包括client和server的XML-RPC实现. 客户端和服务器端分别由 xmlrpc_client ...

  4. SpingMVC实现集合参数(Could not instantiate bean class [java.util.List])

    需求,要求批量新增或者修改一个List,在springMVC中是不支持下面代码的写法: @RequestMapping(value = "/update", method = Re ...

  5. zClip使用时ZeroClipboard生成的位置不对的问题

    zclip官网:http://steamdev.com/zclip 我之前在另外一篇博文里面写了一个解决生成的位置不对的问题,请参考:http://www.cnblogs.com/longshiyVi ...

  6. solr6.6 配置拼音分词

    参考:solr6.6 配置同义词 1.下载拼音分析包 下载地址:pinyin.zip 解压后放在core下面的lib文件夹下面: 2.修改managed-schema配置文件 <fieldTyp ...

  7. java源码阅读LinkedBlockingQueue

    1类签名与简介 public class LinkedBlockingQueue<E> extends AbstractQueue<E> implements Blocking ...

  8. webmagic 初始化 startRequests

    在spider类中有三个方法可以初始化startRequests.可以对这些地方进行扩展. /** * create a spider with pageProcessor. * * @param p ...

  9. TestNG+Jenkins+Maven参数化测试dubbo接口

    1.TestNG参数化测试用例: package com.tree.autotest.testcase.IUserBankSummaryService; import com.datatrees.fi ...

  10. java基础知识汇总4

    三.集合(collection.set.list.map) 一.定义: 集合是Java里面最经常使用的,也是最重要的一部分.可以用好集合和理解好集合对于做Java程序的开发拥有无比的优点. 容器:用来 ...