Modularização de código JS

Transcript

1. MODULARIZAÇÃO DE CÓDIGO JS @macedorafael
2. RAFAEL MACEDO github.com/macedo twitter.com/macedorafael
7. CODE MINER
8. CODE MINER become@codeminer42.com
10. http://github.com
11. 6 dos 10 projetos mais populares
12. 560k repositórios criados em 2014* *até o momento 10/10/2014
13. JS deixou de ser a segunda linguagem a algum tempo
14. “JS may look familiar…
15. … but it really isn’t. Take your time to get to know it.” @goloroden
17. application.js app/assets/javascripts/
18. //= require modernizr
 //= require jquery
 //= require jquery.validate
 //= require jquery.validate.additional-methods
 //= require jquery_ujs
 //= require fancybox
 //= require_self
 //= require jquery.ui.datepicker
 //= require jquery.ui.draggable
 //= require underscore
 //= require jquery.tokeninput
 //= require application/browser_selector
 //= require application/jQuery_gtSlider
 //= require application/jQuery_gtSelect
 //= require application/bxslider
 //= require application/jquery.form
 //= require application/validations
 //= require jquery_nested_form
 //= require ckeditor/init
 //= require ckeditor/config
 //= require application/jquery.nicescroll
 //= require custome_js/user_journey
 //= require application/album_images
 //= require application/home
 //= require application/user
 //= require jquery.rating
 //= require jquery.imagedrag.min
 //= require slider/jssor.core
 //= require slider/jssor.slider
 //= require slider/jssor.utils
 //= require scroll_paginate
 //= require destination
 //= require magicselection
 //= require jquery.quicksearch
 //= require jquery.blockUI
 
 $(document).on('click','.star',function(){
 $(this).parents('form:first').submit();
 });
 
 
 $(document).ready(function() {
 
 $('#rateform :radio.star').rating({cancel: 'Cancel', cancelValue: '0'}); 
 $("a.fancybox").fancybox({
 'transitionIn' : 'none',
 'transitionOut' : 'none',
 'autoScale' : false,
 'type' : 'iframe',

19. allowfullscreen : 'true',
 allowscriptaccess : 'always',
 closeBtn : false
 }).trigger('click');
 
 $("#from_date").datepicker({
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true
 });
 
 $("#to_date").datepicker({
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true
 });
 });
 
 $(document).on('click', '.bt-deletar', function(){
 $(this).parents('li').remove();
 });
 
 // Hover box editar perfil
 function hover_perfil_box() {
 if ($('.lista-lugares').size() > 0) {
 $(".lista-lugares li").on('mouseover',function (e){
 e.preventDefault();
 $(this).children(".details").stop().animate({ "top": "94px" }, "fast" );
 });
 
 $(".lista-lugares li").on('mouseleave',function (e){
 e.preventDefault();
 $(this).children(".details").stop().animate({ "top": "120px" }, "fast" );
 });
 }
 }
 
 $(document).on('click', '.unblock_user', function(){
 $(this).parents('li').addClass('none');
 });
 
 $(document).on('click','a.circle, div.msg-content-box',function(){
 $(this).parents('div.msg-content-box').removeClass('read');
 $(this).removeClass('read');
 });
 
 $(document).on('click','a.folder, a.del',function(){
 id = $(this).parents('div.msg-content-box').prop('id')
 $("div[id="+id+"]").fadeOut("slow")
 $.fancybox.close();

20. allowfullscreen : 'true',
 allowscriptaccess : 'always',
 closeBtn : false
 }).trigger('click');
 
 $("#from_date").datepicker({
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true
 });
 
 $("#to_date").datepicker({
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true
 });
 });
 
 $(document).on('click', '.bt-deletar', function(){
 $(this).parents('li').remove();
 });
 
 // Hover box editar perfil
 function hover_perfil_box() {
 if ($('.lista-lugares').size() > 0) {
 $(".lista-lugares li").on('mouseover',function (e){
 e.preventDefault();
 $(this).children(".details").stop().animate({ "top": "94px" }, "fast" );
 });
 
 $(".lista-lugares li").on('mouseleave',function (e){
 e.preventDefault();
 $(this).children(".details").stop().animate({ "top": "120px" }, "fast" );
 });
 }
 }
 
 $(document).on('click', '.unblock_user', function(){
 $(this).parents('li').addClass('none');
 });
 
 $(document).on('click','a.circle, div.msg-content-box',function(){
 $(this).parents('div.msg-content-box').removeClass('read');
 $(this).removeClass('read');
 });
 
 $(document).on('click','a.folder, a.del',function(){
 id = $(this).parents('div.msg-content-box').prop('id')
 $("div[id="+id+"]").fadeOut("slow")
 $.fancybox.close();
 1500 LOC
21. allowfullscreen : 'true',
 allowscriptaccess : 'always',
 closeBtn : false
 }).trigger('click');
 
 $("#from_date").datepicker({
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true
 });
 
 $("#to_date").datepicker({
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true
 });
 });
 
 $(document).on('click', '.bt-deletar', function(){
 $(this).parents('li').remove();
 });
 
 // Hover box editar perfil
 function hover_perfil_box() {
 if ($('.lista-lugares').size() > 0) {
 $(".lista-lugares li").on('mouseover',function (e){
 e.preventDefault();
 $(this).children(".details").stop().animate({ "top": "94px" }, "fast" );
 });
 
 $(".lista-lugares li").on('mouseleave',function (e){
 e.preventDefault();
 $(this).children(".details").stop().animate({ "top": "120px" }, "fast" );
 });
 }
 }
 
 $(document).on('click', '.unblock_user', function(){
 $(this).parents('li').addClass('none');
 });
 
 $(document).on('click','a.circle, div.msg-content-box',function(){
 $(this).parents('div.msg-content-box').removeClass('read');
 $(this).removeClass('read');
 });
 
 $(document).on('click','a.folder, a.del',function(){
 id = $(this).parents('div.msg-content-box').prop('id')
 $("div[id="+id+"]").fadeOut("slow")
 $.fancybox.close();
 1500 LOC
25. 3k
26. 15k 3k
27. ¯\_(ツ)_/¯
28. Modularização
29. • Redução de complexidade • Encapsulamento • Manutenabilidade ???
39. http://todomvc.com http://todomvc.com
40. MVC
41. Model Gerencimento de dados, persistência
42. View UX, renderiza templates com os dados do modelo, eventos
43. Controller Gerencia eventos entre models e views
46. http://bit.ly/1de5qfT
47. module revealing module mediator prototype …
48. module pattern
49. (function() {
 // your code here
 })();
50. var Module = (function() {
 // your code here
 })();
51. var Module = (function() {
 
 var privateAttribute = '';
 
 var privateMethod = function() {
 /* ... */
 };
 })();
52. var Module = (function() {
 
 var privateAttribute = '';
 
 var privateMethod = function() {
 /* ... */
 };
 })();
53. var Module = (function() {
 
 var privateAttribute = '';
 
 var privateMethod = function() {
 /* ... */
 };
 
 return {
 publicMethod: function() {
 /* ... */
 }
 }
 })();
54. var Module = (function() {
 
 var privateAttribute = '';
 
 var privateMethod = function() {
 /* ... */
 };
 
 return {
 publicMethod: function() {
 /* ... */
 }
 }
 })();
55. var Module = (function() {
 
 var privateAttribute = '';
 
 var privateMethod = function() {
 /* ... */
 };
 
 return {
 publicMethod: function() {
 /* ... */
 }
 }
 })();
56. var Module = (function() {
 
 var privateAttribute = '';
 
 var privateMethod = function() {
 /* ... */
 };
 
 return {
 publicMethod: function() {
 /* ... */
 }
 }
 })();
57. var QuestionsList = (function() {
 var collection = [1, 2, 3, 4, 5]
 , currentIndex = 0;
 
 return {
 current: function() {
 var i = currentIndex % collection.length;
 return 'Question: ' + collection[i];
 },
 
 next: function() {
 currentIndex += 1;
 },
 
 prev: function() {
 currentIndex -= 1;
 }
 }
 })();
58. var QuestionsList = (function() {
 var collection = [1, 2, 3, 4, 5]
 , currentIndex = 0;
 
 return {
 current: function() {
 var i = currentIndex % collection.length;
 return 'Question: ' + collection[i];
 },
 
 next: function() {
 currentIndex += 1;
 },
 
 prev: function() {
 currentIndex -= 1;
 }
 }
 })();
59. var QuestionsList = (function() {
 var collection = [1, 2, 3, 4, 5]
 , currentIndex = 0;
 
 return {
 current: function() {
 var i = currentIndex % collection.length;
 return 'Question: ' + collection[i];
 },
 
 next: function() {
 currentIndex += 1;
 },
 
 prev: function() {
 currentIndex -= 1;
 }
 }
 })();
61. revealing module pattern
62. var QuestionsList = (function() {
 var collection = [1, 2, 3, 4, 5]
 , currentIndex = 0;
 
 function current() {
 var i = currentIndex % collection.length;
 return 'Question: ' + collection[i];
 }
 
 function next() {
 currentIndex += 1;
 return current();
 }
 
 function prev() {
 currentIndex -= 1;
 }
 
 return {
 current: current,
 next: next,
 prev: prev
 }
 })();
63. var QuestionsList = (function() {
 var collection = [1, 2, 3, 4, 5]
 , currentIndex = 0;
 
 function current() {
 var i = currentIndex % collection.length;
 return 'Question: ' + collection[i];
 }
 
 function next() {
 currentIndex += 1;
 return current();
 }
 
 function prev() {
 currentIndex -= 1;
 }
 
 return {
 current: current,
 next: next,
 prev: prev
 }
 })();
64. var QuestionsList = (function() {
 var collection = [1, 2, 3, 4, 5]
 , currentIndex = 0;
 
 function current() {
 var i = currentIndex % collection.length;
 return 'Question: ' + collection[i];
 }
 
 function next() {
 currentIndex += 1;
 return current();
 }
 
 function prev() {
 currentIndex -= 1;
 }
 
 return {
 current: current,
 next: next,
 prev: prev
 }
 })();
65. var QuestionsList = (function() {
 var collection = [1, 2, 3, 4, 5]
 , currentIndex = 0;
 
 function current() {
 var i = currentIndex % collection.length;
 return 'Question: ' + collection[i];
 }
 
 function next() {
 currentIndex += 1;
 return current();
 }
 
 function prev() {
 currentIndex -= 1;
 }
 
 return {
 current: current,
 next: next,
 prev: prev
 }
 })();
66. var QuestionsList = (function() {
 
 ...
 
 function _getIndex() {
 return currentIndex % collection.length;
 }
 
 function _incrementIndex() {
 currentIndex += 1;
 }
 
 function current() {
 return 'Question: ' + collection[_getIndex()];
 }
 
 function next() {
 _incrementIndex();
 return current();
 }
 
 return {
 current: current,
 next: next
 }
 })();
67. var QuestionsList = (function() {
 
 ...
 
 function _getIndex() {
 return currentIndex % collection.length;
 }
 
 function _incrementIndex() {
 currentIndex += 1;
 }
 
 function current() {
 return 'Question: ' + collection[_getIndex()];
 }
 
 function next() {
 _incrementIndex();
 return current();
 }
 
 return {
 current: current,
 next: next
 }
 })();
68. var QuestionsList = (function() {
 
 ...
 
 function _getIndex() {
 return currentIndex % collection.length;
 }
 
 function _incrementIndex() {
 currentIndex += 1;
 }
 
 function current() {
 return 'Question: ' + collection[_getIndex()];
 }
 
 function next() {
 _incrementIndex();
 return current();
 }
 
 return {
 current: current,
 next: next
 }
 })();
69. Object { current: function, next: function } QuestionsList
70. Object { current: function, next: function, random: function } ExtraQuestionsList
71. var ExtraQuestionsList = (function(QuestionsList) {
 
 QuestionsList.randomQuestion() {
 /* ... */ 
 }
 
 return QuestionList;
 
 })(QuestionsList || {});
72. pub/sub pattern
76. var Mediator = {
 obj: $({}), publish: function(event, data) {
 return this.obj.trigger(event, data);
 }, 
 subscribe: function(event, fn) {
 return this.obj.on(event, fn);
 }, 
 unsubscribe: function(event, fn) {
 return this.obj.off(event, fn);
 }
 };
77. var QuestionViewer = (function(){
 
 function onChange() {
 alert('current question changed!');
 // fetch new question
 // render ...
 }
 
 return {
 init: function() {
 Mediator.subscribe(
 'change:question', onChange
 );
 }
 }
 })();
 
 QuestionViewer.init();
78. var QuestionsList = (function() {
 …
 
 function next() {
 currentIndex += 1;
 Mediator.publish( 'change:question', { index: currentIndex } );
 return current();
 }
 …
 
 })();
79. AMD (Asyncronous Module Definition)
80. define(
 [
 'dep1',
 'dep2'
 ],
 
 function(A, B) {
 /* ...... */
 }
 );
81. define(
 [
 "js/jquery.js",
 "js/jquery.color.js",
 "js/underscore.js"
 ],
 
 function($, colorPlugin, _){
 var shuffleColor = _.first(
 _.shuffle([“#666", "#333", "#111"])
 );
 
 $( ".item" ).animate({
 "backgroundColor": shuffleColor
 });
 
 return {};
 }
 );
82. define(
 [
 "js/jquery.js",
 "js/jquery.color.js",
 "js/underscore.js"
 ],
 
 function($, colorPlugin, _){
 var shuffleColor = _.first(
 _.shuffle([“#666", "#333", "#111"])
 );
 
 $( ".item" ).animate({
 "backgroundColor": shuffleColor
 });
 
 return {};
 }
 );
83. define(
 [
 "js/jquery.js",
 "js/jquery.color.js",
 "js/underscore.js"
 ],
 
 function($, colorPlugin, _){
 var shuffleColor = _.first(
 _.shuffle([“#666", "#333", "#111"])
 );
 
 $( ".item" ).animate({
 "backgroundColor": shuffleColor
 });
 
 return {};
 }
 );
84. Organização
85. #1 Separe módulos por arquivos
86. #2 Concatene e minifique os arquivos para deploy (Grunt, Gulp)
87. #3 Code Style (JSHint, JSLint)
88. #4 Escreva testes (Jasmine, Mocha)
89. OBRIGADO ! @macedorafael speakerdeck.com/macedorafael