讓AJAX不依賴後端介面實現方案

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

為什麼會這樣？
　　1：前端在開發初期就依賴了未成形的介面。
　　2：後端不完全知道前端需要的資料項目及資料格式。
如何解決？
　　1：需求確認會議中前後端充分討論功能和介面。（需求明確的backlog，這個工作非常簡單）
　　在有完善的backlog文檔前提下，使用者的每個操作都被記錄成明確的功能。只要在最後的確認中開發人員一致認同這些條目，就很容易總結出需要的介面。
　　2：前端寫介面文檔（後端輔助）。
為什麼是前端？
　　1：前端完全瞭解頁面需要展示的資料。2：前端完全瞭解需要的資料格式（如何處理錯誤碼等等）
　　前端的介面文檔可能是這樣：（樣本登入介面） 複製代碼 代碼如下:：使用者登入
url: ? （留給後端補充）
請求方式：POST
請求參數：email:String
pwd:String
checkCode:String
返回資料：
{
code:int,//錯誤編碼,登入成功為0 其他錯誤返回錯誤編碼，沒有result項
result:{
id:int // 使用者ID
name:string //使用者名稱
...
}
}

後端如何輔助？
1：補充請求url。2：修正返回資料的欄位。如果返回資料項目很多文檔中的欄位不符合後端的開發欄位，那麼後端需要修改過來。
　修改文檔是一個前後端討論的過程，有任何疑問都可以溝通。文檔完成以後各自一份。（文檔中任何修改都可以使用其他顏色標註，提醒其他人員注意）
後端補充完整以後可能是這樣： 複製代碼 代碼如下:：使用者登入
url: user/login.php (補充)
請求方式：POST
請求參數：email:String
pwd:String
checkCode:String
返回資料：
{
code:int,//錯誤編碼,登入成功為0 其他錯誤返回錯誤編碼，沒有result項
result:{
id:int // 使用者ID
user:string //使用者名稱（修改）
...
}
}

3：開發過程完全依照文檔
　　文檔完成以後，大家心裡都很清楚我只要這樣做，返回、使用這樣的資料就一定沒錯。
　　後端開始寫代碼，完全不用理會前端，他根本不會來找你的麻煩。
前端如何依照文檔開始工作？
介面都有了，返回資料也有了。那麼接下來的工作就是構建一套可以使用類比資料測試的架構。
如果使用jquery,一個簡單的結構可能是這樣。
使用者點擊登入按鈕，前端類比了文檔中描述的資料，直接調用了回呼函數。這跟真實情況一樣。 複製代碼 代碼如下: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轉換成文字提示給使用者
};
success && success(data);
}
});
}
};
// 1：使用者登入
function login(email, pwd, checkCode, callback){
//測試環境
var data = { //類比資料
code : 0,
result:{
id:'123456',
user:"lujun"
}
};
callback(data);//直接把類比資料傳遞給回呼函數
return ;
//---連結真實資料的時候注釋以上代碼， 上線以前通過壓縮公用程式這些注釋掉會被移除
//正式環境
Common.post("user/login.php",{email:email, pwd:pwd, checkCode:checkCode}, callback);
};
//點擊事件驅動登入
//登入成功執行一些列動作
$('#submit').click(function(){
var email = $('#email').val();
var pwd = $('#pwd').val();
var checkCode = $('#checkCode').val();
//調用登入介面
login(email, pwd, checkCode, function(data){
if(data && data.code == 0){
//ajax執行成功
data = data.result;
$('#userName').text(data.user);
//其他代碼 ...
}
});
});

如何更好的工作？
全部功能介面都採用這樣的方式工作，會發現整個應用不需要後端支援，完全用類比資料就可以驗收測試，是不是酷了一點呢！
一旦你準備連結正式資料，注釋掉測試代碼以後（這可能分布在代碼的各個角落，10處或者更多）。你不能在測試環境、連結資料庫的環境中快速切換！
這樣的測試代碼價值太有限。
我們可以把測試資料獨立出來作為一個檔案，使用方法覆蓋的方式把最底層的AJAX要求方法覆蓋。 複製代碼 代碼如下:View Code
//testData.js 用來存放所有測試資料
TestData = {
"userlogin":{ //登入的測試資料
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);
};
//點擊事件驅動登入
//登入成功執行一些列動作
$('#submit').click(function(){
var email = $('#email').val();
var pwd = $('#pwd').val();
var checkCode = $('#checkCode').val();
//調用登入介面
login(email, pwd, checkCode, function(data){
if(data && data.code == 0){
//ajax執行成功
data = data.result;
$('#userName').text(data.user);
//其他代碼 ...
}
});
});

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