使用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数据导出导入
总结了几种Oracle导入导出的命令方法,方便以后使用. 数据导出: 1. 将数据库test完全导出,用户名system 密码manager 导出到d:/daochu.dmp中 ...
- Ubantu和CentOS设置静态ip
Ubantu设置ip: 1.sudo vim /etc/NetworkManager/NetworkManager.conf 将false改成true 2.修改配置文件/etc/network/int ...
- oracle授予调用存储过程权限
参考 https://blog.csdn.net/h254532693/article/details/45364317 grant execute on PROCEDURENAME to USERN ...
- 十：python 对象类型详解六：文件
一:文件 1.简介:内置open 函数会创建一个python 文件对象,可以作为计算机上的一个文件链接.在调用open 之后,可以通过调用返回文件对象的方法来读写相关外部文件.文件对象只是常见文件处理 ...
- poj1942（求组合数）
题目链接:http://poj.org/problem?id=1942 题意:实际上这道题就是求C(n+m,n). 思路:n.m的范围在unsigned中,所以不能递推计算组合数,可以采用公式C(a, ...
- CentOS Netstat命令
语法 netstat(选项) 选项 -a或--all:显示所有连线中的Socket: -A<网络类型>或--<网络类型>:列出该网络类型连线中的相关地址: -c或--conti ...
- CentOS常用的文件操作命令总结
我可以说是linux操作新手,有些命令经常忘记,特别是对文件的某些操作,经常要翻阅之前的笔记,今天把之前在百度上整理的“CentOS常用的文件操作命令”转载到我的新博客上面,以供后面查阅! 博客后面还 ...
- TZOJ 数据结构期末历年题目
A.数据结构练习题――线性表操作 线性表的基本操作 1.在某个位置p插入val,复杂度O(p) 2.在某个位置p删除val,复杂度O(p) 3.查找某个位置p的值,复杂度O(p) 4.清除链表,复杂度 ...
- AngularJS——第8章 服务
第8章 服务 服务是一个对象或函数,对外提供特定的功能. 8.1 内建服务 1. $location是对原生Javascript中location对象属性和方法的封装. // $location内置服 ...
- elasticsearch命令
如果安装了x-pack插件,需要验证 curl -u username:passwd 1.查看所有index curl -XGET localhost:/_cat/indices?v 2.清理所有in ...