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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
User Scripts: Video Download by User Scripts
May 14 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
仿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
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
vuex 的简单使用
2018/03/22 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Python-for循环的内部机制
2020/06/12 Python
区分python中的进程与线程
2020/08/13 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
爱心活动计划书
2014/04/26 职场文书
给校长的建议书300字
2014/05/16 职场文书
体育个人工作总结
2015/02/09 职场文书
写给女朋友的保证书
2015/05/09 职场文书
电影雨中的树观后感
2015/06/15 职场文书
讲座新闻稿
2015/07/18 职场文书
银行求职信怎么写
2019/06/20 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL