从一个项目中来看三层架构
作者: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中,提高了代码的重用性。最后,程序有较高的扩展性和可维护性。我想这些都是三层架构带给我们的好处吧。就讲到这吧,以上是对这次项目从构架的角度做一个总结,对三层架构还需要再去深入研究,个人觉得这个现在还是比较普及的,可以用这个思想来构架一个项目,一个系统。


猜你喜欢
- enumerate函数用于遍历序列中的元素以及它们的下标。enumerate函数说明:enumerate()是python的内置函数enum
- 前言大家在使用python做web端自动化时会出现各种各样的问题,下面我会告诉大家selenium无法启动浏览器的问题检查是否安装selen
- 在Python中我们主要是通过thread和threading这两个模块来实现的,其中Python的threading模块是对thread做
- 使用PHP开发应用程序,尤其是网站程序,常常需要生成随机密码,如用户注册生成随机密码,用户重置密码也需要生成一个随机的密码。随机密码也就是一
- 目录小而美简单至上避免空值选择数据类型的步骤数据类型介绍一、串数据类型二、数值数据类型三、日期和时间数据类型四、二进制数据类型结语:小而美通
- 我在用 ASP 写一个数据库的应用的时候,总是被那些看起来好好的SQL语句执行起来产生的错误代码搞得头疼,请问有没有更好的解决办法啊?有,我
- Python应用编程需要用到的针对不同数据库引擎的数据库接口:http://wiki.python.org/moin/DatabaseInt
- 简介查看百度搜索中文文本聚类我失望的发现,网上竟然没有一个完整的关于Python实现的中文文本聚类(乃至搜索关键词python 中文文本聚类
- 本文实例讲述了python开发之基于thread线程搜索本地文件的方法。分享给大家供大家参考,具体如下:先来看看运行效果图:利用多个线程处理
- 一、中间键的引入:Django中间件(Middleware)是一个 轻量级、底层的 “插件”系 统,可以介入 Django的请求和响应处理过
- 通常程序会被编写为一个顺序执行并完成一个独立任务的代码。如果没有特别的需求,最好总是这样写代码,因为这种类型的程序通常很容易写,也很容易维护
- 补充说明,外键:不要使用外键,一切外键概念都在应用层解决。补充说明,数据库的列,也就是字段名,尽量带上飘符号`数据库存在的意义:数据存储和数
- 本文实例讲述了JS实现的字符串数组去重功能。分享给大家供大家参考,具体如下:这里只考虑最简单字符串的数组去重,暂不考虑,对象,函数,NaN等
- python模块导入细节本文主要介绍了关于python模块导入的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧官方
- 多表查询案列说明笛卡尔积的理解select id,department_namefrom employees,departments;#错的
- mongodb是基于分布式文件存储的nosql(非关系型)数据库虽说是nosqldb, but mongodb 其中的文档可以是关系型的在m
- 这篇文章主要介绍了Python Django 封装分页成通用的模块详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学
- 使用索引的场景:阿里云日志里出现了慢sql 然后发现publish_works_id字段会经常用于一些关联,所以决定把这个字段加上
- 严正声明:本文仅限于技术讨论,严禁用于其他用途。基础知识socket通信模块:针对TCP/IP协议簇进行的程序封装,在Windows/Lin
- 一.wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noar