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.
31
Embed
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
jQueryjQuery 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.
Use event delegateDon’t
jQuery(‘#menu a’).on(‘click’, function() { // do something});
Use event delegateDo
jQuery(‘#menu’).on(‘click’, ‘a’, function() { // do something});
Divida os listenersDon’t
jQuery(‘#menu’).on(‘click’, ‘a’, function() { // do something // do another thing})
Divida os listenersAlmost
jQuery(‘#menu’).on(‘click’, ‘a’, function() { // do something});jQuery(‘#menu’).on(‘click’, ‘a’, function() { // do another thing})
Divida os listenersDo
var $menu = jQuery(‘#menu’);$menu.on(‘click’, ‘a’, function() { // do something});$menu.on(‘click’, ‘a’, function() { // do another thing})
Evite ir no DOMDon’t
var $menu = jQuery(‘#menu’);$menu.on(‘click’, ‘a’, function() { $this.parent(‘li’)… $this.parent(‘li’).find(‘span’)…});
Evite ir no DOMDo
var $menu = jQuery(‘#menu’);$menu.on(‘click’, ‘a’, function() { var $parent = $this.parent(‘li’);
$parent… $parent.find(‘span’)…});
Evite ir no DOMDo
var $menu = jQuery(‘#menu’);$menu.on(‘click’, ‘a’, function() { var $this = $(this);
* 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
FaçaDo
* 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
jslint/jshintO que eu não falei antes, provavelmente
o jslint ou jshint resolve. Use.
Padronização de aspasPontos e vírgulasVariáveis não usadasVariáveis não declaradas…
Como escrever um bom código jQuery ?
Sabendo escrever bom JavaScript
Dúvidas ?
Me chama por aí… acho que não dá tempo de responder aqui na frente