您的位置: 首页 > 技术文档 > 网页制作 > 从一个项目中来看三层架构
跨浏览器的本地存储 Ⅰ 回到列表 标记语言——CSS布局
 从一个项目中来看三层架构

作者:xcgfly2sky 时间: 2008-08-06 文档类型:转载 来自:

这个项目到一开始的kickoff到现在,持续了很长的一段时间,现在差不多也接近了尾声,所以要好好做个总结,下面不会设计到太多技术层面上的东西,而是从前端构架这个角度来看待这个项目。

这里所说的三层就是:表示层,业务逻辑层和数据层。对于数据层,只需要知道后台返回过来是什么样格式的数据(这次约定是一段json格式的数据),更多的精力是放在业务逻辑层和表示层上面,我主要负责表示层,朱哥哥主要负责业务逻辑层,分工合作,也算是一种尝试吧,取得的效果还不错。那么不多说废话了,下面看具体实现(在命名上做了一定的改动,跟实际有点出入,只需关注其中的构架思想):

第一步:先看下最后的成果:

在页面只需引入一个合并好的js:merge.js,然后在实例化这个方法
var post = new Post(url,successFn,failureFn,false)这个就是最后三层结合的体现
url 就是获得数据的源地址,属于数据层
Post数据处理类,是属于业务逻辑层
successFn,faileFn 数据请求成功和失败调用的方法,是属于表示层

第二步:看下merge.js,它是一个js合并后的文件,考虑减少HTTP请求,在这里做了合并,merge.js的文件结构如下:
merge.js

业务逻辑层

  • config.js(配置文件,包含一些参数配置以及一些渲染时用到的一些公有方法
  • render0.js(渲染的方法,这里针对不同的页面,可以有多种不同的方法,但是前面三个文件是必须的)

表示层

config.js:

var config = {
"entrance":"http://www.alibaba.com.cn/",
"noimg":{
"x100":"http://img.china.alibaba.com/images/cn/p4p/nopic_100x100.gif",
"x150":http://img.china.alibaba.com/images/cn/market/trade/list/
070423/nopic150.gif
},
.......
}
function doRed(str,key){...}//加红
function doSubstring(str,maxLength,type)//字符串截取
function doFitlerData(d){...}//数据过滤
.......

render0.js:

//渲染类
var Render = function(id,num){
//多种渲染方法
this.doRenderHeader=function(){......};
this.doRenderFooter=function(){.......};
this.doRenderImage=function(imgurl,url,title, item){......};
this.doRenderTitle=function(title, url,key,item){......};
this.doRenderItem=function(item, idx){
调用this.doRenderImage(),this.doRenderTitle()
};
this.doRenderBody=function(rets){
调用this.doRenderItem()
};
......
this.doRender=function(rets){
var html = [];
html[html.length] = this.doRenderHeader();
html[html.length] = this.doRenderBody(rets);
html[html.length] = this.doRenderFooter();
if(this.root)this.root.innerHTML = html.join('');
};
}
//数据请求时成功调用的方法
function successFn(o){
try{
var data = doFitlerData(o); //调用config.js里的方法
//实例化Render
var defaultRender = new Render("test",3);
defaultRender.doRender(data);
}catch(e){
}
}
//数据请求时调用失败的方法
function failureFn(){
alert("Failure");
}

这样的三层构架带来什么好处,首先是分工非常明确,我只要负责页面渲染(表示层)这一块,其他的我可以不去考虑。其次,程序与程序间的耦合度低了,相对程序本身的内聚度高了,业务逻辑层和表示层只有一个数据接口,那就是从业务逻辑层返回给表示层是什么样的数据以及数据的格式,从业务逻辑层这个层面考虑,里面的程序如何修改,只要返回的数据不变,对表示层是一点都没有影响,同理,针对不同的页面,表示层可以写很多渲染类,对业务逻辑层也是没有影响的,同时提起公有的方法,放到config.js中,提高了代码的重用性。最后,程序有较高的扩展性和可维护性。我想这些都是三层架构带给我们的好处吧。就讲到这吧,以上是对这次项目从构架的角度做一个总结,对三层架构还需要再去深入研究,个人觉得这个现在还是比较普及的,可以用这个思想来构架一个项目,一个系统。

本文链接:http://www.blueidea.com/tech/web/2008/6066.asp 

出处:
责任编辑:bluehearts

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
用JS实现一个页面两份样式表
JavaScript创建可维护幻灯片效果
悟透JavaScript
Js的MessageBox
Javascript的匿名函数
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2