3


1

JQuery-GUIオブジェクトをイベントに配線する最良の方法は?

JQueryが数年前に登場して以来、私はすべてのクライアント側スクリプトでそれを使用してきました。 最初に、オブジェクトを取得して操作するために '$()構文を使用しました。これは、ボタンイベントを関数に明示的に接続する’古いskool 'パラダイムです。


関連機能:

function myFunction(obj){
    alert('this is how old-timers like me do it!')
}

私の同僚の中には、JQueryのようなイベントにスクリプトを添付することを好む人もいます。

$(document).ready(
    $("#myButton").click(
        function(event){
            alert('this is the newer JQuery way of doing things');
        }
    );
);

最初に、匿名関数などに依存する過度にかっこいいJQuery構文を見つけました。 読みにくいですが、目と脳が調整されたので、今はどちらの方法でも満足しています。 ただし、コードショップには一貫性が必要です。 どのアプローチが「より良い」かについての意見はありますか?

4 Answer


3


お持ちのjQueryバージョンもかなり小さくすることができます。

$(function() {
  $("#myButton").click(function(){
    alert('this is the newer JQuery way of doing things');
  });
});

私はこれまたは_その他_控えめなルート(not_インラインハンドラー)を使用します。全体的な問題は少なく、メンテナンスははるかに簡単です。 このルートでは、ページ内に_no JavaScriptが存在する可能性があることを忘れないでください。クライアントが一度ロードしてキャッシュすることができるため、ページのロードも高速になります。

インラインで適切に(またはクロスブラウザで)できないこともたくさんあります。たとえば、非常に便利なhttp://api.jquery.com/mouseenter/ [mouseenter]やhttp:// apiなどです。 jquery.com/mouseleave/ [mouseleave](子を入力すると起動しない)イベントは、IEでインラインでのみ使用できます。


3


私はいくつかの理由で2番目のアプローチがきれいだと思います:

  • それは本当にあなたが*コンテンツと行動を分離する*ことを可能にします、それはあなたです 最初にコンテンツの構造を定義し、後で特定の動作を処理することができます…​ これは、チームがさまざまな技術プロファイルを使用している場合に特に役立ちます(誰かが生のHTMLを処理し、他の誰かはJavascriptの専門家です…​)

  • あなたが知っているように、これは本当に*メンテナンスに役立ちます* 何かがうまくいかない場合は、HTML全体を調べる代わりに、バグのあるJavaScriptが発生する可能性があります。

  • HTMLが実際に動的な場合(サーバーサイド、PHPで生成) またはASP.NET)、生成するHTMLにこれらのクライアント側要素を含める必要があるのは実際には非常に苦痛です…​ これは非常に一般的なエラーの原因であるため、javascriptを邪魔にならないようにしてください。


2


「jQuery」の方法は、コンテンツと機能の分離を強制します。これはGood Thing IMOです。 コンテンツ/マークアップの「ノイズ」を減らします。 また、プログラマーはスクリプトに集中できますが、「マーカーアッパー」はHTMLに集中できます。

ところで、あなたは_have_を「過度にかっこいい」にしたり、したくない場合は匿名関数を使用したりしないでください:

function myFunction(obj){
    alert('this is a compromise!')
}

$(function() {
    $("#myButton").click(myFunction);
});


1


jQueryバージョンは、動作(JavaScript)と構造(HTML)を分離するため、優れています。

括弧が多すぎると思われる場合は、CoffeeScript(http://jashkenas.github.com/coffee-script/)などのJavaScriptにコンパイルされる言語を使用できます。

$ ->
  $("#myButton").click ->
    alert 'this is the newer JQuery way of doing things'