javascript ilegível
TRANSCRIPT
Javascript Ilegívl@rafael_sps
Quem?
Desenvolvedor web
no Grupo RBS
/* Comentários */
Não precisa ser o “capitão óbvio”
// get a specific usergetUser: function (id) { // código aqui}
Porém...… nem todo mundo enxerga a Matrix!
function validate (str) {
return /^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/.test(str);
}
“É melhor não ter comentários e/ou documentação do que tê-los de forma
ruim/errônea/desatualizada”
http://blog.millermedeiros.com/always-comment-weird-things/
Variáveis / Métodos“Mais curto não é sempre melhor”
(speaking Javascript)
regularUser melhor que rglrUsr
Conciso &
Claro
BooleanosisPlaying();isNumber();hasListener;
FunçõesloadData();render();parse();
Coleçõesusers;companies;petList;
Event handlersonBtnClick;onKeyUp;onMouseOver;
var anonymBtn = document.querySelector('#anonym');var declaredBtn = document.querySelector('#declared');
var myHandler = function () { console.log('declared'); var a = 1 + b;}
anonymBtn.addEventListener('click', function () { console.log('anonym'); var a = 1 + b;});
declaredBtn.addEventListener('click', myHandler, false);
NamespacingNomear coisas não é fácil...
http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/
http://michaux.ca/articles/javascript-namespacing
// Globais Everywhere
var User = function () {}
var Company = function () {}
// Tudo certo para dar errado...
// Uma global para a todos governar
var MYGLOBAL = MYGLOBAL || {};
MYGLOBAL.User = {};
MYGLOBAL.User.Admin = function () {};
MYGLOBAL.Company = function () {};
Móduloshttp://addyosmani.com/writing-modular-js/
http://www.infoq.com/br/presentations/modularizacao-em-javascript
AMD (Asyncronous Module Definition)
RequireJS é a implementação mais popular
http://tomdale.net/2012/01/amd-is-not-the-answer/
define([],
function () {
var Robot = function () {
this.init = function (battery) {
this.battery = battery;
}
this.charge = function () {
this.battery.level++;
console.log(this.battery.level)
}
}
return Robot;
});
define([],
function () {
var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
return Battery;
});
require(['battery.js', 'robot.js'], function (Source, Robot) {
var source = new Source();
source.init(80);
var robot = new Robot();
robot.init(source);
robot.charge(); // 81
robot.charge(); // 82
});
CommonJSSistema de módulos do Node.js
O Browserify implementa no browser
browserify main.js -o bundle.js
var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
module.exports = Battery;
var Robot = function () {
this.init = function (battery) {
this.battery = battery;
}
this.charge = function () {
this.battery.level++;
console.log(this.battery.level);
}
}
module.exports = Robot;
var Battery = require('./battery.js');
var Robot = require('./robot.js');
var source = new Battery();
source.init(80);
var robot = new Robot();
robot.init(source);
robot.charge(); // 81
robot.charge(); // 82
Harmony
Especificação do ES6
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/
var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
export { Battery }
var Robot = function () {
this.init = function (battery) {
this.battery = battery;
}
this.charge = function () {
this.battery.level++;
console.log(this.battery.level);
}
}
export { Robot }
import { Battery } from 'battery.js';
import { Robot } from 'robot.js';
var source = new Battery();
source.init(80);
var robot = new Robot();
robot.init(source);
robot.charge();
robot.charge();
S.O.L.I.DPrincípios introduzidos pelo
“Uncle Bob”
Single Responsability Principle
“Uma classe/módulo deve ter somente uma razão para mudar”
http://freshbrewedcode.com/derekgreer/2011/12/08/solid-javascript-single-responsibility-principle/
var SearchWidget = function () {
return {
init: function (el) {
this.el = el;
this.input = this.el.find('.search-input');
},
onData: function (data) {
this.renderList(data);
},
renderList: function (users) {
var str = '';
users.forEach(function (user) {
str += '<li>' + user.name + '</li>';
});
$('.userList').html(str);
},
get: function (query) {
$.ajax({
url: 'users.json',
data: {
query: query
}
}).done(this.onData.bind(this));
},
bindClick: function () {
$('.go-button').on('click', function () {
var query = this.input.val();
this.get(query);
}.bind(this));
}
}
}
Muitas responsabilidades
Hora de corrigir a lambança refatorar
var SearchWidget = function () {
return {
init: function (el) {
this.el = el;
this.input = this.el.find('.search-input');
},
bindClick: function (callback) {
this.el.find('.go-button').on('click', function () {
var query = this.input.val();
callback(query);
}.bind(this));
}
}
}
Código difícil de ler vira problema do projeto, não é só teu ou do colega
Sempre pense na pessoa que vai dar manutenção no seu código!
@rafael_spsgithub.com/rssilva