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