到底數據驅動是個什麼玩意

時間 2019-11-16

標籤到底數據驅動什麼玩意简体版

原文原文鏈接

說道mvvm, 這玩意出來也有些時間了, 也有不少類庫, 如: avalon,knockoutjs, AugularJS等等, 固然這塊我瞭解的比較晚, 以前對這玩意也不是很瞭解, 也只是用avalon作過一個小項目, 僅知道這貨能夠作數據驅動, 很方便, 上週聽了同事的分享發現mvvm這貨能作的事不單單只是數據驅動, 還有不少東西均可以作, 以爲很是有意思, 因此想到要寫點東西, 講了這麼多廢話, 下面準備了個簡單的例子,javascript

點擊顯示讓提示語顯示, 點擊隱藏將提示語隱藏, 需求很簡單, 我相信不少人拿到這個需求可能會這樣寫:css

<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是怎麼作的html

<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的優勢.java

當真正理解了mvvm的核心思想,你會發覺寫代碼是件多麼爽的事情, 文采不是很好, 寫的有點亂, 下面奉上所有代碼.jquery

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。