|
这个项目到一开始的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
- get.js(请求数据的基本方法)
- deal.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标准化版块参加讨论，我还想发表评论。
|
