这个项目到一开始的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标准化版块参加讨论,我还想发表评论。
|