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 相关文章推荐
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python处理xml文件的方法小结
2017/05/02 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python怎么对数字进行过滤
2020/07/05 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
辅导员评语
2014/05/04 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
会议欢迎词
2015/01/23 职场文书
欠款起诉书范文
2015/05/19 职场文书
管辖权异议上诉状
2015/05/23 职场文书
拉贝日记观后感
2015/06/05 职场文书
实验室安全管理制度
2015/08/05 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书