6

昨日、UIをやり直すために、数週間前に作業していたページに戻らなければなりませんでした。UIは、3つのタブを持つjQueryUIタブコントロールで構成されていました。各タブには3〜5個のコントロールがあり、送信ボタンはタブ内のデータのみを送信します。いくつかのタブを再編成し、いくつかのテキストボックスを削除し、いくつかのドロップダウンリストを追加し、いくつかの動作を変更し、クライアント側の検証（jQuery検証を使用）で少し作業する必要がありました。この演習中に私が見つけたのは、jQueryセレクターのすべてに戻って再チェックする必要があるということでした。いくつかは無傷のままでしたが、それらの多くは変更されました。

jQueryを頻繁に使用するWebページのリファクタリングやリワークの影響を回避または最小化するために、人々はどのデザインパターンを使用しているのでしょうか。「検索」+「検索して置換」だけではいけないと思います。

4

3 に答える 3

3

一般に、一般的に使用されるノード参照を保存することは非常に良い考えです。これは、ある種の「initスクリプトファイル」で、またはモジュールがファイルで区切られている場合は各「モジュール」で実行できます。

例えば

var myNamespace = window.myNamespace || { };

$(document).ready(function() {
    myNamespace.nodes = {
        header:   $('#header'),
        content:  $('#overlay > .content'),
        footer:   $('#footer')
    };
});

コード内のどこかで、そのようなハッシュルックアップを介してのみ要素にアクセスする必要があります。後でセレクターが変更された場合、セレクター文字列を1か所で置き換える/変更するだけで、残りはすべて機能し続けます。

// somefile.js
var myNamespace = window.myNamespace || { },
    myNodes = myNamespace.nodes;

$(document).ready(function() {
    if( myNodes ) {
        myNodes.content.animate({ top: '+=200px' }, 1000);
    }
    else {
        throw new Error('Arrrrrrr the <center> cannot hold! it is too late');
    }
});

この概念は、Webアプリ全体のパフォーマンスも向上させます。これはまだかなり高価なDOM操作であるため、ノードを1回だけクエリします。

于 2011-07-06T12:57:25.743 に答える
2

私はこのリストについて考えます：

  1. 今日の段落でメッセージを表示する場合、明日のスパンでメッセージを表示したい場合があるため、セレクターにHTML要素を追跡していません。
  2. セマンティックIDとクラスを使用します。（セマンティックネーミングとIDは、これらの名前の将来の変更を防ぎ、セレクターの変更が少なくなります）
  3. 1つの長い記述クラスだけでなく、複数のクラスを使用します。（タグ付けのようなもの。クラスを持つ代わりに、error-messageクラスを持つerror message）
  4. トラバースを少なくします。つまり、子から親へ、このノードから前のノードへ、または兄弟などを使用します。（ネストレベルに直接関係します）。
于 2011-07-06T12:55:35.837 に答える
1

さて、私が使用する1つの良い習慣は、next（）とprev（）を使用することはありませんが、常にclosest（）とfind（）の組み合わせです。このように、物事を移動する場合、jqueryコードを変更する必要はありません（ほとんどの場合）。

もう1つは、セレクターを複数回使用する場合は、セレクターを変数にキャッシュすることです。

 var  myDiv = $('myDiv');

これによりパフォーマンスが向上し、IDを変更できる場合は、検索して置き換える必要がありません。それ以外は仕方がない。

于 2011-07-06T12:55:13.843 に答える