RSS
热门关键字:  宸曦暗暗
当前位置 :| SEO>网页设计>

从一个项目中来看三层架构

来源: 时间:2008-09-11 Tag: 点击:

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

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

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

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

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

  • get.js(请求数据的基本方法)
  • deal.js(数据请求以及请求管理的方法集合,可以参考这篇文章”异步跨域请求的请求的实现”)

业务逻辑层

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

表示层

config.js:

varconfig={
"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
},
.......
}
functiondoRed(str,key){...}//加红
functiondoSubstring(str,maxLength,type)//字符串截取
functiondoFitlerData(d){...}//数据过滤
.......

render0.js:

//渲染类
varRender=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){
varhtml=[];
html[html.length]=this.doRenderHeader();
html[html.length]=this.doRenderBody(rets);
html[html.length]=this.doRenderFooter();
if(this.root)this.root.innerHTML=html.join('');
};
}
//数据请求时成功调用的方法
functionsuccessFn(o){
try{
vardata=doFitlerData(o);//调用config.js里的方法
//实例化Render
vardefaultRender=newRender("test",3);
defaultRender.doRender(data);
}catch(e){
}
}
//数据请求时调用失败的方法
functionfailureFn(){
alert("Failure");
}

这样的三层构架带来什么好处,首先是分工非常明确,我只要负责页面渲染(表示层)这一块,其他的我可以不去考虑。其次,程序与程序间的耦合度低了,相对程序本身的内聚度高了,业务逻辑层和表示层只有一个数据接口,那就是从业务逻辑层返回给表示层是什么样的数据以及数据的格式,从业务逻辑层这个层面考虑,里面的程序如何修改,只要返回的数据不变,对表示层是一点都没有影响,同理,针对不同的页面,表示层可以写很多渲染类,对业务逻辑层也是没有影响的,同时提起公有的方法,放到config.js中,提高了代码的重用性。

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册