Javascript Ilegível

Uma abordagem sobre padrões de desenvolvimento javascript: estilo, organização, legibilidade de código.

1. Javascript Ilegívl @rafael_sps
2. Quem? Desenvolvedor web no Grupo RBS
5. /* Comentários */ Não precisa ser o “capitão óbvio”
6. // get a specific user getUser: function (id) { // código aqui }
7. Porém... … nem todo mundo enxerga a Matrix!
8. 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); }
9. “É 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/
10. Variáveis / Métodos “Mais curto não é sempre melhor” (speaking Javascript) regularUser melhor que rglrUsr
11. Conciso & Claro
12. Booleanos isPlaying(); isNumber(); hasListener;
13. Funções loadData(); render(); parse();
14. Coleções users; companies; petList;
15. Event handlers onBtnClick; onKeyUp; onMouseOver;
16. 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);
18. Namespacing Nomear coisas não é fácil... http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/ http://michaux.ca/articles/javascript-namespacing
20. // Globais Everywhere var User = function () {} var Company = function () {} // Tudo certo para dar errado...
21. // Uma global para a todos governar var MYGLOBAL = MYGLOBAL || {}; MYGLOBAL.User = {}; MYGLOBAL.User.Admin = function () {}; MYGLOBAL.Company = function () {};
22. Módulos http://addyosmani.com/writing-modular-js/ http://www.infoq.com/br/presentations/modularizacao-em-javascript
23. AMD (Asyncronous Module Definition) RequireJS é a implementação mais popular http://tomdale.net/2012/01/amd-is-not-the-answer/
24. 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; });
25. define([], function () { var Battery = function () { this.init = function (level) { this.level = level; } } return Battery; });
26. 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 });
27. CommonJS Sistema de módulos do Node.js O Browserify implementa no browser
28. browserify main.js -o bundle.js
29. var Battery = function () { this.init = function (level) { this.level = level; } } module.exports = Battery;
30. var Robot = function () { this.init = function (battery) { this.battery = battery; } this.charge = function () { this.battery.level++; console.log(this.battery.level); } } module.exports = Robot;
31. 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
32. Harmony Especificação do ES6 http://es6rocks.com/2014/10/es6-modules-today-with-6to5/
33. var Battery = function () { this.init = function (level) { this.level = level; } } export { Battery }
34. var Robot = function () { this.init = function (battery) { this.battery = battery; } this.charge = function () { this.battery.level++; console.log(this.battery.level); } } export { Robot }
35. 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();
36. S.O.L.I.D Princípios introduzidos pelo “Uncle Bob”
37. 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/
39. 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); },
40. 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)); } } }
41. Muitas responsabilidades Hora de corrigir a lambança refatorar
42. 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)); } } }
43. Código difícil de ler vira problema do projeto, não é só teu ou do colega
44. Sempre pense na pessoa que vai dar manutenção no seu código! @rafael_sps github.com/rssilva