<!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. mysql 在登陆的时候出现error 1045 (28000): 错误解决办法

    错误显示:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 解决方案: 1.找到配 ...

  2. CSS中的通用字体

    往往设计师在设计时一厢情愿地去思考问题,那样会带来很多潜在的麻烦.事实上你可以为网页设计任意字体,包括艺术字体.也许你的计算机中已经安装了很多字体,但是不能够保证所有的浏览者都已经安装了相同的字体,因 ...

  3. hibernate mysql视图操作

    hibernate对视图操作,首先建立数据库视图 视图v_invite: create view pintu.v_invite asselect cp.user_id as be_user_id,ca ...

  4. 二、Adapter 适配器

    适配器:继承适配与委托适配 需求:Banner 可以输出强电流380v.弱电流12v,但是不能被直接使用.通过别的方式,介间的使用banner? 委托类图: 代码清单: 需要隐藏的功能类: publi ...

  5. numpy--深度学习中的线代基础

    参考自 微信公众号--深度学习世界(http://mp.weixin.qq.com/s?__biz=MzI4MDMwMDM3NA==&mid=2247484616&idx=1& ...

  6. 东方超环（EAST）世界纪录

    2017年7月3日夜晚,国家大科学装置——世界上第一个全超导托卡马克(EAST)东方超环再传捷报:实现了稳定的101.2秒稳态长脉冲高约束等离子体运行,创造了新的世界纪录.这标志着EAST成为了世界上 ...

  7. VS2013 error C2556: “const int &Array<int>::operator [](int)”: 重载函数与“int &Array<int>::operator [](int)”只是在返回类型上不同

    1,VS2013 错误 1 error C2556: “const int &Array<int>::operator [](int)”: 重载函数与“int &Array ...

  8. Shc 应用

    1.说明 shc是一个加密shell脚本的工具, 它的作用是把shell脚本转换为一个可执行的二进制文件 2.安装 下载 # mget  http://www.datsi.fi.upm.es/~fro ...

  9. linux 切割文件的命令

    Head -1000 access.2016.log >> 10000_access.log

  10. DialogFragment 对话框 碎片

    package com.example.m_evolution; import android.app.Dialog; import android.app.DialogFragment; impor ...