码迷,mamicode.com
首页 > 编程语言 > 详细

使用Javascript实现表现和数据分离

时间:2014-10-28 17:29:58      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   io   color   ar   使用   java   sp   

<!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">wyf</option>
        <option value="zz">zz</option>
        <option value="zq">zq</option>
    </select>
    <div id="divResult"></div>
</body>
</html>

 

使用Javascript实现表现和数据分离

标签:des   style   blog   io   color   ar   使用   java   sp   

原文地址:http://www.cnblogs.com/wyf-gis/p/4057180.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!