讓AJAX不依賴後端介面實作方案_javascript技巧

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