说道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>