JavaScript中的View-Model使用介绍

2024-05-06 14:23:55

字体：大中小

来源：转载

供稿：网友

构成
这是一个十分常见的微博列表页面，类似于新浪微博。上周末，在心无旁骛情况下，一共用了5个对象，产出400行代码，实践出一种代码组织模式。

使任务轻松完成的代码有4个方面的要素组成：

要素	组成
模型	Reply、Forward
视图	CommentEditor、ReplyList、ForwardList
模板	jQuery.tmpl
异步任务	jQuery.Deferred

分部介绍
模型
模型只与数据有关，它能够产生、过滤、保存、验证数据，并且仅此而已。

如下例，留言模型在调用保存方法时，只接收JSON参数，并且只返回一个异步任务，实际处理时同步或异步的返回结果并不重要。
在此进行的验证的原因是，它是一个开放的对象，是与服务器交互的最后一道门槛。
另外，它本身也不处理验证失败的情况——由视图调用时选择性地处理，可能会弹出一个消息提示或直接忽略再进行重试。
代码如下:
// 留言模型
var Reply = {
cache : {},
// { sourceid : id,page_size : 10,page_num : 1 }
fetch : function(data) {
return $.post('/ajax/blog/reply/list',data||{}).success(function(resp) {
resp.ok && resp.list &&
$.each(resp.list,function(k,v) {
return Reply.cache[v.id] = v;
});
});
},
// filter('name','king')
filter : function(prop,val) {
return $.grep(this.cache,function(r){ return r[prop] === val });
},
// { content : '想说就说',sourceid : 1001 }
create : function(data) {
// promise
var dfd = $.Deferred(), now = $.now();
if( (now - this.create.timestamp)/1000 < 10 ){
dfd.reject({message:'您发表得太快了，休息一下吧',type:'warn'})
}else if(!data || !data.sourceid){
dfd.reject({message:'非法操作',type:'error'})
}else if(!data.content){
dfd.reject({message:'评论内容不能为空',type:'warn'})
}else{
this.create.timestamp = now;
dfd = $.post('/ajax/blog/reply/create',data);
}
return dfd.promise();
}
};
Reply.create.timestamp = Forward.create.timestamp = $.now() - 1e4;

视图
视图是浏览器页面上的可视部分，每个视图对象含有一个关联的 jQuery 对象作为属性(instance.$el)，类似于UI组件中的DOM容器。

视图还有两个一致的方法：

render 方法用于从模型获取数据，并且根据定义好的模板将数据渲染到HTML页面上。
activate 方法用于激活视图，同时绑定相关的DOM事件，所有事件至多委托到$el为止。
这个示例中，CommentEditor是父视图，ReplyList和ForwardList是互斥显示的两个子视图，父子视图之间相互保存引用。
代码如下:
// 回复列表视图
var ReplyList = function(options) {

上一篇：取得窗口大小兼容所有浏览器的js代码

下一篇：jQuery + Flex 通过拖拽方式动态改变图片的代码