Spaguetti com amêndoas Desenrolando seu código Javascript @ArthurGouveia 

- O projeto é simples… …na sua cabeça preguiçosa 

- É só botar uns “ífi”… …naquele(s) cenário(s) que você não previu 

Só o Ctrl + F para achar… …aquele trecho de código no arquivo de 3000 linhas 

- Reutilizar? Ctrl + C e Ctrl + V …pra colocar mais massa nesse Spaghetti Code 

Os antigos sábios já diziam: 

Namespaces
 Module Pattern
 Almond Os ingredientes que faltavam
 para desenrolar esse seu
 Spaghetti Code 

Arthur Gouveia Software Engineer @ Reliant Solutions 

Credits: https://commons.wikimedia.org/wiki/File:Pasta.jpg Namespaces ‘Global scope’ === ‘Danger’ Variable/Function name overwriting Third-party scripts, etc 

Show me the code var chef = { name: 'Cuca', title: 'Mestre' }; whoIsTheChef(); changeChef(); whoIsTheChef(); function whoIsTheChef() { console.log(chef.title + ' ' + chef.name); } /* Random function from third-party script */ function changeChef() { chef = { name: 'Benta', title: 'Dona' }; } 

Show me the code > Mestre Cuca > Dona Benta var chef = { name: 'Cuca', title: 'Mestre' }; whoIsTheChef(); changeChef(); whoIsTheChef(); function whoIsTheChef() { console.log(chef.title + ' ' + chef.name); } /* Random function from third-party script */ function changeChef() { chef = { name: 'Benta', title: 'Dona' }; } 

Show me the code /* Single global object solution */ var KitchenApp = KitchenApp || {}; KitchenApp.chef = { name: 'Cuca', title: 'Mestre' }; whoIsTheChef(); changeChef(); whoIsTheChef(); function whoIsTheChef() { console.log(KitchenApp.chef.title + ' ' + KitchenApp.chef.name); } /* Random function from third-party script */ function changeChef() { chef = { name: 'Benta', title: 'Dona' }; } 

Show me the code > Mestre Cuca > Mestre Cuca /* Single global object solution */ var KitchenApp = KitchenApp || {}; KitchenApp.chef = { name: 'Cuca', title: 'Mestre' }; whoIsTheChef(); changeChef(); whoIsTheChef(); function whoIsTheChef() { console.log(KitchenApp.chef.title + ' ' + KitchenApp.chef.name); } /* Random function from third-party script */ function changeChef() { chef = { name: 'Benta', title: 'Dona' }; } Unique ‘use strict’ won’t allow this 

Show me the code /* Single global object solution + Object Literal Notation */ var KitchenApp = KitchenApp || {}; KitchenApp.Chef = { info: { name: 'Cuca', title: 'Mestre' }, whoIsTheChef: function() { console.log(this.info.title + ' ' + this.info.name); }, changeChef: function(chef_info) { this.info = chef_info; } }; KitchenApp.Chef.whoIsTheChef(); changeChef({ name: 'Ana Maria Braga', title: 'Dona' }); KitchenApp.Chef.whoIsTheChef(); KitchenApp.Chef.changeChef({ name: 'Ana Maria Braga', title: 'Dona' }); KitchenApp.Chef.whoIsTheChef(); /* Random function from third-party script */ function changeChef(chef_info) { chef = chef_info; } 

Show me the code > Mestre Cuca > Mestre Cuca > Ana Maria Braga /* Single global object solution + Object Literal Notation */ var KitchenApp = KitchenApp || {}; KitchenApp.Chef = { info: { name: 'Cuca', title: 'Mestre' }, whoIsTheChef: function() { console.log(this.info.title + ' ' + this.info.name); }, changeChef: function(chef_info) { this.info = chef_info; } }; KitchenApp.Chef.whoIsTheChef(); changeChef({ name: 'Ana Maria Braga', title: 'Dona' }); KitchenApp.Chef.whoIsTheChef(); KitchenApp.Chef.changeChef({ name: 'Ana Maria Braga', title: 'Dona' }); KitchenApp.Chef.whoIsTheChef(); /* Random function from third-party script */ function changeChef(chef_info) { chef = chef_info; } 

Source: http://www.freeimages.com/photo/kitchen-tools-1237100 Module Pattern Single Responsibility Principle Privacy (clean global scope) with IIFEs Independency & Reusability Locked state 

Module 1. a separable component, frequently one that is interchangeable with others, for assembly into units of differing size, complexity, or function. Source: http://dictionary.reference.com/browse/module?s=t 

Single Responsibility Principle 

Show me the code var ingredientsForPasta = ['Pasta', 'Water', 'Salt']; // IIFE - Immediately Invoked Function Expression var KitchenApp = (function() { 'use strict'; // Isolated scope with access to Global console.log(ingredientsForPasta); var ingredientsForSauce = ['Tomato', 'Olive Oil', 'Basil']; console.log(ingredientsForSauce); }()); console.log(ingredientsForPasta); // Error: ingredientsForSauce is not defined // No access to variables defined inside de IIFE console.log(ingredientsForSauce); 

Show me the code var ingredientsForPasta = ['Pasta', 'Water', 'Salt']; // IIFE - Immediately Invoked Function Expression var KitchenApp = (function() { 'use strict'; // Isolated scope with access to Global console.log(ingredientsForPasta); var ingredientsForSauce = ['Tomato', 'Olive Oil', 'Basil']; console.log(ingredientsForSauce); }()); console.log(ingredientsForPasta); // Error: ingredientsForSauce is not defined // No access to variables defined inside de IIFE console.log(ingredientsForSauce); > [ 'Pasta', 'Water', 'Salt' ] > [ 'Tomato', 'Olive Oil', 'Basil' ] > [ 'Pasta', 'Water', 'Salt' ]
 > ಠ_ಠ 

var KitchenApp = KitchenApp || {}; KitchenApp = (function(){ function init() { KitchenApp.ChefModule.init(); KitchenApp.ChefModule.getNames(); } return { init: init } }()); KitchenApp.ChefModule = (function(){ 'use strict'; var names; function init() { names = ['Dona Benta', 'Palmirinha', 'Ana Maria Braga']; };// public function getNames(){ console.log(sortChefs()); }; // public function setNames(chefsNames) { names = chefsNames; }; // public function sortChefs() { return names.sort(); } // private return { init: init, getNames: getNames, setNames: setNames } }()); KitchenApp.init(); Show me the code 

Show me the code > [ 'Ana Maria Braga', 'Dona Benta', 'Palmirinha' ] var KitchenApp = KitchenApp || {}; KitchenApp = (function(){ function init() { KitchenApp.ChefModule.init(); KitchenApp.ChefModule.getNames(); } return { init: init } }()); KitchenApp.ChefModule = (function(){ 'use strict'; var names; function init() { names = ['Dona Benta', 'Palmirinha', 'Ana Maria Braga']; };// public function getNames(){ console.log(sortChefs()); }; // public function setNames(chefsNames) { names = chefsNames; }; // public function sortChefs() { return names.sort(); } // private return { init: init, getNames: getNames, setNames: setNames } }()); KitchenApp.init(); 

Almond AMD Implementation Define and Require modules
 
 ~3kb of cool stuff Source: http://www.freeimages.com/photo/almonds-1317800 

Asynchronous Module Definition 

Show me the code define('Module.Chef', [], function() { var name = 'Palmirinha', salutation = 'Hello, AMD World.'; function intro() { return 'I am ' + name + '. ' + salutation; } return { intro: intro } }); define('Kitchen', ['Module.Chef'], function(chef) { function init() { console.log(chef.intro()); } return { init: init } }); var kitchenApp = require('Kitchen'); kitchenApp.init(); 

Show me the code > I am Palmirinha. Hello, AMD World. define('Module.Chef', [], function() { var name = 'Palmirinha', salutation = 'Hello, AMD World.'; function intro() { return 'I am ' + name + '. ' + salutation; } return { intro: intro } }); define('Kitchen', ['Module.Chef'], function(chef) { function init() { console.log(chef.intro()); } return { init: init } }); var kitchenApp = require('Kitchen'); kitchenApp.init(); 

Show me the code (function(){ var spaghetti = document.body.dataset.spaghetti; if (spaghetti !== undefined) { require('Recipe.' + spaghetti).cook(); } else { document.write('Y u no select a recipe?'); } }()); kitchenApp.js index.html 

Show me the code (function(){ var spaghetti = document.body.dataset.spaghetti; if (spaghetti !== undefined) { require('Recipe.' + spaghetti).cook(); } else { document.write('Y u no select a recipe?'); } }()); kitchenApp.js index.html 

Show me the code bolognese.js define('Recipe.Bolognese', [ 'Ingredients.Water', 'Ingredients.Salt', 'Ingredients.Pasta', 'Ingredients.Tomato', 'Ingredients.GroundBeef', 'Ingredients.OliveOil' ], function(water, salt, pasta, tomato, groundBeef, oliveOil) { var cook = function() { addIngredients([water, salt, pasta, oliveOil]); makeSauce([tomato, salt, oliveOil]); addIngredients([groundBeef]); } var addIngredients = function(ingredients) {} var makeSauce = function(ingredients) {} return { cook: cook }; }); 

Use sua preguiça a favor de eficiência 

Design Patterns 

Modularize seu código 

Obrigado! @ArthurGouveia