<!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实现表现和数据分离的更多相关文章

  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. Linux 学习总结（一）

    一.Linux系统有7个运行级别(runlevel) 运行级别0:系统停机状态,系统默认运行级别不能设为0,否则不能正常启动 运行级别1:单用户工作状态,root权限,用于系统维护,禁止远程登陆 运行 ...

  2. DataGridView中DataGridViewComboBoxColumn的一些相关应用(一)让其值改变时触发事件-转

    转自  https://maodaili.de/mao.php?u=a%2FMrbEvUE8PnCuc7FrhJi0Rqd3kmOBHPZUbcJ1c2hbJUK0RYWpAf4lhIOddItP%2 ...

  3. 纯css3棋盘图案背景以及45度斜纹背景

    css代码  .stripes {     height: 250px;     width: 375px;     float: left;          margin: 10px;      ...

  4. matlab读取excel里的数据并用imagesc画图

    把矩阵数据保存在excel里 比如文件为 a.xlsx 通过下面的程序读取 a=xlsread('\文件保存的目录\a.xlsx'); figure(1); imagesc(a) colormap(h ...

  5. Jasper打印示例

    import java.io.IOException;import java.util.ArrayList;import java.util.HashMap;import java.util.List ...

  6. iOS 编译部署路径

    <转> 在 OSX 上初次接触到这些变量,  做一个总结.在编译一个动态库比如 libfoo.dylib 的时候, 你需要指定 INSTALL_PATH. 也就是它的安装路径.一个可执行程 ...

  7. jsplumb流程器使用3--connector

    jsPlumb.getInstance内可以放一个对象 对象内可选地提供默认值:  connector:  连接器(直线--a straight line,  贝塞尔曲线--a Bezier curv ...

  8. Selenium + Python + Firefox

    按网上教程搭建好环境后,执行下面的代码出现了错误: 测试代码如下: from selenium import webdriver driver=webdriver.Firefox() driver.g ...

  9. solrj 测试连接 6.6.5solr集群

    我开始环境是 linux上是6.6.5  pom也是6.6.5 按照学习视频的demo,他用的是4点几的solr,我换成了6点几的,没有CloudSolrServer  只有CloudSolrClie ...

  10. sqlserver使用SQL语句创建数据库登录对象、数据库用户以及对为该用户赋予操作权限

    --创建登录名USE masterGO--PbMaster,密码123456CREATE LOGIN PbMaster with PASSWORD='1234GO --创建数据库用户USE E_Mar ...