7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha

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 Bruno
Desenvolvedor 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
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.

Use event delegate
Don’t
jQuery(‘#menu a’).on(‘click’, function() {

// do something

});

Use event delegate
Do
jQuery(‘#menu’).on(‘click’, ‘a’, function()
{

// do something

});

Divida os listeners
Don’t
jQuery(‘#menu’).on(‘click’, ‘a’, function()
{

// do something

// do another thing

})

Divida os listeners
Almost
jQuery(‘#menu’).on(‘click’, ‘a’, function() {

// do something

});

jQuery(‘#menu’).on(‘click’, ‘a’, function() {

// do another thing

})

Divida os listeners
Do
var $menu = jQuery(‘#menu’);

$menu.on(‘click’, ‘a’, function() {

// do something

});


// do another thing

})

Evite ir no DOM
Don’t


$this.parent(‘li’)…

$this.parent(‘li’).ﬁnd(‘span’)…

});

Evite ir no DOM
Do


var $parent = $this.parent(‘li’);

$parent…

$parent.ﬁnd(‘span’)…

});

Evite ir no DOM
Do


var $this = $(this);

$this…

$this…

});

DRY
Don’t
$(‘a[rel*=facebook]’).facebox({

loadingImage: ‘src/loading.gif’,

closeImage: ‘src/closelabel.png’

});

$(‘a#tal’).facebox({



});

DRY
Do
var configs = {



};

$(‘a[rel*=facebook]’).facebox(configs);

$(‘a#tal’).facebox(configs);

Use convenções
Do

var i = 0;

const SOME = 'value';

// ou

var SOME = 'value';

function DragonModel() {

}

DragonModel.prototype.breathesFire = function() {

};

var DragonController = {

breathesFire: function() {

}

};

var _someLocalVarPrivate = !!false;

Use Promises
Don’t
$.ajax({

url: ‘/stormtroppers’,

type: ‘GET’,

success: function(data) {

console.log(data);

}

});

Use Promises
Do
$.ajax({

url: ‘/stormtroppers’,

type: ‘GET’,

})

.then(function(data) {

console.log(data);

})

.catch(function(err) {

console.log(err);

});

Lembre-se, é JS
Don’t
var something = '';

var ret = '';

if (something) {

ret = something;

} else {

ret = 'another thing';

}

console.log(ret);

Lembre-se, é JS
Don’t
var something = 'some';

var ret = something ? something : 'another thing';

console.log(ret);

Lembre-se, é JS
Do
var something = '';

var ret = something || 'another thing';

console.log(ret);

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

Hash Map
Do
var map = {

'blue': '#2E68AB',

'red': '#DB2525',

'gray': '#666',

'green': '#3BDB25'

}

console.log(map.blue);

console.log(map.red);

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

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

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

…

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

7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a 7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha (20)

Mais de iMasters (20)

Último (11)

7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha