快速业务通道

mvc模式分离javascript开发

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-06
是抽象了直接与数据交互的过程。这些方法经常被增删改查的任务调用,比如:创建,读取,更新,删除等操作。

var Events = {
get: function (id) {
return this.data[id];
},
del: function (id) {
delete this.data[id];
AjaxRequest.send(’/events/delete/’ + id);
},
data:{
‘112′: { ‘name’: ‘Party time!’, ‘date’: ‘2009-10-31′ },
‘113′: { ‘name’: ‘Pressies!’, ‘date’: ‘2009-12-25′ }
}
metadata: {
‘name’: { ‘type’:''text’, ‘maxlength’:20 },
‘date’: { ‘type’:''date’, ‘between’:[''2008-01-01'',''2009-01-01''] }
}
}

我们需要一个方法去描述数据。所以我们增加这个metadata字段来描述数据的类型以及数据的限定条件。
上面这个增删改查的任务也在服务器端保存状态改变信息,在这个例子中,delete函数从本地的对象存储中删除了数据的登记之后就将删除对象的id通过ajax发送一个删除命令请求到服务器端,然后从服务器端删除。
在存储数据的时候,使用命名键值的方法,这是最快最有效率从对象中取回数据的方法。
这种方式通常和数据库主键一样。(上面得例子用了number类型的id)。对于一个事件日历来说,按照月份划分存储数据会更实用。这样做就不用遍历所有的事件去发现那个需要的在页面中渲染的事件了。你会发现这样做事最好的办法。

The View

在mvc模式中,view负责接收数据并且决定数据如何显示。view层可以用页面已存在的html,也可以从服务器端请求一个新的html组件, 还可以自己通过dom创建新的html元素。合并提供的数据以视图的形式显示给用户,有一点很重要,就是view层并不关心数据来自哪里,或者怎么获取 到,它只负责取走数据使用。

View.EventsDialog = function(CalendarEvent) {
var html = ‘

{name}

‘ +

{date}

‘;
html = html.replace(/\{[^\}]*\}/g, function(key){
return CalendarEvent[key.slice(1,-1)] || ”;
});
var el = document.getElementById(’eventshell’);
el.innerHTML = html;
}

var Events.data = {
‘112′: { ‘name’: ‘Party time!’, ‘date’: ‘2009-10-31′ },
‘113′: { ‘name’: ‘Pressies!’, ‘date’: ‘2009-12-25′ }
}

View.EventsDialog(Events.data[''112'']); // edits item 112

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号