0

すでに質問されていますが、正しいjQueryプログラミングの問題に対処したいと思います。

方法 #1:

<script>
     function DoClickAction() {
          // Some work
          return false;
     }
</script>

<a href="#" id="ActionButton" onclick="DoClickAction();">Do some work</a>

VS

方法 #2:

<script>
     $(function() {
          $("#ActionButton").on("click", DoClickAction);
     }

     function DoClickAction() {
          // Some work
          return false;
     }
</script>

<a href="#" id="ActionButton">Do some work</a>

これについて同僚と話し合っていますが、私の意見では、どちらの方法にも「これが正しい方法」とは言えないほどの長所と短所がありますが、選択する必要がある場合は、方法 # を好む傾向があります。 1、これが理由です：

方法 #1 長所:

  • 他の誰かのコードをデバッグする場合、誰かがリンクを押したときに実行される jQuery コードを簡単に追跡できます。
  • コンテンツを動的にロード (AJAX 呼び出し) すると、コンテンツは常に機能し、jQuery イベントを再バインドする必要はありません。

方法 #2 長所:

  • スクリプト ファイルがキャッシュされ、onclick 属性が必要ないため、ブラウザーがダウンロードする HTML コードが少なくなります。この例ではより多くのコードを使用していますが。
  • 同じ属性を使用することでコードを簡単に再利用できますが、1 つの関数で onclick を使用することは一種の同じことです。

これについてどう思いますか？

4

2 に答える 2

4

いずれかの方法の長所をリストする代わりに、方法 1 の短所に焦点を当てましょう。

  • 関数名を変更する == マークアップ全体を変更する
  • すべてのイベント ハンドラーは、グローバルスコープ内にあります。その場合、クロージャーを操作するのは少し面倒です。
  • (JS または ajax 応答を介して) 新しい要素を動的に追加するということは、マークアップを解析して属性を 1 つずつ追加するか、基本的に JS 関数呼び出しを含むマークアップを送信する必要があることを意味します。安全ではない、きれいではない
  • 各属性は新しいリスナーです。属性が多いほどイベントループが重くなる
  • JS と HTML を混在させることは、良い習慣とは見なされません。これは関心の分離と考えてください。マークアップは、クライアントに UI を提供するためにあります。JS の (ブラウザーでの) 仕事は、ユーザー エクスペリエンスを向上させることです。彼らは一緒に働かなければなりませんが、異なるタスクを持っています。したがって、それらは別個のエンティティとして扱われるべきです。

2番目の方法に関する限り、私が考えることができる唯一の「短所」は次のとおりです。

  • あなたのコードは理解するのが少し難しいですが、誰かがイベントリスナーが何であるかを理解できない場合、彼はあなたのコードに取り組んではいけません.IMO.
  • デバッグは難しくなる可能性があり、古いブラウザーではリークする可能性があります (jQ には X ブラウザー関連のコードが非常に多く含まれているため、ここでは適用されません。vanillaJS を作成している場合は適用されます)。

これに加えて、 method2 には、リストしていない別の主要なプロがあります: delegation。デリゲートは一見難しそうに見えますが、簡単$.delegateです。 基本的に、委任を使用すると、単一のリスナーを使用して、ページ全体またはページのセクションなど、すべてのイベントを処理できます。これは、イベントをすべての要素にバインドするのとは対照的です。したがって、イベント ループの 1 つのリスナーと数十/数百のリスナー。どちらがよりパフォーマンスの高い方法であるかは明らかです。$.on
click

ページに次のようなナビゲーション div があるとします。

<div id='nav'>
    <ul>
        <li id='nav-home'>Some pseudo-link</li>
        <li id='nav-page1'>Another</li>
    </ul>
</div>

タグの 1 つをクリックして、ユーザーをピックアップし<li>ます。あなたがリストした最初の方法は、正しい混乱を引き起こします: <li id='nav-home' onclick='clickNav(event, this)'>. イベント オブジェクトと this(DOM 参照) を渡して、委任によってアクセスできるすべてのものにアクセスできるようにします。
委任を使用すると、次のように簡単に実行できます。

//jQ
$('#nav').on('click','li',function(e)
{
    $.ajax({//you know the gist
        url: 'ajax/' + $(this).id().replace('nav-',''),
        success: function(){}
    });
});
//vanillaJS:
document.getElementById('nav').addEventListener('click',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (e.tagName.toLowerCase() === 'li')
    {
        //perform ajax call
    }
},false);
于 2013-08-29T09:33:48.857 に答える
1

JavaScript と HTML が明確に分離されているため、私自身は #2 に非常に好意的です。ボタンのアクションが HTML ですぐに表示されないというマイナス面は、ブラウザのプラグインによって完全に無効にすることができます。

さらに、すでに述べたように、たとえばテーブルのすべての行に onclick イベントをアタッチしたい場合があり、すべての行に要素の OnClick 属性を設定することは、単純にクリック ハンドラーを各行にアタッチするよりもはるかに無駄です。他の場所では 1 行のコードでそれらを管理できます。

于 2013-08-29T09:27:33.263 に答える