2009-03-10 4 views
2

このJavascriptコードをリファクタリングしてください。 スケジュールされたメッセージ送信(送信日付、返信タイプ、終了日/ qauntity、クレジットシステム - 実行時にスケジュールされた送信プランの総コストをカウントする必要がある)には大きなフォームがあります。 このフォームのJavascriptバリデーターを書いています。ネストされたAJAXコールバック関数の可読性

検証アルゴリズム 1)送信日時が過去の瞬間 2にないかどうかをチェック)「日付で終わる」かどうかをチェックフィールド時間は、その後も大きい存在である第一の送信日時 3)スケジュール計画の総コストを検証します

(あり約6段階が、私はちょうどここではそれらの3を書く - 私は問題を把握するために十分になると思う)

「スケジュールされた計画を保存」ボタンを「クリック」イベントでJavaScriptリスナーを持っています。ここで

ScheduledValidator.checkIfSendDateTimeIsNotInPast(params, form); 

それはその宣言です:私たちは、要求後に入れ子になっている

ScheduledValidator.checkIfSendDateTimeIsNotInPast = function (params, form) { 
    var conn = new Ext.data.Connection(); 

    conn.request({ 
     url: CONST.BASE_URL + 'url', 
     params: params, 
     callback: function (options, success, response) { 
      response = Ext.util.JSON.decode(response.responseText); 
      if (response.success == false) { 
       // display error messages 
      } else { 
       ScheduledValidator.checkIfEndDateIsGreaterThatSendDate(params, form); 
      } 
     } 
    }); 
} 

ScheduledValidator.checkIfEndDateIsGreaterThatSendDate = function (params, form) { 
var conn = new Ext.data.Connection(); 

conn.request({ 
    url: CONST.BASE_URL + 'url2', 
    params: params, 
    messageForm: form, 
    callback: function (options, success, response) { 
     response = Ext.util.JSON.decode(response.responseText); 
     if (response.success == false) { 
      // display error messages 
     } else { 
      ScheduledValidator.validateTotalCost(params, form); 
     } 
    } 
}); 
} 

、ここで1以上:

ScheduledValidator.validateTotalCost = function (params, form) { 
... 
このリスナーは、この関数を呼び出します

私はtで好きではありません一見してアルゴリズムを理解することはかなり難しいと考えています。 単一フォームの検証のために多くの(約6個の)ネストされたAJAXクエリを作成するのは良いことではないでしょうか? 単一の要求にマージする必要があるかもしれませんし、その後、サーバー側ですべての検証作業を行いますか? このコードをどのようにリファクタリングする必要がありますか?

答えて

2

コードをリファクタリングする前に、フォームプロセスとユーザーエクスペリエンスがどのように機能するかを評価して評価することをお勧めします。

たとえば、日付を入力するとすぐにユーザーにフィードバックする必要がありますか?彼女はフォームを記入するまで待つことができますか?その場合は、通常のフォーム投稿を使用して、提出サーバー側を検証し、フィードバックを返すことができます。

もしそうでない場合は、すぐにフィードバックが必要な場合は、実装の周りに包括的ラッパーを作成してフォームの検証を処理することができます。これは手動で行うこともできますし、必要に応じて特定のURLとコールバックを定義できるフォーム検証メカニズムをGoogleで検索することもできます。

3番目のオプションは、サーバーに接続せずに検証側のクライアント側で行うことができます。ロジックがJavascriptで実行できるかどうかを判断します(おそらく、日付の計算が必要な場合、これはあまり難しくありません)。そして、それを行うレイヤーを追加してください。最初の場所。ボーナス:サーバー側のコードがどのくらい速く応答するかによって、実際にユーザーエクスペリエンスが向上する可能性があります(ただし、サーバー側の検証は必須です)。

あなたの質問では、以前の提案が適用されたように聞こえます。つまり、フォームが正しく記入されているかどうかについてのフィードバックがすぐに必要なわけではありません。あなたの状況を正しく理解していれば、リファクタリングプロセスを開始することをお勧めします。AJAX呼び出しを取り除き、通常のフォームとして動作させ、クライアント側での検証を追加します。

関連する問題