快捷導(dǎo)航

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

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

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

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

 
View Code 
//testData.js 用來(lái)存放所有測(cè)試數(shù)據(jù) 
TestData = { 
"userlogin":{ //登錄的測(cè)試數(shù)據(jù) 
code : 0, 
result:{ 
id:'123456', 
user:"lujun" 
} 
} 
// ... 其他結(jié)構(gòu)的測(cè)試虎踞 
}; 
// common.js 
// 覆蓋 Common.post 方法 
Common.post:function(url, data, success){//一個(gè)基本的post請(qǐng)求封裝 
//把url進(jìn)行MD5來(lái)作為key也是一個(gè)不錯(cuò)的想法，可以省去那么多判斷 
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); 
}; 
//點(diǎn)擊事件驅(qū)動(dòng)登錄 
//登錄成功執(zhí)行一些列動(dòng)作 
$('#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ù)測(cè)試的時(shí)候就把最底層的ajax請(qǐng)求方法覆蓋掉。
當(dāng)然這只是其中的一種，你可能有更好的方法或者通過(guò)一個(gè)全局變量就可以切換兩個(gè)環(huán)境，就好象 debug = false, debug = true 這樣！
最后
方法說(shuō)透了其實(shí)也非常簡(jiǎn)單，重要的是scrum中backlog的分解和理解。
我所在的團(tuán)隊(duì)現(xiàn)在采用這種方式工作非常順利。
最后我一直在考慮一個(gè)合并混淆壓縮有500K JS 的應(yīng)用如何組織代碼？

您可能感興趣的文章: