JavaScript中的View-Model使用介绍


Posted in Javascript onAugust 11, 2011

构成
这是一个十分常见的微博列表页面,类似于新浪微博。上周末,在心无旁骛情况下,一共用了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) { 
var opt = this.opt = $.extend({ 
el : '', 
parent : null 
},options||{}); this.parent = opt.parent; 
this.$el = $(opt.el); 
this.activate(); 
}; 
ReplyList.prototype = { 
render : function() { 
var self = this; 
Reply.fetch({ 
page_size : 10, page_num : 1, 
sourceid : self.parent.getBlogId() 
}) 
.done(function(data) { 
self.$el.html( self.$list = $.tmpl(tpl_reply_list,data) ); 
}); 
return self; 
}, 
activate : function() { 
this.$el.delegate('a.del',$.proxy(this.del,this)) 
} 
// ... 
} 
// 评论编辑器视图 
CommentEditor.prototype = { 
activate : function() { 
this.$el.delegate('a.save',$.proxy(this.save,this)) 
}, 
save : function() { 
var self = this, data = { content : self.getContent(),sourceid : self.getBlogId() }; 
var task_r = Reply.create(data); 
var task_f = Forward.create(data); 
// 转发、评论同时进行 
$.when(task_r,task_f).then(function(t1,t2) { 
// 保存成功,更新视图或关闭 
},function(data) { 
// 模型验证出错,或远程服务器错误 
Sys.info(data.message,data.type); 
}); 
return self; 
}, 
switchView : function(type) { 
// 切换子视图 
var view_opt = {el:this.$sublist.empty(),parent:this}; 
if(type === 'reply'){ 
$label.show(); 
this.$submit.val('评论'); 
this.sublist = new ReplyList(view_opt).render(); 
}else{ 
$label.hide(); 
this.$submit.val('转发'); 
this.sublist = new ForwardList(view_opt).render(); 
} 
} 
// ... 
}

模板
模板可以消除繁琐、丑陋的字符串拼接,它的作用是能够直接由js对象生成HTML片断。

模板中可以直接遍历对象,套用预定义的函数,来对一些数据进行格式化,比如时间函数nicetime:

// 回复列表模板 
var tpl_reply_list = '<ul class="ui-reply-list">\ 
{{each list}}\ 
<li data-id="${id}">\ 
<a class="name" href="/${userid}">${name}:</a>\ 
<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语句、消除二层以上的回调语句、每个函数控制在二十行之内。

结果:没有过多的重复代码,所有的功能都被打包好了。

Javascript 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
仿jQuery的siblings效果的js代码
Aug 09 #Javascript
html中table数据排序的js代码
Aug 09 #Javascript
最常用的12种设计模式小结
Aug 09 #Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 #Javascript
javascript 主动派发事件总结
Aug 09 #Javascript
JsDom 编程小结
Aug 09 #Javascript
IE 当eval遇上function的处理
Aug 09 #Javascript
You might like
php将数组存储为文本文件方法汇总
2015/10/28 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jquery 使用简明教程
2014/03/05 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
js实现分割上传大文件
2016/03/09 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
如何在python中实现随机选择
2019/11/02 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
幼儿生日活动方案
2014/08/27 职场文书
人代会简报
2015/07/21 职场文书