這個項目到一開始的kickoff到現(xiàn)在，持續(xù)了很長的一段時間，現(xiàn)在差不多也接近了尾聲，所以要好好做個總結(jié)，下面不會設(shè)計到太多技術(shù)層面上的東西，而是從前端構(gòu)架這個角度來看待這個項目。

這里所說的三層就是:表示層，業(yè)務(wù)邏輯層和數(shù)據(jù)層。對于數(shù)據(jù)層，只需要知道后臺返回過來是什么樣格式的數(shù)據(jù)(這次約定是一段json格式的數(shù)據(jù))，更多的精力是放在業(yè)務(wù)邏輯層和表示層上面，我主要負責表示層，朱哥哥主要負責業(yè)務(wù)邏輯層，分工合作，也算是一種嘗試吧，取得的效果還不錯。那么不多說廢話了，下面看具體實現(xiàn)(在命名上做了一定的改動，跟實際有點出入，只需關(guān)注其中的構(gòu)架思想)：

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

在頁面只需引入一個合并好的js:merge.js,然后在實例化這個方法
var post = new Post(url,successFn,failureFn,false)這個就是最后三層結(jié)合的體現(xiàn)
url 就是獲得數(shù)據(jù)的源地址，屬于數(shù)據(jù)層
Post數(shù)據(jù)處理類，是屬于業(yè)務(wù)邏輯層
successFn,faileFn 數(shù)據(jù)請求成功和失敗調(diào)用的方法，是屬于表示層

第二步：看下merge.js，它是一個js合并后的文件，考慮減少HTTP請求,在這里做了合并,merge.js的文件結(jié)構(gòu)如下:
merge.js

• get.js(請求數(shù)據(jù)的基本方法)
• deal.js(數(shù)據(jù)請求以及請求管理的方法集合，可以參考這篇文章”異步跨域請求的請求的實現(xiàn)”)

業(yè)務(wù)邏輯層

• config.js(配置文件，包含一些參數(shù)配置以及一些渲染時用到的一些公有方法
• render0.js(渲染的方法,這里針對不同的頁面，可以有多種不同的方法,但是前面三個文件是必須的)

表示層

config.js:

var config = {
"entrance":"http://www.alibaba.com.cn/",
"noimg":{
"x100":"/uploads/allimg/c120922/134S143641F-12c4.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){...}//數(shù)據(jù)過濾
.......

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){
調(diào)用this.doRenderImage(),this.doRenderTitle()
};
this.doRenderBody=function(rets){
調(diào)用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(');
};
}
//數(shù)據(jù)請求時成功調(diào)用的方法
function successFn(o){
try{
var data = doFitlerData(o); //調(diào)用config.js里的方法
//實例化Render
var defaultRender = new Render("test",3);
defaultRender.doRender(data);
}catch(e){
}
}
//數(shù)據(jù)請求時調(diào)用失敗的方法
function failureFn(){
alert("Failure");
}

這樣的三層構(gòu)架帶來什么好處，首先是分工非常明確，我只要負責頁面渲染(表示層)這一塊，其他的我可以不去考慮。其次，程序與程序間的耦合度低了，相對程序本身的內(nèi)聚度高了，業(yè)務(wù)邏輯層和表示層只有一個數(shù)據(jù)接口，那就是從業(yè)務(wù)邏輯層返回給表示層是什么樣的數(shù)據(jù)以及數(shù)據(jù)的格式，從業(yè)務(wù)邏輯層這個層面考慮，里面的程序如何修改，只要返回的數(shù)據(jù)不變，對表示層是一點都沒有影響，同理，針對不同的頁面，表示層可以寫很多渲染類，對業(yè)務(wù)邏輯層也是沒有影響的，同時提起公有的方法，放到config.js中，提高了代碼的重用性。最后，程序有較高的擴展性和可維護性。我想這些都是三層架構(gòu)帶給我們的好處吧。就講到這吧，以上是對這次項目從構(gòu)架的角度做一個總結(jié)，對三層架構(gòu)還需要再去深入研究，個人覺得這個現(xiàn)在還是比較普及的，可以用這個思想來構(gòu)架一個項目，一個系統(tǒng)。