从一个项目中来看三层架构
作者:xcgfly2sky 发布时间:2008-08-06 12:50:00
这个项目到一开始的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中,提高了代码的重用性。最后,程序有较高的扩展性和可维护性。我想这些都是三层架构带给我们的好处吧。就讲到这吧,以上是对这次项目从构架的角度做一个总结,对三层架构还需要再去深入研究,个人觉得这个现在还是比较普及的,可以用这个思想来构架一个项目,一个系统。
猜你喜欢
- 如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderC
- 毫无疑问,这个世界设计无处不在,优美的设计会得到会心的微笑和由衷的赞赏。然而,想从事设计或在设计边缘的人们未必有机会学习专业的设计。实际上,
- iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…当我们已经开始惊叹 w
- 在ASP.NET2.0通过SMTP的验证发送EMAIL ,代码如下:’Create a new MailMes
- 平时在PL/SQL中的编程中遇到一些问题,这里以问答的形式来进行把它们总结下来,以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- 在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好遇到了关于select元素的两个小问题,这里进行一下总结
- 如果你过分信任 Access 2000数据库的密码保护,你可能会因此而蒙受损失。这是因为Access 2000的数据库级密码并不安全,相反它
- replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(st
- myisam_max_[extra]_sort_file_size足够大delay_key_write减少io,提高写入性能bulk_ins
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型, 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而, 能做
- 这个收藏本站、设为首页代码相信每个网站都会用到,这么常用的代码,网络上流行的一般是很多年前的代码版本,只有兼容IE,对其它浏览器没有考虑,下
- 二级域名的解析指向ASP源代码,懂程序的人一看就明白怎么实现了。呵呵!真简单<%@ LANGUAGE =&nb
- asp程序运行速度试验实验:1。作相同的分支条件判断:IF 比 SELECT慢。用以下程序测试:
- SQL Server 阻止了对组件 'Ad Hoc Distributed&nbs
- JavaScript Length 字符长度函数,在很多时间我们会用length函数了,因为你得前台判断一个用户输入
- 此文章主要向大家讲述的是SQL Server数据库的分布式数据库系统的实际目标,通俗的讲就是研制分布式数据库系统的目的、动机,其中主要包括的
- 今天不小心又点了收藏夹里Google的新首页风格的地址,赫然发现又变了!从这个页面上线以来,偶尔会去看看,短短一年的时间,已经变换了至少三次
- 因为这两天在弄自己的一个问答程序www.sosoask.com ,结果发现开发人员把我的存储过程加密了,郁闷,还好找到解决方法了,现在共享下
- Oracle是世界上用得最多的数据库之一,活动服务器网页(ASP)是一种被广泛用于创建 * 页的功能强大的服务器端脚本语言。许多ASP开发人
- 当你在浏览网页时,看到一个很漂亮的特效,你查看源代码时看到的是一队乱码,那多扫兴呀!根据本人的研究,总结出了三种解密方法,与大家分享!!方法