javascript - Cached jQuery objects -
i've been developing number of js heavy sites recently, whilst favour majority of time using pure js, jquery without doubt has uses , i'm relying on quick event binding / bubbling. question here using jquery cached objects , how best use them.
i've found myself doing along these lines in majority of js scripts.
jquery.noconflict(); var doc = jquery(document), // root jq object html = doc.children('html'), // 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) { // creating further jq objects in contextual situations var self = $(this); // or better var clicked = container.find(this); }); })(jquery, window);
as can see ever have 1 high level jquery object use traverse dom with, whilst creating new jquery objects context requires it. toyed idea of using plugin jquery.single
though didn't feel necessary.
is doing me favours, feel better i'm creating fewest number of jquery objects possible without using jquery single (see second module code), though can't sure. i'm hoping here able shed light on whether viable or should stick previous methods create jquery objects within each of individual closures?
example of previous methods
/** 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) { // creating further jq objects in contextual situations var self = $(this); }); // if needed further outside container // if create further objects var header = $('header'); })(jquery, window);
Comments
Post a Comment