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.

2. William Bruno
Desenvolvedor NodeJS
http://wbruno.com.br/
http://github.com/wbruno
@wbrunom

3. Boas Práticas
em
JavaScriptQuery

4. Boas Práticas
em
JavaScriptQuery
JavaQueryScript

5. Boas Práticas
em
JavaQueryScript
JavaScriptQuery
jScriptQuery

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.

7. Use event delegate
Don’t
jQuery(‘#menu a’).on(‘click’, function() {
// do something
});

8. Use event delegate
Do
jQuery(‘#menu’).on(‘click’, ‘a’, function()
{
// do something
});

9. Divida os listeners
Don’t
jQuery(‘#menu’).on(‘click’, ‘a’, function()
{
// do something
// do another thing
})

10. Divida os listeners
Almost
jQuery(‘#menu’).on(‘click’, ‘a’, function() {
// do something
});
jQuery(‘#menu’).on(‘click’, ‘a’, function() {
// do another thing
})

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…
});

15. DRY
Don’t
$(‘a[rel*=facebook]’).facebox({
loadingImage: ‘src/loading.gif’,
closeImage: ‘src/closelabel.png’
});
$(‘a#tal’).facebox({
loadingImage: ‘src/loading.gif’,
closeImage: ‘src/closelabel.png’
});

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;

18. Use Promises
Don’t
$.ajax({
url: ‘/stormtroppers’,
type: ‘GET’,
success: function(data) {
console.log(data);
}
});

19. Use Promises
Do
$.ajax({
url: ‘/stormtroppers’,
type: ‘GET’,
})
.then(function(data) {
console.log(data);
})
.catch(function(err) {
console.log(err);
});

20. Use Promises
Sério, use…

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
…

29. Como escrever um
bom código jQuery ?

30. Sabendo escrever
bom JavaScript

31. Dúvidas ?
Me chama por aí… acho que não dá tempo de
responder aqui na frente