使用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 参数名:参数值 使用外 ...
随机推荐
- ORACLE 把不是SYS用户下的所有JOB删除掉
BEGIN FOR job_id in(select job,log_user,priv_user,schema_user from dba_jobs) LOOP IF(job_id.lo ...
- Jmeter 录制脚本(一)
第一种方法:使用Badboy来录制脚本 1. 启动Badboy, 工具栏上的红色圆形按钮是默认启动的,在地址栏直接输入被测试WEB项目的地址,然后点击右边的箭头. 2.录制完成后,点击工具栏上的黑色按 ...
- [剑指Offer]27-二叉树的镜像
题目链接 https://www.nowcoder.com/practice/564f4c26aa584921bc75623e48ca3011?tpId=13&tqId=11171&t ...
- c#: Noto Sans字体如何支持韩文
1.源起: VCU10项目,使用了Noto Sans字体,的确漂亮.但验证在win7下,其显示韩文为乱码,颇为头痛. 其界面显示如图: 度娘之,得Noto Sans又有CJK字体,顾名思义,其为支持中 ...
- java 基础之--反射详解
java 反射绝大部分都位于 java.lang.reflect package 中:常用的类就是: 1.class类:代表一个类 2.field类:代表类的成员变量 3.method:代表类的方法 ...
- java_5.1 for循环
1.求1-100的和 public static void main(String[] args) { int sum = 0; for (int i = 0; i <= 100 ; i++) ...
- Activity横竖屏切换时 一些数据的保存
private VideoView videoView; 02.private static final String VIDEO_PATH = Environment 03. .getExterna ...
- 错误：“Cannot load JDBC driver class 'com.mysql.jdbc.Driver”的解决方法
“Cannot load JDBC driver class 'com.mysql.jdbc.Driver ” 表示没有JDBC连接MySql的驱动包,因此需要手动添加驱动包到WEB-INF目录下的l ...
- 安装doxygen（一个自动文档生成工具）+Graphviz图形可视化软件
参考文章: http://www.fmddlmyy.cn/text21.html http://www.cnblogs.com/duguguiyu/archive/2008/06/29/1231852 ...
- Socket（转自 阿里云）
摘要:Socket-C/S Socket又称"套接字",应用程序 通常通过"套接字"向网络发出请求或者应答网络请求,使主机间或者一台计算机上的进程间可以通讯. ...