這個項目到一開始的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

業務邏輯層

表示層

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中，提高了代碼的重用性。最后，程序有較高的擴展性和可維護性。我想這些都是三層架構帶給我們的好處吧。就講到這吧，以上是對這次項目從構架的角度做一個總結，對三層架構還需要再去深入研究，個人覺得這個現在還是比較普及的，可以用這個思想來構架一個項目，一個系統。