Werken met jQuery: 5 Tips! ( deel 2 )
Na een tijdje met jQuery te hebben gewerkt, wil ik hier enkele best-practices delen.
1. Gebruik de context
Voorkom conflicten door altijd de context op te geven waarin de elementen zich moeten bevinden.
$('a').attr('rel', 'external');
// rather use the context:
$('#content a').attr('rel', 'external');
// or use the 2nd param for defining the context:
$('a', '#content').attr('rel', 'external');
// or equivalent by using find():
$('#content').find('a').attr('rel', 'external');
2. Gebruik ook de $ in variabele- en functienamen
Gebruik de $ ook in de naamgeving om duidelijk aan te geven dat de variabele een jQuery object bevat, of een jQuery object wordt teruggeven door een functie.
// start the var-name with $ when containing a jQuery instance
var $links = $('#content').find('a');
En voor functies:
// end function-name with $ when returning a jQuery instance
function getByName$(name) {
return $('#wrapper').find('form').find('*[name=' + name + ']');
};
3. Gebruik delegate() over live()
De live() methode zorgt ervoor dat een bepaalde functie wordt gekoppeld aan de opgegeven selectie, maar ook voor nieuw toegevoegde elementen die aan de selectie voldoen. Live() lijkt soms niet goed te werken wanneer een jQuery object wordt gebruikt als context, zoals in dit voorbeeld:
var $wrapper = $('#wrapper');
// using live()
$('table td', $wrapper).live((function () {
$(this).css({backround:'#eee'});
});
// same as:
$wrapper.find('table td').live((function () {
$(this).css({backround:'#eee'});
});
Gebruik daarom delegate:
// rather use delegate():
$wrapper.delegate('table td', 'bind', function () {
$(this).css({backround:'#eee'});
});
4. Nog 31 jQuery tips…
Zie artikel: 31 jQuery Snippets That Will Help Make You A JavaScript Pro
5. jLim, de mini-jQuery
jQuery is een fraai framework, maar ook vrij groot. Met name voor kleinere websites, waarbij je niet de volledige functionaliteit van jQuery nodig hebt.
jLim is een nieuw geschreven compact JavaScript framework (core < 5kb min, package ~13kb), met een soortgelijke interface als jQuery. Ideaal voor websites, die maar een deel van de functionaliteit van jQuery nodig hebben.
Gerelateerde artikelen
Nog geen reacties
RSS
LinkedIn
Twitter
