問題是怎麼個情況？ 網頁中的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 的應用如何組織代碼？