使用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 参数名:参数值 使用外 ...
随机推荐
- mysql数据库备份shell
sip=xxx.xxx.xxx.xxx user=user passwd=passwd back_path=/home/xxxxx/mysqlbak data_name=data_name date= ...
- node 加载逻辑
[node 加载逻辑] require(X) from module at path Y . If X is a core module, a. return the core module b. S ...
- Spring设置动态定时任务
1.在Spring中经常会用到定时任务,一般会在业务方法上使用@Schedule(cron="定时执行规则"),无法实现从前台动态设置定时任务. 在java中固定频率的任务使用Sc ...
- 进制转换&数据类型（1）
一: 进制转换 在计算机中, 数据都是以0和1来表示的 进制: 进位制 十进制: 数字由0~9这10个数字来表示, 逢10进1位 0 1 2 3 4 5 6 7 8 9 10 二进制: 数字由0和1这 ...
- putty颜色调整
右键window窗口--Changing Setting--window--Colours: * Default Foreground: 255/255/255 * Default Backgroun ...
- Spring的一些资源
1.http://spring.io/ 2.http://projects.spring.io/spring-framework/
- PHP 在 Mac 的安装之路
半年前本以为有一些 Apache 和 PHP 的安装经验,今天在 Mac 上还是踩了很多坑. 坦诚地讲,这东西入门成本比 Node,Python 入门成本真的是大很多. Apache 的编译安装就是那 ...
- 安装python3 及virtual与virtualenvwrapper
安装python3 下载python源码包 网址:https://www.python.org/downloads/release/python-362/ 下载地址:https://www.pytho ...
- 文本工具 TextUtils 字符串
常用方法: isEmpty:判断字符串是否为空值 getTrimmedLength:获取字符串去除头尾空格之后的长度 isDigitsOnly:判断字符串是否全部由数字组成 ellipsize:如果字 ...
- 游戏行业的女性拥有强大的新盟友：Facebook
据外媒 TheNextWeb 报道,Facebook 本周宣布其新的游戏行业女性倡议,致力于鼓励更多的女性加入游戏行业.这家社交媒体公司专注于提供榜样和成功故事,而这实际上是一种令人愉快的方式.虽然游 ...