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