3

私はSOを少し検索しましたが、私を助けてくれる質問/回答は見つかりませんでした。問題は、jQuery 関数呼び出しが大きくなりすぎて維持できないことです。もっとリファクタリングする必要があるのか​​、それともこれらすべての呼び出しを行うためのより良い方法があるのか​​ 疑問に思っています。1 つの呼び出しを行うと、関数の引数である無名関数が非常に大きくなり、コードの可読性が大幅に低下することがわかります。理論的には、これらすべてを独自の機能に分割することはできますが、それがベスト プラクティスであるかどうかはわかりません。これまでの jQuery の例を次に示します。

$('#dialog').html('A TON OF HTML TO BUILD A FORM').dialog('option', 'buttons', { 'Save': function(){$.post('/use/add/', $('#use_form').serialize(), function(data){ ......There were 4 more lines of this but I'm saving you so you don't rip your eyeballs out hopefully you get the idea.....dialog('option','title','New Use').dialog('open');

ご覧のとおり、私が呼び出している関数の多くは関数を引数として取るため、匿名関数を作成すると、最終的に大混乱になります (このコードには、さらに約 3 つの匿名関数宣言がありました)。

単純に一連の関数を作成し、それらを呼び出して読みやすくする必要があります。私がこれに反対する唯一の理由は、一度しか使用されない宣言された関数がたくさんあるからです。

助けてくれてありがとう！

4

6 に答える 6

6

関数を正しいスコープで定義すれば、大したことではありません。

var generateHTML = function() {
  ...
};
var somethingElse = function() {
  ...
};

... some more ...

$('#dialog').html( generateHTML() )...etc

コードを一般的に再編成して (たとえば、オブジェクト指向スタイルを使用して) コードをカプセル化する以外にできることはあまりありません。

于 2010-01-07T23:01:51.340 に答える
1

jQuery では、終わりのない連鎖の問題に陥りがちです。関数チェーンは、適度に使用すれば良いものです。さもないと、5 分前に書かれたコードを読んで理解するのに永遠に時間がかかります。その意味で、slebetman が提案したようにコードをフォーマットすると役に立ちます。さらに、誰かまたは thenduks によって提案されたように機能をスコープすることも非常に役立ちます。

リファクタリングの作業をさらに進める場合は、MVC や MVP などの何らかのアーキテクチャ パターンを検討してコードを整理することをお勧めします。A List Apart には、Javascript を使用した MVC の実装に関する優れた記事があります。ビューとモデルが分離されている場合、カスタム イベントや、簡単に再利用できるその他の多くの追加機能を簡単に使用できます。また、DOM オブジェクト (テーブル、行、div) やイベント (クリック、キーアップ) などではなく、ドメイン モデルの観点から考えるonPostRollback必要onPostCreateがonCommentAddedあります。たとえば、SO。jQuery は最近、カスタム イベントをバインドするためのサポートを追加しました。これらはいくつかの優れた記事です ( first、second) 方法を説明します。

一般に、ビューを再利用することは困難ですが、モデルはプロジェクト間でほとんど変更されず、最大の再利用性を実現できる領域の 1 つです。

于 2010-01-08T00:03:51.713 に答える
1

保守性を維持する明白な方法は、ある種のフォーマットを使用することです。

単独で使用される関数に名前を付けるのが嫌いなのは理解できますが、名前を含めるのは簡単です。スコープを模倣する JavaScript のイディオムは、すぐに呼び出される無名関数で問題のコードをラップすることです。

(function () {
  var f = function (x) ...
  var g = function (y, z) ...
  // operations involving f and g
}()); // called immediately

私は、コードがすぐに実行されるという事実をより明確にする別の形式を好みます。

new function () { // called immediately
  var f = function (x) ...
  var g = function (y, z) ...
  // operations involving f and g
};

これで名前を作成する別の方法があります：

new function (i, j, k) {
  // functions f and g
  f(i, g(j, k));
}(3, 4, 5);
于 2010-01-07T23:25:43.827 に答える
1

私がこれに反対する唯一の理由は、一度しか使用されない宣言された関数がたくさんあるからです。

現在行っているように匿名関数を使用することは、正しくスコープ指定された名前付き関数を宣言することと実際には違いはありませんが、それらはインラインであり、関数名が表示されないため、多くの JavaScript デバッガーでデバッグするのが少し難しくなります。

ページ全体で匿名関数にパターンがある場合は、必要な機能に共通の基盤を提供する名前付き関数をリファクタリングしようとします。

jQueryメソッド呼び出し内やJavaScript<script>タグ内に埋め込まれたhtmlの大きな文字列を避ける傾向があり、関連するコンテンツを取得するために簡単に照会できる別の場所にこれらを保持する傾向があります-これはテキストファイルなどです.

于 2010-01-07T23:25:58.830 に答える
0

私はコードを可能な限りプラグインに分解しようとし、実際にはこの原則に基づいてコードを設計します。そのアイデアがあなたのニーズにどれだけ合っているかわからない。

于 2010-01-07T23:38:56.027 に答える
0

整形、整形、整形！空白を適切に使用すると、コードを読みやすくすることができます。

$('#dialog').
    html('A TON OF HTML TO BUILD A FORM').
    dialog('option',
        'buttons', {
            'Save': function(){
                var callback = function(data){
                    // There were 4 more lines of this
                    // but I'm saving you so you don't
                    // rip your eyeballs out hopefully
                    // you get the idea
                }
                $.post(
                    '/use/add/',
                    $('#use_form').serialize(),
                    callback
                )
             }
         }).
    dialog('option',
        'title',
        'New Use').
    dialog('open');

これは、私が個人的にフォーマットする方法です。他にも方法はありますが、JavaScript は自動的に「;」を追加する傾向があるため、行末に開き括弧/括弧を残し、コンマ/ドット/+ を記述することを強くお勧めします。行が完全な整形式のステートメントであると判断した場合、行の最後に。

重要なことは、採用する特定のフォーマット規則ではありません。重要なことは、それについて一貫していることです。いくつかの点で Python は正しかった: 人々にコードのインデントを強制するのは良いこともある (しかし私は Python によって強制されるのは嫌いだ)。

于 2010-01-07T23:20:12.600 に答える