1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="wyf">
  9.     <script src="jquery-2.1.1.js" type="text/javascript"></script>
  10.     <script type="text/javascript">
  11.         $(document).ready(function(){
  12.             //定义一个控制器，负责将用户操作映射到模型上。
  13.             var dataController = {
  14.                 start : function(){
  15.                     this.view.start();
  16.                 },
  17.                 set : function(name){
  18.                     this.model.setName(name);
  19.                 }
  20.             };
  21.             //定义一个数据模型(负责数据的存储及查询)
  22.             dataController.model = {
  23.                 nameModel : {
  24.                     "wyf" : "Java",
  25.                     "zz" : "CSharp",
  26.                     "zq" : "Javascript"
  27.                 },
  28.                 name : null,
  29.                 //数据模型负责业务逻辑和数据存储
  30.                 setName : function(name){
  31.                     this.name = this.nameModel[name] ? name : null;
  32.                     this.onChange();
  33.                 },
  34.                 //通知数据同步更新
  35.                 onChange : function(){
  36.                     dataController.view.update();
  37.                 },
  38.                 //相应视图对当前状态的查询
  39.                 getResult : function(){
  40.                     return this.name ? this.nameModel[this.name] + this.name : "错误";
  41.                 }
  42.             };
  43.             //定义视图(视图专门管理页面上发生的事件等)
  44.             dataController.view = {
  45.                 //用户触发change事件
  46.                 start : function(){
  47.                     //原生添加事件
  48.                     //var selectNode = document.getElementById("selectName");
  49.                     //selectNode.addEventListener("change", this.onChange, false);
  50.                     //jquery添加事件
  51.                     $("#selectName").change(this.onChange);
  52.                 },
  53.                 onChange : function(){
  54.                     //原生Javascript获取select选中项值
  55.                     //var selectNode = document.getElementById("selectName");
  56.                     //var index = selectNode.selectedIndex;// selectedIndex代表的是你所选中项的index
  57.                     //dataController.set(selectNode.options[index].value);
  58.                     //Jquery获取select选中项的值
  59.                     dataController.set($("#selectName").val());
  60.                 },
  61.                 update : function(){
  62.                     $('#divResult').html(dataController.model.getResult());
  63.                 }
  64.             };
  65.             dataController.start();
  66.         });
  67.     </script>
  68. </head>
  69. <body>
  70.     <select id="selectName">
  71.         <option value="wyf">哈哈哈</option>
  72.         <option value="zz">嘻嘻嘻</option>
  73.         <option value="zq">嘿嘿嘿</option>
  74.     </select>
  75.     <div id="divResult"></div>
  76. </body>
  77. </html>

使用JavaScript实现表现和数据分离的更多相关文章

  1. 【web前端面试题整理07】我不理解表现与数据分离。。。

    拜师传说 今天老夫拜师了,老夫有幸认识一个JS高手,在此推荐其博客,悄悄告诉你,我拜他为师了,他承诺我只收我一个男弟子..... 师尊刚注册的账号,现在博客数量还不多,但是后面点会有干货哦,值得期待. ...

  2. 表现与数据分离；前台MVC

    无意间看到一个web前端招聘要求:表现与数据分离 这名词对我非常陌生,我就去百度了下 由于有各种莫名其妙的需求,所以才会出现我们前端MVC这样的莫名其妙的东西... 我们的html就是model,我们 ...

  3. mvc中的表现和数据分离怎么理解？

    使用过 JavaScript框架(如 AngularJS, Backbone)的人都很熟悉在UI(用户界面,前端)中mvc的工作机理.这些框架实现了MVC,使得在一个单页面中实现根据需要变化视图时更加 ...

  4. Appium+python自动化（三十）- 实现代码与数据分离 - 数据配置-yaml（超详解）

    简介 本篇文章主要介绍了python中yaml配置文件模块的使用让其完成数据和代码的分离,宏哥觉得挺不错的,于是就义无反顾地分享给大家,也给大家做个参考.一起跟随宏哥过来看看吧. 思考问题 前面我们配 ...

  5. Libscore – 收集 JavaScript 库的使用数据

    Libscore 扫描网络上成千上万的网站,收集统计 JavaScript 库的使用数据.在搜索框中,输入关键词,例如 jQuery, Modernizr, $.ui 或者 $.fn.fancybox ...

  6. Robot Framework--05 案例设计之流程与数据分离

    转自:http://blog.csdn.net/tulituqi/article/details/7651049 这一讲主要说一下案例设计了.还记得我们前面做的case么?先打开浏览器访问百度,输入关 ...

  7. IOS第七天(2:UiTableView 加上数据分离)

    ****加上数据分离 #import "HMViewController.h" #import "HMStudent.h" @interface HMViewC ...

  8. 如何使用JavaScript和正则表达式进行数据验证

    利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作,下面与大家分享下如何使用JavaScript和正则表达式进行数据验证,感兴趣的朋友可以参考下哈 数据验证 ...

  9. RobotFramework 数据分离

    RobotFramework 数据分离分为三种 1. Run 添加参数 2. 外部的Python文件 3. 读取Excel Run 添加参数 (适用于jenkins) 使用-v 参数名:参数值 使用外 ...

随机推荐

  1. 游戏AI技术 2

    [Unity3D人工智能编程精粹 2] 1.跟随领队行为. 用靠近(Seek)或追逐(Pursuit)实现跟随领队行为并不好.在Seek中,AI角色会被推向领队,最终与领队占据相同位置.而Pursui ...

  2. DIV实现垂直居中的几种方法

    说道垂直居中,我们首先想到的是vertical-align属性,但是许多时候该属性并不起作用.例如,下面的样式并不能达到内容垂直居中显示 div { width:200px; height:300px ...

  3. eclipse环境的搭建(转载)

    原文地址:http://hanqunfeng.iteye.com/blog/982182 此文章发表于2011年到2012年 使用eclipse真的有年头了,相信java程序员没有不知道它的,最近在给 ...

  4. redis 4 集群重启与数据导入

    1.redis 4 平时启用aof db与每天的完整备份. 2.集群状态检查 cluster info 检查集群状态 cluster nodes 检查节点状态 redis-cli -c -p 7000 ...

  5. vue中使用全局函数

    方法一: 在mian.js中写入函数: Vue.prototype.bb = function () {        alert('OK'); } 然后在任何组件中都可以调用: this.bb() ...

  6. 准备面试-DFT

    问题:面试DFT岗位的准备工作 1.在EETOP上搜索DFT看到的一些要求 1.要弄明白DCSCAN.ACSCAN.MBIST.边扫等原理, 2.要会利用相应的Synopsys或Mentor公司工具! ...

  7. TOJ 3973 Maze Again && TOJ 3128 简单版贪吃蛇

    TOJ3973传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=3973 时间限制(普通 ...

  8. python 中 类型转换 bytes

    https://www.cnblogs.com/sesshoumaru/p/5980090.html

  9. f5 SNAT

    request过程: 1.真实源地址(3.3.3.3)将数据包发给f5虚拟的vs地址(1.1.1.5:80): 2.f5将真实源地址(3.3.3.3)转换成SNAT地址(1.1.1.100),并将vs ...

  10. JavaFX

    [AWT-SWING-JAVA FX] 多平台.多应用的现有通用类 [inner class] (member class)inside another class, outside any meth ...