私は最近、多くの JS を使用するサイトを開発していますが、ほとんどの場合、純粋な JS を使用することを好みますが、jQuery には間違いなく用途があり、現在は主にクイック イベント バインディング/バブリングに依存しています。ここでの私の質問は、jQuery キャッシュ オブジェクトの使用と、それらの最適な使用方法についてです。
私は自分の js スクリプトの大部分で、これらの行に沿って何かをしていることに気づきました。
jQuery.noConflict();
var doc = jQuery(document), // Root jQ object
html = doc.children('html'), // Mainly to check modernizr classes
container = html.find('.container'); // Base content container
/** module 1 **/
(function($, w, undefined) {
container.on('click', 'button', function(e) {
...
});
})(jQuery, window);
/** module 2 **/
(function($, w, undefined) {
container.on('click', 'a.module', function(e) {
// Occasionally creating further jQ objects in contextual situations
var self = $(this);
// Or is this better
var clicked = container.find(this);
});
})(jQuery, window);
ご覧のとおり、DOM をトラバースするために使用する高レベルの jQuery オブジェクトは 1 つしかありませんが、コンテキストが必要とする新しい jQuery オブジェクトを作成することもあります。プラグインを使用するというアイデアをもてあそびましたが、jQuery.single実際には必要だとは感じませんでした。
これは実際に私に有利に働いているのでしょうか。確かではありませんが、jQuery single を使用せずに可能な限り少ない数の jQuery オブジェクトしか作成していないため、より良いと感じています (2 番目のモジュール コードを参照)。ここの誰かが、これが実行可能かどうか、または個々のクロージャー内で jQuery オブジェクトを作成する以前の方法に固執する必要があるかどうかを明らかにできることを願っていますか?
私の以前の方法の例
/** module 1 **/
(function($, w, undefined) {
var container = $('.container');
container.on('click', 'button', function(e) {
...
});
})(jQuery, window);
/** module 2 **/
(function($, w, undefined) {
var container = $('.container');
container.on('click', 'a.module', function(e) {
// Occasionally creating further jQ objects in contextual situations
var self = $(this);
});
// Usually if I needed anything further outside the container
// If create further objects
var header = $('header');
})(jQuery, window);