首页 > 代码库 > mvvm到底是个什么玩意

mvvm到底是个什么玩意

2024-07-07 03:54:22   236人阅读

说道mvvm, 这玩意出来也有些时间了, 也有很多类库, 如: avalon,knockoutjs, AugularJS等等, 当然这块我了解的比较晚, 之前对这玩意也不是很了解, 也只是用avalon做过一个小项目,  仅知道这货可以做数据驱动, 很方便, 上周听了同事的分享发现mvvm这货能做的事不仅仅只是数据驱动, 还有很多东西都可以做, 觉得非常有意思, 所以想到要写点东西, 讲了这么多废话, 下面准备了个简单的例子,

点击显示让提示语显示, 点击隐藏将提示语隐藏, 需求很简单, 我相信很多人拿到这个需求可能会这样写:

<div class="container">
    <h1>mvvm示例</h1>
    <div id="msg" class="row">hello world!</div>
    <div class="row">
        <input id="btnShow" type="button" value="显示" />
        <input id="btnHide" type="button" value="隐藏" />
    </div>        
</div>

 

    var MV = {
        init: function(){
            
            this.ui = {};
            this.ui.msg = $(‘#msg‘);
            this.ui.btnShow = $(‘#btnShow‘);
            this.ui.btnHide = $(‘#btnHide‘);
            
            this.regEvent();
        },
        regEvent: function(){
            var _this = this;
            
            this.ui.btnShow.click(function(){
                _this.show();
            });
            
            this.ui.btnHide.click(function(){
                _this.hide();
            });            
        },
        show: function(){
            this.ui.msg.show();
        },
        hide: function(){
            this.ui.msg.hide();
        }        
    };
    
    $(function(){
        MV.init();
    });

当然如果简单的需求这样写完全没有问题, 但是往往现实中的需求要远比这个例子复杂的多, 下面看看用mvvm是怎么做的

<div class="container">
    <h1>mvvm示例</h1>
    <div id="msg" class="row">hello world!</div>
    <div class="row">
        <input id="btnShow" type="button" value="显示" />
        <input id="btnHide" type="button" value="隐藏" />
    </div>    
    <div id="backboneMsg" class="row">hello backbone!</div>
    <div class="row">
        <input id="btnOpen" type="button" value="打开" />
        <input id="btnClose" type="button" value="关闭" />
    </div>    
</div>
    var ui = {};
        ui.msg = $(‘#backboneMsg‘);
        ui.btnOpen = $(‘#btnOpen‘);
        ui.btnClose = $(‘#btnClose‘);
        
    var Model = Backbone.Model.extend({
        status: true,
        initialize: function(){                
            this.initEvents();
        },
        initEvents: function(){
            var _this = this;
            this.bind(‘change‘, function(){
                if(this.hasChanged(‘status‘)){
                    if(_this.get(‘status‘)){
                        _this.show();
                    }else{
                        _this.hide();
                    }
                }
            });
        },
        show: function(){
            ui.msg.show();
        },
        hide: function(){
            ui.msg.hide();
        }
    });
    
    var model = new Model();
        ui.btnOpen.click(function(){
            model.set({status: true});
        });
    　　
        ui.btnClose.click(function(){
            model.set({status: false});
        });

从上面的代码我们可以看到, 按钮事件我们并没有直接去更改ui, 只是更改了model的数据, model监听了change事件,当有数据发生改变时, 会根据数据的值进行一些业务上的操作, 我们可以看到, 在这种情况完全可以让ui和数据分离(数据和ui解耦), 使你的代码业务, 逻辑更清晰, 更容易维护, 当然这只是个简单的例子, 后续会整理些比较复杂的例子,让大家能更清晰的看到mvvm的优点.

 

当真正理解了mvvm的核心思想,你会发觉写代码是件多么爽的事情, 文采不是很好, 写的有点乱, 下面奉上全部代码.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mvvm</title>
    <script type="text/javascript" src="../backnone/jquery.js"></script>
    <script type="text/javascript" src="../backnone/underscore.js"></script>
    <script type="text/javascript" src="../backnone/backbone-min.js"></script>
    <style type="text/css">
        body{padding: 0px; margin: 0px;}
        .container{width:960px; margin: 0 auto; padding: 10px 0px;}
        .row{padding: 10px;}
    </style>
</head>
<body>
<div class="container">
    <h1>mvvm示例</h1>
    <div id="msg" class="row">hello world!</div>
    <div class="row">
        <input id="btnShow" type="button" value="显示" />
        <input id="btnHide" type="button" value="隐藏" />
    </div>    
    <div id="backboneMsg" class="row">hello backbone!</div>
    <div class="row">
        <input id="btnOpen" type="button" value="打开" />
        <input id="btnClose" type="button" value="关闭" />
    </div>    
</div>
<script type="text/javascript">
    var MV = {
        init: function(){
            
            this.ui = {};
            this.ui.msg = $(‘#msg‘);
            this.ui.btnShow = $(‘#btnShow‘);
            this.ui.btnHide = $(‘#btnHide‘);
            
            this.regEvent();
        },
        regEvent: function(){
            var _this = this;
            
            this.ui.btnShow.click(function(){
                _this.show();
            });
            
            this.ui.btnHide.click(function(){
                _this.hide();
            });            
        },
        show: function(){
            this.ui.msg.show();
        },
        hide: function(){
            this.ui.msg.hide();
        }        
    };
    
    $(function(){
        MV.init();
    });
</script>
<script type="text/javascript">
    var ui = {};
        ui.msg = $(‘#backboneMsg‘);
        ui.btnOpen = $(‘#btnOpen‘);
        ui.btnClose = $(‘#btnClose‘);
        
    var Model = Backbone.Model.extend({
        status: true,
        initialize: function(){                
            this.initEvents();
        },
        initEvents: function(){
            var _this = this;
            this.bind(‘change‘, function(){
                if(this.hasChanged(‘status‘)){
                    if(_this.get(‘status‘)){
                        _this.show();
                    }else{
                        _this.hide();
                    }
                }
            });
        },
        show: function(){
            ui.msg.show();
        },
        hide: function(){
            ui.msg.hide();
        }
    });
    
    var model = new Model();
        ui.btnOpen.click(function(){
            model.set({status: true});
        });
    
        ui.btnClose.click(function(){
            model.set({status: false});
        });            
</script>
</body>
</html>

 

 

 

 


联系
我们