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.
William BrunoDesenvolvedor NodeJS
http://wbruno.com.br/ http://github.com/wbruno @wbrunom
Boas Práticas em
JavaScriptQuery
Boas Práticas em
JavaScriptQuery JavaQueryScript
Boas Práticas em
JavaQueryScript JavaScriptQuery
jScriptQuery
Boas Práticas em
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);
$this… $this…});
DRYDon’t
$(‘a[rel*=facebook]’).facebox({ loadingImage: ‘src/loading.gif’, closeImage: ‘src/closelabel.png’});$(‘a#tal’).facebox({ loadingImage: ‘src/loading.gif’, closeImage: ‘src/closelabel.png’});
DRYDo
var configs = { loadingImage: ‘src/loading.gif’, closeImage: ‘src/closelabel.png’};$(‘a[rel*=facebook]’).facebox(configs);$(‘a#tal’).facebox(configs);
Use convençõesDo
var $menu = jQuery(‘#menu’);var i = 0;
const SOME = 'value';// ouvar SOME = 'value';
function DragonModel() {}DragonModel.prototype.breathesFire = function() {};
var DragonController = { breathesFire: function() {
}};
var _someLocalVarPrivate = !!false;
Use PromisesDon’t
$.ajax({ url: ‘/stormtroppers’, type: ‘GET’, success: function(data) { console.log(data); }});
Use PromisesDo
$.ajax({ url: ‘/stormtroppers’, type: ‘GET’,}).then(function(data) { console.log(data);}).catch(function(err) { console.log(err);});
Use PromisesSério, use…
Lembre-se, é JSDon’t
var something = '';var ret = '';
if (something) { ret = something;} else { ret = 'another thing';}
console.log(ret);
Lembre-se, é JSDon’t
var something = 'some';var ret = something ? something : 'another thing';
console.log(ret);
Lembre-se, é JSDo
var something = '';var ret = something || 'another thing';
console.log(ret);
Lembre-se, é JSDo
var jane = '';
jane = 'joe';console.log(!jane); //invertendo - FALSEjane = '';console.log(!jane); //invertendo - TRUE
jane = '';console.log(!!jane); //convertendo para booleano - FALSEjane = 'joe';console.log(!!jane); //convertendo para booleano - TRUE
Hash MapDo
var map = { 'blue': '#2E68AB', 'red': '#DB2525', 'gray': '#666', 'green': '#3BDB25'}
console.log(map.blue);console.log(map.red);
EviteDon’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
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