构成
这是一个十分常见的微博列表页面,类似于新浪微博。上周末,在心无旁骛情况下,一共用了5个对象,产出400行代码,实践出一种代码组织模式。
使任务轻松完成的代码有4个方面的要素组成:
| 要素 |
组成 |
| 模型 |
Reply、Forward |
| 视图 |
CommentEditor、ReplyList、ForwardList |
| 模板 |
jQuery.tmpl |
| 异步任务 |
jQuery.Deferred |
[b]分部介绍[/b]
模型
模型只与数据有关,它能够产生、过滤、保存、验证数据,并且仅此而已。
如下例,留言模型在调用保存方法时,只接收JSON参数,并且只返回一个异步任务,实际处理时同步或异步的返回结果并不重要。
在此进行的验证的原因是,它是一个开放的对象,是与服务器交互的最后一道门槛。
另外,它本身也不处理验证失败的情况——由视图调用时选择性地处理,可能会弹出一个消息提示或直接忽略再进行重试。
[url=/${userid}]<p>${content}</p>\
<time pubdate>${nicetime(timestamp)}</time><a class="del" href="javascript:;">删除</a>\
</li>\
{{/each}}\
</ul>';
异步任务
Deferred Object 的直译是延迟对象,但是理解成异步任务更为恰当。异步任务能够消除多层嵌套的回调,让代码书写和阅读更为便利。
从上面的模型和视图的代码中可以明显地看出,使用了异步任务之后,代码变得更加平面化了。
$.Deferred 方法新建的是一个双向任务队列:成功回调函数队列和失败回调函数队列;任务的状态也分为两种:成功和失败,分别可以用isResolved或isRejected来检查任务的当前状态、用resolve或reject修改任务状态。
promise 方法返回任务的只读副本,此副本上不能修改任务状态。毫无疑问,模型应该始终只返回 promise 对象。(注:只读副本仍然可以再次调用 promise 方法再次返回只读副本)
在Reply.create方法中,能够更好地处理自定义的异步任务,而不是直接返回原生的ajax异步任务:
// var dfd = $.Deferred();
$.post('/ajax/blog/reply/create',data)
.success(function(json) {
if(json && json.ok){
dfd.resolve(json.list);
}else{
dfd.reject({message:json.message||'获取失败',type:'error'});
}
})
.fail(function() {
dfd.reject({message:'服务暂时不可用',type:'error'})
});
目的及结论
为什么拆散成这样?
收获:可维护性,清晰的API调用、消除二层以上的if语句、消除二层以上的回调语句、每个函数控制在二十行之内。
结果:没有过多的重复代码,所有的功能都被打包好了。