<!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. fs.watchFile

    [fs.watchFile] fs.watchFile(filename[, options], listener) Watch for changes on filename. The callba ...

  2. 物料没加DUMMY

    会加入DUMMY的表 IN_ITEM,IN_ITEM_SITE,IN_SALES_ORDER 加入DUMMY的存储过程名为SAP_MATERIAL_SO. FP_CHANGE_MO_ROUTING的第 ...

  3. Jmeter：性能测试指南（转）

    http://yukinami.github.io/2015/11/26/%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95%E6%8C%87%E5%8D%97/ 性能测试指南 ...

  4. java 连接sqlserver数据库

    1.ResultSet executeQuery(String sql):执行某条查询语句并返回结果public static void main(String[] args) throws Exce ...

  5. .resources文件转为可视化.resx文件

    ResGen.exe启动闪退.--方法不对 参考:http://www.opdown.com/soft/101205.html 在cmd中启动ResGen.exe. 打开cmd:输入 C:\Windo ...

  6. leetcode 栈和队列类型题

    1,Valid Parentheses bool isVaild1(string& s) { // 直接列举,不易扩展 stack<char> stk; ; i < s.le ...

  7. Serializers序列化组件

    Django的序列化方法 .values 序列化结果 class BooksView(View): def get(self, request): book_list = Book.objects.v ...

  8. oracle 中从某天到某天一天一次执行某个函数

    DECLAREv_days INTEGER;v_start VARCHAR2(10);v_end VARCHAR2(10);v_3 INTEGER;v_enddays date;begin v_sta ...

  9. stable

    stable - 必应词典 美['steɪb(ə)l]英['steɪb(ə)l] n.马厩:马房:(养马作特定用途的)养马场 adj.稳定的:稳固的:牢固的:稳重的 v.使(马)入厩:把(马)拴在马厩 ...

  10. SDK和API

    软件开发工具包(缩写:SDK.外语全称:Software Development Kit)一般都是一些软件工程师为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. 笔记:开 ...