使用JavaScript实现表现和数据分离
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="wyf">
<script src="jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//定义一个控制器，负责将用户操作映射到模型上。
var dataController = {
start : function(){
this.view.start();
},
set : function(name){
this.model.setName(name);
}
};
//定义一个数据模型(负责数据的存储及查询)
dataController.model = {
nameModel : {
"wyf" : "Java",
"zz" : "CSharp",
"zq" : "Javascript"
},
name : null,
//数据模型负责业务逻辑和数据存储
setName : function(name){
this.name = this.nameModel[name] ? name : null;
this.onChange();
},
//通知数据同步更新
onChange : function(){
dataController.view.update();
},
//相应视图对当前状态的查询
getResult : function(){
return this.name ? this.nameModel[this.name] + this.name : "错误";
}
};
//定义视图(视图专门管理页面上发生的事件等)
dataController.view = {
//用户触发change事件
start : function(){
//原生添加事件
//var selectNode = document.getElementById("selectName");
//selectNode.addEventListener("change", this.onChange, false);
//jquery添加事件
$("#selectName").change(this.onChange);
},
onChange : function(){
//原生Javascript获取select选中项值
//var selectNode = document.getElementById("selectName");
//var index = selectNode.selectedIndex;// selectedIndex代表的是你所选中项的index
//dataController.set(selectNode.options[index].value);
//Jquery获取select选中项的值
dataController.set($("#selectName").val());
},
update : function(){
$('#divResult').html(dataController.model.getResult());
}
};
dataController.start();
});
</script>
</head>
<body>
<select id="selectName">
<option value="wyf">哈哈哈</option>
<option value="zz">嘻嘻嘻</option>
<option value="zq">嘿嘿嘿</option>
</select>
<div id="divResult"></div>
</body>
</html>
使用JavaScript实现表现和数据分离的更多相关文章
- 【web前端面试题整理07】我不理解表现与数据分离。。。
拜师传说 今天老夫拜师了,老夫有幸认识一个JS高手,在此推荐其博客,悄悄告诉你,我拜他为师了,他承诺我只收我一个男弟子..... 师尊刚注册的账号,现在博客数量还不多,但是后面点会有干货哦,值得期待. ...
- 表现与数据分离；前台MVC
无意间看到一个web前端招聘要求:表现与数据分离 这名词对我非常陌生,我就去百度了下 由于有各种莫名其妙的需求,所以才会出现我们前端MVC这样的莫名其妙的东西... 我们的html就是model,我们 ...
- mvc中的表现和数据分离怎么理解？
使用过 JavaScript框架(如 AngularJS, Backbone)的人都很熟悉在UI(用户界面,前端)中mvc的工作机理.这些框架实现了MVC,使得在一个单页面中实现根据需要变化视图时更加 ...
- Appium+python自动化（三十）- 实现代码与数据分离 - 数据配置-yaml（超详解）
简介 本篇文章主要介绍了python中yaml配置文件模块的使用让其完成数据和代码的分离,宏哥觉得挺不错的,于是就义无反顾地分享给大家,也给大家做个参考.一起跟随宏哥过来看看吧. 思考问题 前面我们配 ...
- Libscore – 收集 JavaScript 库的使用数据
Libscore 扫描网络上成千上万的网站,收集统计 JavaScript 库的使用数据.在搜索框中,输入关键词,例如 jQuery, Modernizr, $.ui 或者 $.fn.fancybox ...
- Robot Framework--05 案例设计之流程与数据分离
转自:http://blog.csdn.net/tulituqi/article/details/7651049 这一讲主要说一下案例设计了.还记得我们前面做的case么?先打开浏览器访问百度,输入关 ...
- IOS第七天(2:UiTableView 加上数据分离)
****加上数据分离 #import "HMViewController.h" #import "HMStudent.h" @interface HMViewC ...
- 如何使用JavaScript和正则表达式进行数据验证
利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作,下面与大家分享下如何使用JavaScript和正则表达式进行数据验证,感兴趣的朋友可以参考下哈 数据验证 ...
- RobotFramework 数据分离
RobotFramework 数据分离分为三种 1. Run 添加参数 2. 外部的Python文件 3. 读取Excel Run 添加参数 (适用于jenkins) 使用-v 参数名:参数值 使用外 ...
随机推荐
- JMeter（二十二）与其它工具对比（转载）
转载自 http://www.cnblogs.com/yangxia-test JMeter工具的扩展性非常好. JMeter工具是开源的.开源不仅仅意味着免费,更重要的是意味着用户可以通过开放的源代 ...
- JMeter学习（十八）JMeter处理Cookie与Session（转载）
转载自 http://www.cnblogs.com/yangxia-test 有些网站保存信息是使用Cookie,有些则是使用Session.对于这两种方式,JMeter都给予一定的支持. 1.Co ...
- StringBuffer类和String类(原文地址 : http://www.cnblogs.com/springcsc/archive/2009/12/03/1616330.html)
StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...
- 《深入理解java虚拟机》笔记
二.java内存区域与内存溢出异常 0.在内存管理领域,java与c/c++不同的是,在java虚拟机自动内存管理机制下,java不需要手动去为对象写配对的free内存的代码,不容易出现内存泄漏和内存 ...
- 手机端用swiper组件 轮播图设置后右侧出现空白 及 部分手机浏览器打开网页空白
我的方法是设置内容css overflow:hidden;width:100%; ok. 之前搜到一个方法也可以,就是设置css height: auto;overflow-y: scroll; 但是 ...
- 165. Compare Version Numbers (String)
Compare two version numbers version1 and version2. If version1 > version2 return 1, if version1 & ...
- Codeforces Beta Round #29 (Div. 2, Codeforces format)
Codeforces Beta Round #29 (Div. 2, Codeforces format) http://codeforces.com/contest/29 A #include< ...
- java虚拟机的原理
所谓虚拟机,就是一台虚拟的机器.它是一款软件,用来执行一系列虚拟计算机指令,大体上虚拟机可以分为系统虚拟机和程序虚拟机,Visual Box .Vmare就属于系统虚拟机.他们完全是对物理计算机的仿真 ...
- ZOJ 1610 Count the Color(线段树区间更新)
描述Painting some colored segments on a line, some previously painted segments may be covered by some ...
- [leetcode]694. Number of Distinct Islands你究竟有几个异小岛？
Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...