AJAX がバックエンド インターフェイスの実装に依存しないようにする solution_javascript スキル

何が問題ですか?
Web ページでの ajax リクエストが増えているか、アプリケーションが最初からバックエンドとのデータ交換に ajax を使用しています。 （現在社内で携わっているプロジェクトがこれに当てはまります） N個の複数のインターフェースのフロントエンドとバックエンドを行ったり来たりのデバッグは面倒です。
バックエンドがすべてのインターフェイスを短時間で作成することは不可能です。また、フロントエンド テスト用に偽のデータやインターフェイスを作成することもできません。時間がかかるだけでなく、多くのデータ構造が存在する可能性があります。開発段階で返されるインターフェイス名は変更されます。次に、バックエンドがフロントエンドに提供しながらインターフェイスを作成します。これは良いように見えます。ただし、特定の実装プロセス中に、バックエンドの未完成のインターフェイスにエラーが発生する可能性があります。その理由を見つけるためにバックエンドと常に通信する必要があります。続行する前に、途中で停止し、バックエンドが正しいデータを返すまで待つ必要があります。 。


これはなぜですか? 1: フロントエンドは、開発の初期段階では未形成のインターフェイスに依存します。
2: バックエンドは、フロントエンドが必要とするデータ項目とデータ形式を完全には認識していません。

どうやって解決しますか？ 1: 要件確認会議では、フロントエンドとバックエンドが機能やインターフェースについて十分に議論します。 (要件が明確なバックログ、このジョブは非常に単純です)
完全なバックログ ドキュメントでは、ユーザーのすべての操作が明確な機能として記録されます。開発者が最終確認でこれらの項目に同意していれば、必要なインターフェースをまとめるのは簡単です。
2:フロントエンドのインターフェースドキュメント(バックエンド支援)の作成。

なぜフロントエンドなのか? 1: フロントエンドは、ページに表示する必要があるデータを完全に理解します。 2: フロントエンドは、必要なデータ形式 (エラー コードの処理方法など) を完全に理解しています。
フロントエンド インターフェイスのドキュメントは次のようになります: (サンプルのログイン インターフェイス)

コードをコピーします コードは次のとおりです:

: ユーザー ログイン
url: (バックエンドによって補足されるまま)
リクエストメソッド: POST
リクエストパラメータ: email:String
pwd:String
checkCode:String
戻りデータ:
{
code:int,//エラーコード,ログイン成功は 0 です。その他のエラーはエラー コードを返します。結果項目はありません。
result:{
id:int // ユーザー ID
name:string // ユーザー名
...
}
}

バックエンドを支援するにはどうすればよいですか? 1: 補足リクエストの URL。 2: 返されたデータのフィールドを修正します。返されたデータ項目の多くのドキュメント内のフィールドがバックエンド開発フィールドに準拠していない場合は、バックエンドを変更する必要があります。
ドキュメントの変更は、フロントエンドとバックエンドでのディスカッションのプロセスです。質問がある場合は、連絡してください。書類が完成したら、各自がコピーを受け取ります。 (ドキュメント内の変更を他の人に注意を促すために他の色でマークすることができます)
バックエンドが完了すると、次のようになります:

コードをコピーします コードは次のとおりです:

: ユーザーログイン
url: user/login.php (補足)
リクエストメソッド: POST
リクエストパラメータ: email:String
pwd:String
checkCode:String
戻りデータ:
{
code:int, // エラー コード、ログイン成功は 0。その他のエラーが返されるエラー コード、結果項目なし
result :{
id:int // ユーザー ID
user:string // ユーザー名 (変更済み)
...
}
}

3: 開発プロセスは完全にドキュメントに従っています
ドキュメントが完成した後は、これを実行する限り、そのようなデータを返して使用するのが正しいことは誰もが知っています。
フロントエンドをまったく無視してバックエンドでコードを書き始めても、まったく問題ありません。
ドキュメントによると、フロントエンドはどのように動作し始めるのでしょうか?
インターフェースはすべてそこにあり、戻りデータもそこにあります。次のステップは、シミュレートされたデータを使用してテストできるフレームワークを構築することです。
jqueryを使用する場合、単純な構造は次のようになります。
ユーザーがログインボタンをクリックすると、フロントエンドがドキュメントに記述されたデータをシミュレートし、コールバック関数を直接呼び出します。これは本当です。

コードをコピー コードは次のとおりです:

コードの表示
Common = {
post:function(url, data, success){//基本的なポストリクエストのカプセル化
$.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);
// エラー処理コードをユーザーのテキスト プロンプトに変換します
}
}
; > };
///1: ユーザーログイン
関数login(email, pwd, checkCode, callback){
//テスト環境
var data = { //シミュレーションデータ
コード: 0 ,
result:{
id:'123456',
user:"lujun"
}
} // シミュレートされたデータを直接渡します。コールバック関数
return ;
//---実際のデータをリンクするときに、これらのコメントはオンラインになる前に圧縮ツールによって削除されます。
//正式な環境
共通。 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 リクエスト メソッドをカバーできます。

コードをコピー

コードは次のとおりです: コードを表示 //testData。 js を使用 すべてのテスト データを保存しますTestData = { "userlogin":{ //ログイン テスト データ

code : 0,

result:{
id:'123456',
user :"lujun"
}
}
// ... 他の構造のテスト
}
// common.js
// Common.post メソッドをオーバーライドします
Common.post:function(url, data, success){//基本的な投稿リクエストのカプセル化
//URL をキーとして MD5 することも良い考えです。これにより、多くの判断を省くことができます
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); code...
}
});


データのテストをシミュレートしたい場合は、下のコードを上書きするだけです。レベルのAjaxリクエストメソッド。
もちろん、これはそのうちの 1 つにすぎません。もっと良い方法があるかもしれません。あるいは、debug = false、debug = true のように、グローバル変数を使用して 2 つの環境を切り替えることもできます。

最後に

その方法を徹底的に解説していますが、重要なのはスクラムにおけるバックログの分解と理解です。
私のチームは現在、この方法で非常にうまく機能しています。

最後に、マージ、難読化、圧縮された 500K JS を含むアプリケーションのコードをどのように整理するかを考えてきました。