web-dev-qa-db-ja.com

jQueryの標準とベストプラクティス

現在、jQueryの使用を社内のWeb開発者のコ​​ミュニティに展開する責任があります。この部分にはコースの提示が含まれますが、別の部分には標準とベストプラクティスの伝達が含まれます。

「jQueryのベストプラクティス」をGoogleで検索すると、検索結果の中に次のようなものが見つかるでしょう。 http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/http://www.artzstudio.com/2009/04/jquery-performance-rules /

これらは有用であり、私はそれらに関する多くの有用な情報を喜んでいます。ただし、私が本当に興味を持っているのは、経験豊富なjQuery開発者や自分と同じ立場にいる可能性のある人からのベストプラクティスに関するヒント、落とし穴、意見などです。良いリンクもありがたいです。

編集：

私自身のページにjQuery Coding Standardsセクションを追加しました。

http://www.jameswiseman.com/blog/?p=48

javascriptjquerycode-standards
61
James Wiseman

StackOverflow.comでこのトレンドトピックを見つけることができます。

避けるべきjQueryの落とし穴

非常に興味深い有用なヒントが次々に。

ブックマークで見つけた詳細を次に示します。

42
adardesign

私が個人的に始めたのは、jQueryセットの Apps Hungarian Notation のようなもので、変数の前に$

var someInt = 1;
var $someQueryCollection = $( 'selector' );

JQueryスニペットが大きくなるにつれて、jQueryセットを変数として格納することの推進においてだけでなく、実際にどの変数がjQueryセットであるかを追跡するのに役立つため、これが非常に貴重になることがわかります。

27
Peter Bailey

控えめなJavaScript（マークアップと動作の分離）

昔は、クリックハンドラをマークアップ内に配置するのが一般的でした。 JSコードをマークアップ内に記述せずに、DOMイベントを介して含めることをお勧めします。

プログレッシブエンハンスメント

ユーザーは、標準に準拠したブラウザーを使用している場合、および/またはJavaScriptを有効にしている場合に、より良いエクスペリエンスを得ることができます。ウェブサイト/ウェブアプリケーションは、古いブラウザを使用している場合やJSを無効にしている場合でもアクセスできます。

ブラウザ検出ではなく機能検出

上記の点は別として、私はJavaScriptがおもちゃの言語であるというメッセージを伝えることに焦点を当てます（先入観を破ります）。このように考えている開発者が多すぎて、そこからすべてが下り坂になっています。 JavaScriptが非常に強力な言語である理由と、JS自体が非常に強力であるにもかかわらず（ブラウザーの不整合のため）JSライブラリが必要な理由を説明する必要があります。

幸運を。

12
SolutionYogi

JQueryが機能する方法は、JavaScriptが機能する方法と同じではありません。 jQueryは、クラス名や要素のIDなどのCSSセレクターで機能します。 jQueryでアイテムを選択するには、次の操作を行います。

_$("#yourID") or $(".yourClass") or $("div") or $("#yourID p") etc
_

そして、あなたはあなたの基準に合うページ上のすべての要素のコレクションを取得します。その後、これらのすべての要素に対して、何らかのループを行わずにアクションを実行できます。これは覚えておくことが重要です：

_$(".yourClass").click(function(){
    //do stuff
});
_

_.yourClass_が添付されているすべてのアイテムに影響します。 1つのヒント：$(this)にアクセスする場合は、ローカル変数として保存する必要があります。

_$(".yourClass").click(function(){
    var $this = $(this);
});
_

それはあなたの機能をスピードアップします。

2
Jason