讓AJAX不依賴后端接口實現(xiàn)方案

更新時間：2012年12月03日 15:34:10 作者：

網(wǎng)頁中的ajax請求越來越多，或者應用開始就一直使用ajax與后端進行數(shù)據(jù)交換,本文將詳細介紹，需要的朋友可以參考下

問題是怎么個情況？
　　網(wǎng)頁中的ajax請求越來越多，或者應用開始就一直使用ajax與后端進行數(shù)據(jù)交換。（目前我在公司參與的項目就是如此）N多接口前后端來回調(diào)試是個麻煩事。
后端不可能短時間把所有的接口都寫完，也不會為了前端測試而制造假的數(shù)據(jù)和接口，不僅耗費時間而且到了開發(fā)階段返回的數(shù)據(jù)結構、接口名稱也可能會有許多改動。那么后端一邊寫接口一邊給前端，這看起來不錯。但在具體實施過程中，后端未完成的接口可能有錯誤，你需要不停的和后端溝通不停的找原因，有可能中途還會停滯等待后端返回數(shù)據(jù)正
確才能繼續(xù)。

為什么會這樣？
　　1：前端在開發(fā)初期就依賴了未成形的接口。
　　2：后端不完全知道前端需要的數(shù)據(jù)項及數(shù)據(jù)格式。
如何解決？
　　1：需求確認會議中前后端充分討論功能和接口。（需求明確的backlog，這個工作非常簡單）
　　在有完善的backlog文檔前提下，用戶的每個操作都被記錄成明確的功能。只要在最后的確認中開發(fā)人員一致認同這些條目，就很容易總結出需要的接口。
　　2：前端寫接口文檔（后端輔助）。
為什么是前端？
　　1：前端完全了解頁面需要展示的數(shù)據(jù)。2：前端完全了解需要的數(shù)據(jù)格式（如何處理錯誤碼等等）
　　前端的接口文檔可能是這樣：（示例登錄接口）

復制代碼代碼如下:

 
：用戶登錄 
url: ? （留給后端補充） 
請求方式：POST 
請求參數(shù)：email:String 
pwd:String 
checkCode:String 
返回數(shù)據(jù)： 
{ 
code:int,//錯誤編碼,登錄成功為0 其他錯誤返回錯誤編碼，沒有result項 
result:{ 
id:int // 用戶ID 
name:string //用戶名 
... 
} 
} 

后端如何輔助？
1：補充請求url。2：修正返回數(shù)據(jù)的字段。如果返回數(shù)據(jù)項很多文檔中的字段不符合后端的開發(fā)字段，那么后端需要修改過來。
　修改文檔是一個前后端討論的過程，有任何疑問都可以溝通。文檔完成以后各自一份。（文檔中任何修改都可以使用其他顏色標注，提醒其他人員注意）
后端補充完整以后可能是這樣：

復制代碼代碼如下:

 
：用戶登錄 
url: user/login.php (補充) 
請求方式：POST 
請求參數(shù)：email:String 
pwd:String 
checkCode:String 
返回數(shù)據(jù)： 
{ 
code:int,//錯誤編碼,登錄成功為0 其他錯誤返回錯誤編碼，沒有result項 
result:{ 
id:int // 用戶ID 
user:string //用戶名（修改） 
... 
} 
} 

3：開發(fā)過程完全依照文檔
　　文檔完成以后，大家心里都很清楚我只要這樣做，返回、使用這樣的數(shù)據(jù)就一定沒錯。
　　后端開始寫代碼，完全不用理會前端，他根本不會來找你的麻煩。
前端如何依照文檔開始工作？
接口都有了，返回數(shù)據(jù)也有了。那么接下來的工作就是構建一套可以使用模擬數(shù)據(jù)測試的框架。
如果使用jquery,一個簡單的結構可能是這樣。
用戶點擊登錄按鈕，前端模擬了文檔中描述的數(shù)據(jù)，直接調(diào)用了回調(diào)函數(shù)。這跟真實情況一樣。

復制代碼代碼如下:

 
View Code 
Common = { 
post:function(url, data, success){//一個基本的post請求封裝 
$.ajax({ 
url:url, 
type:"post", 
data:data, 
dataType:"json", 
error:function(){ 
//Common.tip(TipData["1002"], 0); 
//ajax錯誤提示 
}, 
success:function(data){ 
if(data && data.code != 0){ 
//Common.showError(data); 
//錯誤處理code轉(zhuǎn)換成文字提示給用戶 
}; 
success && success(data); 
} 
}); 
} 
}; 
// 1：用戶登錄 
function login(email, pwd, checkCode, callback){ 
//測試環(huán)境 
var data = { //模擬數(shù)據(jù) 
code : 0, 
result:{ 
id:'123456', 
user:"lujun" 
} 
}; 
callback(data);//直接把模擬數(shù)據(jù)傳遞給回調(diào)函數(shù) 
return ; 
//---鏈接真實數(shù)據(jù)的時候注釋以上代碼， 上線以前通過壓縮工具這些注釋掉會被移除 
//正式環(huán)境 
Common.post("user/login.php",{email:email, pwd:pwd, checkCode:checkCode}, callback); 
}; 
//點擊事件驅(qū)動登錄 
//登錄成功執(zhí)行一些列動作 
$('#submit').click(function(){ 
var email = $('#email').val(); 
var pwd = $('#pwd').val(); 
var checkCode = $('#checkCode').val(); 
//調(diào)用登錄接口 
login(email, pwd, checkCode, function(data){ 
if(data && data.code == 0){ 
//ajax執(zhí)行成功 
data = data.result; 
$('#userName').text(data.user); 
//其他代碼 ... 
} 
}); 
}); 

如何更好的工作？
全部功能接口都采用這樣的方式工作，會發(fā)現(xiàn)整個應用不需要后端支持，完全用模擬數(shù)據(jù)就可以驗收測試，是不是酷了一點呢！
一旦你準備鏈接正式數(shù)據(jù)，注釋掉測試代碼以后（這可能分布在代碼的各個角落，10處或者更多）。你不能在測試環(huán)境、鏈接數(shù)據(jù)庫的環(huán)境中快速切換！
這樣的測試代碼價值太有限。
我們可以把測試數(shù)據(jù)獨立出來作為一個文件，使用方法覆蓋的方式把最底層的AJAX請求方法覆蓋。

復制代碼代碼如下:

 
View Code 
//testData.js 用來存放所有測試數(shù)據(jù) 
TestData = { 
"userlogin":{ //登錄的測試數(shù)據(jù) 
code : 0, 
result:{ 
id:'123456', 
user:"lujun" 
} 
} 
// ... 其他結構的測試虎踞 
}; 
// common.js 
// 覆蓋 Common.post 方法 
Common.post:function(url, data, success){//一個基本的post請求封裝 
//把url進行MD5來作為key也是一個不錯的想法，可以省去那么多判斷 
if(url == "user/login.php"){ 
success(TestData["userlogin"]); 
}else if(url == "other"){//其他接口 
//... 
} 
}; 
// 1：用戶登錄 
function login(email, pwd, checkCode, callback){ 
Common.post("user/login.php",{email:email, pwd:pwd, checkCode:checkCode}, callback); 
}; 
//點擊事件驅(qū)動登錄 
//登錄成功執(zhí)行一些列動作 
$('#submit').click(function(){ 
var email = $('#email').val(); 
var pwd = $('#pwd').val(); 
var checkCode = $('#checkCode').val(); 
//調(diào)用登錄接口 
login(email, pwd, checkCode, function(data){ 
if(data && data.code == 0){ 
//ajax執(zhí)行成功 
data = data.result; 
$('#userName').text(data.user); 
//其他代碼 ... 
} 
}); 
}); 

上面的代碼很容易理解，想要模擬數(shù)據(jù)測試的時候就把最底層的ajax請求方法覆蓋掉。
當然這只是其中的一種，你可能有更好的方法或者通過一個全局變量就可以切換兩個環(huán)境，就好象 debug = false, debug = true 這樣！
最后
方法說透了其實也非常簡單，重要的是scrum中backlog的分解和理解。
我所在的團隊現(xiàn)在采用這種方式工作非常順利。
最后我一直在考慮一個合并混淆壓縮有500K JS 的應用如何組織代碼？

您可能感興趣的文章: