O documento discute boas práticas para desenvolvimento com jQuery. Apresenta exemplos de códigos que devem e não devem ser usados, enfatizando a importância de seguir padrões de desenvolvimento como: dividir listeners em funções separadas, evitar muitas consultas ao DOM, seguir princípios como DRY e usar convenções de nomenclatura.
1. Triste que precise ser dito, mas jQuery
não substitui javascript, mas sim,
trabalha em cima do DOM. O Sucesso
do jQuery é a prova dos problemas da
API DOM.
Só um lembrete que jQuery 2.x ainda
corrige 88 bugs em browsers modernos
para te dar uma experiência de
desenvolvimento consistente.
6. Boas Práticas
em
jQuery
jQuery e JavaScript se confundem.
jQuery é uma lib escrita em cima da
linguagem JavaScript. Então, boas
práticas de jQuery, são no fundo no
fundo, boas práticas do JavaScript.
11. Divida os listeners
Do
var $menu = jQuery(‘#menu’);
$menu.on(‘click’, ‘a’, function() {
// do something
});
$menu.on(‘click’, ‘a’, function() {
// do another thing
})
12. Evite ir no DOM
Don’t
var $menu = jQuery(‘#menu’);
$menu.on(‘click’, ‘a’, function() {
$this.parent(‘li’)…
$this.parent(‘li’).find(‘span’)…
});
13. Evite ir no DOM
Do
var $menu = jQuery(‘#menu’);
$menu.on(‘click’, ‘a’, function() {
var $parent = $this.parent(‘li’);
$parent…
$parent.find(‘span’)…
});
14. Evite ir no DOM
Do
var $menu = jQuery(‘#menu’);
$menu.on(‘click’, ‘a’, function() {
var $this = $(this);
$this…
$this…
});
16. DRY
Do
var configs = {
loadingImage: ‘src/loading.gif’,
closeImage: ‘src/closelabel.png’
};
$(‘a[rel*=facebook]’).facebox(configs);
$(‘a#tal’).facebox(configs);
17. Use convenções
Do
var $menu = jQuery(‘#menu’);
var i = 0;
const SOME = 'value';
// ou
var SOME = 'value';
function DragonModel() {
}
DragonModel.prototype.breathesFire = function() {
};
var DragonController = {
breathesFire: function() {
}
};
var _someLocalVarPrivate = !!false;
21. Lembre-se, é JS
Don’t
var something = '';
var ret = '';
if (something) {
ret = something;
} else {
ret = 'another thing';
}
console.log(ret);
22. Lembre-se, é JS
Don’t
var something = 'some';
var ret = something ? something : 'another thing';
console.log(ret);
23. Lembre-se, é JS
Do
var something = '';
var ret = something || 'another thing';
console.log(ret);
24. Lembre-se, é JS
Do
var jane = '';
jane = 'joe';
console.log(!jane); //invertendo - FALSE
jane = '';
console.log(!jane); //invertendo - TRUE
jane = '';
console.log(!!jane); //convertendo para booleano - FALSE
jane = 'joe';
console.log(!!jane); //convertendo para booleano - TRUE
25. Hash Map
Do
var map = {
'blue': '#2E68AB',
'red': '#DB2525',
'gray': '#666',
'green': '#3BDB25'
}
console.log(map.blue);
console.log(map.red);
26. Evite
Don’t
* Funções com muitas linhas
* Funções que fazem muitas coisas
* Funções sem retorno
* Efeitos colaterais
* Criar coisas dentro de loops
* return false; para cancelar eventos
* Outros $ ao mesmo tempo
27. Faça
Do
* jshint
* Testes unitários
* Relatório de cobertura
* Relatório de complexidade
* Animações com CSS
* Funções pequenas
* Use a última versão
* $.extend
28. jslint/jshint
O que eu não falei antes, provavelmente
o jslint ou jshint resolve. Use.
Padronização de aspas
Pontos e vírgulas
Variáveis não usadas
Variáveis não declaradas
…