JS Tips

creditcard.gif
http://res.cloudinary.com/rodolfo/image/upload/v1444685389/creidcard.mov_di7qsy.gif

Transcript

1. JS TIPS @rodolfospalenza
3. NA ENTREVISTA... SABE JS? ME VIRO BEM!
5. BACKEND FRONTEND
6. BACKEND FRONTEND
7. NECESSIDADE
8. https://github.com/airbnb/javascript
9. ~ $ jshint one_page_checkout.js one_page_checkout.js|56 col 4 warning 33| Missing semicolon. one_page_checkout.js|60 col 4 warning 33| Missing semicolon. one_page_checkout.js|64 col 4 warning 33| Missing semicolon. one_page_checkout.js|70 col 4 warning 33| Missing semicolon. one_page_checkout.js|73 col 26 warning 33| Missing semicolon. one_page_checkout.js|75 col 4 warning 33| Missing semicolon. one_page_checkout.js|82 col 4 warning 33| Missing semicolon. http://jshint.com/
10. TIPOS PRIMITIVOS number string boolean null undefined
11. O RESTO... objects
12. JS é uma linguagem orientada a objetos
13. JS é uma linguagem orientada a objetos SEM CLASSES
15. GLOBAIS
16. MINIMIZANDO GLOBAIS myGlobal = 'hello'; // antipattern console.log(myGlobal); // 'hello’ console.log(window.myGlobal); // 'hello’ console.log(window["myGlobal"]); // 'hello’ console.log(this.myGlobal); // 'hello’
17. GLOBAIS IMPLÍCITAS function sum(x, y) { // antipattern result = x + y; return result; } console.log(sum(1, 2)) // 3 console.log(result) // 3
18. function sum(x, y) { var result = x + y; return result; } console.log(sum(1, 2)) // 3 console.log(result) // undefined MINIMIZANDO GLOBAIS
19. OBJETOS
20. OBJETO CHAVE / VALOR HASH MUTÁVEIS
21. OBJETO var obj = { first_name: 'Rodolfo', last_name: 'Spalenza', full_name: function() { return this.first_name + ' ' + this.last_name; } }; console.log(obj.first_name); // Rodolfo console.log(obj.full_name()); // Rodolfo Spalenza
22. OBJETO var obj = { first_name: 'Rodolfo', last_name: 'Spalenza', full_name: function() { return this.first_name + ' ' + this.last_name; } }; obj.birth_year = 1988; console.log(obj.birth_year); // 1988 delete obj.birth_year; console.log(obj.birth_year); // undefined
23. OBJETO LITERAL var obj = { first_name: 'Rodolfo' };
24. OBJETO COM CONSTRUTOR var obj = new Object(); obj.first_name = 'Rodolfo'; console.log(obj.first_name); // 'Rodolfo'
25. OBJETO COM CONSTRUTOR var obj = new Object('Rodolfo'); console.log(obj.constructor === String); // true console.log(typeof obj.substring); // function
26. OBJETO COM CONSTRUTOR var obj = new Object('Rodolfo'); console.log(obj.constructor === String); // true console.log(typeof obj.substring); // function PODE LEVAR A RESULTADOS INESPERADOS
27. PREFIRA OBJETOS LITERAIS
28. FUNÇÕES CONSTRUTORAS var Person = function(name) { this.name = name; this.say = function() { return 'Hello! I am ' + this.name; }; }; var rodolfo = new Person('Rodolfo'); var rafael = new Person('Rafael'); console.log(rodolfo.say()); // 'Rodolfo' console.log(rafael.say()); // 'Rafael'
29. FUNÇÕES CONSTRUTORAS var Person = function(name) { // cria um novo objeto usando o objeto literal // var this = {}; // adiciona propriedades e métodos ao this this.name = name; this.say = function() { return 'Hello! I am ' + this.name; }; // retorna this };
30. FUNÇÕES CONSTRUTORAS var Person = function(name) { this.name = name; }; Person.prototype.say = function() { return 'Hello! I am ' + this.name; }; var rodolfo = new Person('Rodolfo'); var rafael = new Person('Rafael'); console.log(rodolfo.say()); // 'Rodolfo' console.log(rafael.say()); // 'Rafael'
31. PROBLEMA DO NEW var Person = function(name) { this.name = name; }; Person('Rodolfo'); console.log(name); // 'Rodolfo' console.log(window.name); // 'Rodolfo'
32. CONSTRUTOR AUTOINVOCÁVEL function Person(first_name, last_name) { this.first_name = first_name; this.last_name = last_name; return this; }; var person = Person('Rodolfo', 'Spalenza'); console.log(first_name); // 'Rodolfo' console.log(window.first_name); // 'Rodolfo' console.log(person.first_name); // 'Rodolfo'
33. CONSTRUTOR AUTOINVOCÁVEL function Person(first_name, last_name) { if (!(this instanceof Person)) { return new Person(first_name, last_name); } this.first_name = first_name; this.last_name = last_name; return this; }; var person = Person('Rodolfo', 'Spalenza'); console.log(first_name); // first_name is not defined console.log(window.first_name); // undefined console.log(person.first_name); // 'Rodolfo'
34. FUNÇÕES
35. FUNÇÕES NOMEADAS var sum = function sum(a, b) { return a + b; }; console.log(sum.name); // ’sum’
36. FUNÇÕES ANÔNIMAS var sum = function(a, b) { return a + b; }; console.log(sum.name); // ’’
37. DECLARAÇÕES DE FUNÇÕES function sum(a, b) { return a + b; } console.log(sum.name); // 'sum’
38. FUNÇÕES IMEDIATAS var weekdayMsg = (function(date) { var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], msg = 'Weekday: ' + days[date.getDay()]; console.log(msg); return msg; }(new Date())); // Weekday: Friday console.log(weekdayMsg); // Weekday: Friday
39. CALLBACKS var plus = function(a, b) { return a * b; }; var operation = function(a, b, callback) { if (typeof callback === 'function') { return callback(a, b); } else { return a + b; } }; operation(1, 2); // 3 operation(1, 2, plus); // 2
40. NAMESPACES
41. JS não possui namespaces nativamente
42. NAMESPACES // 5 GLOBAIS // contrutores function Parent() {} function Child() {} // variáveis var someVar = 1; // objetos var firstModule = {}; firstModule.data = { a: 1, b: 2 }; var secondModule = {};
43. NAMESPACES // 1 GLOBAL // objeto global var SMARTSYSTEM = {}; // contrutores SMARTSYSTEM.Parent = function() {}; SMARTSYSTEM.Child = function() {}; // variáveis SMARTSYSTEM.someVar = 1; // container de objetos SMARTSYSTEM.modules = {}; // objetos SMARTSYSTEM.modules.firstModule = {}; SMARTSYSTEM.modules.firstModule.data = { a: 1, b: 2 }; SMARTSYSTEM.modules.secondModule = {};
44. NAMESPACES // namespace de propósito geral var SMARTSYSTEM = SMARTSYSTEM || {};
45. MEMBROS PRIVADOS
46. PÚBLICOS TODOS OS MEMBROS DE UM OBJETO SÃO
47. MEMBROS PRIVADOS var person = { first_name: 'Rodolfo', last_name: 'Spalenza', full_name: function() { return this.first_name + ' ' + this.last_name; } }; console.log(person.first_name); // 'Rodolfo' console.log(person.full_name()); // 'Rodolfo Spalenza’
48. MEMBROS PRIVADOS function Person() { this.first_name = 'Rodolfo'; this.last_name = 'Spalenza'; this.full_name = function() { return this.first_name + ' ' + this.last_name; }; } var person = new Person(); console.log(person.first_name); // 'Rodolfo' console.log(person.full_name()); // 'Rodolfo Spalenza'
49. MEMBROS PRIVADOS - CLOSURE function Person() { var first_name = 'Rodolfo'; var last_name = 'Spalenza'; this.full_name = function() { return first_name + ' ' + last_name; }; } var person = new Person(); console.log(person.first_name); // undefined console.log(person.full_name()); // 'Rodolfo Spalenza'
50. OBJETOS LITERAIS E PRIVACIDADE var person = (function() { var first_name = 'Rodolfo'; var last_name = 'Spalenza'; return { full_name: function() { return first_name + ' ' + last_name; } }; }()); console.log(person.first_name); // undefined console.log(person.full_name()); // 'Rodolfo Spalenza'
51. PADRÃO MODULO var SMARTSYSTEM = SMARTSYSTEM || {}; SMARTSYSTEM.CreditCard = (function(globalRegex) { var globalRegex = globalRegex, masterRegex = '', visaRegex = ''; function isValid(number) {}; function brand(number) {}; return { isValid: isValid, brand: brand }; }(globalRegex)); console.log(SMARTSYSTEM.CreditCard.isValid('4111111111111111')); // true
52. PADRÃO MODULO var SMARTSYSTEM = SMARTSYSTEM || {}; SMARTSYSTEM.CreditCard = (function(globalRegex) { var public = {}, mainRegex = globalRegex, masterRegex = '', visaRegex = ''; public.isValid = function(number) {}; public.brand = function(number) {}; return public; }(globalRegex)); console.log(SMARTSYSTEM.CreditCard.isValid('4111111111111111')); // true
53. MODULOS CRIANDO CONSTRUTORES SMARTSYSTEM.CreditCard = (function(globalRegex) { var Constr, mainRegex = globalRegex, masterRegex = '', visaRegex = ''; Constr = function(n) { var number = n; function isValid() {} function brand() {} return { isValid: isValid, brand: brand }; }; return Constr; }(globalRegex));
54. MODULOS CRIANDO CONSTRUTORES var cc01 = new SMARTSYSTEM.CreditCard('4539496648379164'); var cc02 = new SMARTSYSTEM.CreditCard('5384319936559227'); console.log(cc01.brand()); // visa console.log(cc02.brand()); // master
55. JSON
56. JavaScript Object Notation FORMATO DE TRASFERÊNCIA DE DADOS
57. AJAX REQUEST $.ajax({ url: url, type: 'GET', dataType: 'json', data: { q: query }, error: function(data) {}, success: function(data) {} });
58. dataType: 'js' dataType: 'html'
59. FAÇA SEMPRE REQUEST JSON
60. http://handlebarsjs.com/
61. HANDLEBARS <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>V </script> <div id="box"></div> var source = $("#entry-template").html(); var template = Handlebars.compile(source); var context = { title: "My New Post", body: "My first post!" }; var html = template(context); $('#box').html(html);
62. HANDLEBARS <div id="box"> <div class="entry"> <h1>My New Post</h1> <div class="body"> My first post! </div> </div> </div>
63. DEFINIR NOME DE CLASSES <div class="smartsystem-credit-card"> </div> NÃO ALTERE OU REMOVA ESSA CLASSE POIS UM JS ESTÁ USANDO
64. EFEITOS DELEGUE EFEITOS PARA O CSS
65. EFEITOS $(’#box .brand').addClass('active'); $(’#box .brand').removeClass('active'); NÃO USE toggle, fade, etc
66. MEDIATOR
68. MEDIATOR var cc = new SMARTSYSTEM.CreditCard('4539496648379164'); var flag = cc.brand(); SMARTSYSTEM.Mediator.publish('credit-card:active', flag); ... SMARTSYSTEM.Mediator.subscribe('credit-card:active', function(flag) { var identification = '#credit-card .brand.' + flag; $(identification).addClass('active'); });
70. PLUGINS jQuery
71. PLUGINS jQuery (function($, Handlebars, Mediator) { $.fn.creditCard = function(options) { if (!this.length) { return; } var self = this, settings = { brandClass: 'brand', activeClass: 'active', afterChange: function(data) {} }; // initialize settings settings = $.extend({}, settings, options); $(self).on('change', settings.brandClass, function(event) {}); // ... }; })(jQuery, Handlebars, SMARTSYSTEM.Mediator);
72. PLUGINS jQuery $('#smartsystem-credit-card').creditCard({ brandClass: 'smartsystem-credit-card-brand', afterChange: function(data) { var cc = new SMARTSYSTEM.CreditCard(data), flag = cc.brand(); SMARTSYSTEM.Mediator.publish('credit-card:active', flag); } });
73. CONVENÇÕES
74. CONVENÇÕES single var indentação chaves espaço em branco nomeação
75. CONVERSÃO DE TIPO IMPÍCITO false == 0 // true false === 0 // false '' == 0 // true '' === 0 // false
76. CONVERSÃO DE TIPO IMPÍCITO sempre use os operadores === e !==
77. Number.parseInt(string[, radix]) parseInt("10") // 10 parseInt("08") // 8
78. Number.parseInt(string[, radix]) parseInt(”06") // 6 parseInt(”09") // 9 ECMAScript 5
79. Number.parseInt(string[, radix]) parseInt(”06") // 6 parseInt(”09") // 0 ECMAScript 3
80. Number.parseInt(string[, radix]) parseInt("06", 10) // 6 parseInt("09", 10) // 9
81. $(’#foo').data(’bar') <div id="smartsystem-box" data-foo="123e10"> </div> $('#smartsystem-box').data('foo'); // 1230000000000 $('#bloco-principal').attr('data-foo') // ’123e10’