<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. Javascript常见设计模式解析

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性.毫无疑问,设计模式于己 ...

  2. ZooKeeper本身是一个分布式应用程序,为写入分布式应用程序提供服务。

    ZooKeeper本身是一个分布式应用程序,为写入分布式应用程序提供服务. 作为ZooKeeper架构的一部分的每个组件在下表中进行了说明. 部分 描述 Client(客户端) 客户端,我们的分布式应 ...

  3. Jenkins持续集成实战总结

    原文:https://my.oschina.net/CandyDesire/blog/341331#comment-list 持续集成 什么是持续集成 随着软件开发复杂度的不断提高,团队开发成员间如何 ...

  4. 【FTP】java FTPClient 文件上传内容为空,文件大小为0

    问题:如题所述,使用FTPClient上传至FTP服务器, 表现如下:①文件大小为0 ②上传很小的文件,但是要花费很长的时间,20K要花费2分钟甚至更久 ③没有任何的报错,没有任何的乱码 解决方法: ...

  5. win10 关键错误开始菜单和cortana无法工作 的问题

    win10点击 '此电脑' 反键选择 管理 -服务和应用程序-服务 找到 User Manager 双击点击启动就行了 把 UserManager服务设为自动启动解决了

  6. 各版本IIS下ASP.net请求处理过程区别

      ASP.NET是一个非常强大的构建Web应用的平台,它提供了极大的灵活性和能力以致于可以用它来构建所有类型的Web应用. 绝大多数的人只熟悉高层的框架如: WebForms 和 WebServic ...

  7. D3.js系列——动态效果和Update、Enter、Exit的理解

    一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...

  8. 绝对让你理解Android中的Context

    这个问题是StackOverFlow上面一个热门的问题What is Context in Android? 整理这篇文章的目的是Context确实是一个非常抽象的东西.我们在项目中随手都会用到它,但 ...

  9. EffectiveJava(25)泛型和数组的使用取舍及规范

    泛型和数组 泛型:1.泛型是不可变的.对于任意两个不同类型Type1,type2;List既不是List的子类型,也不是List的超类型 2.泛型是通过擦除来实现的.故泛型只在编译时强化它们的信息,并 ...

  10. Python——Baseequestandler class (Interesting found in python‘s document)

    class BaseHTTPRequestHandler(socketserver.StreamRequestHandler) HTTP request handler base class. |   ...