{"id":40,"date":"2020-01-20T01:03:08","date_gmt":"2020-01-20T01:03:08","guid":{"rendered":"https:\/\/backbonejsdescomplicado.com.br\/?p=40"},"modified":"2024-04-30T20:24:13","modified_gmt":"2024-04-30T20:24:13","slug":"revealing-module-pattern","status":"publish","type":"post","link":"https:\/\/escolhadev.com.br\/javascript\/revealing-module-pattern\/","title":{"rendered":"JavaScript Revealing Module Pattern – 2 exemplos pr\u00e1ticos"},"content":{"rendered":"\n

Quero apresentar para voc\u00ea o que \u00e9 uma fun\u00e7\u00e3o IIFE e como ela se relaciona com o Revealing Module Pattern al\u00e9m de explicar as motiva\u00e7\u00f5es para usar ambas t\u00e9cnicas em seus projetos.<\/p>\n\n\n\n

Em seguida demonstro dois exemplos onde aplico o JavaScript Revealing Module Pattern no c\u00f3digo para torn\u00e1-lo simples e f\u00e1cil para dar manuten\u00e7\u00e3o.<\/p>\n\n\n\n\n\n\n\n

O que \u00e9 uma fun\u00e7\u00e3o JavaScript IIFE<\/h2>\n\n\n\n

IIFE (Immediately Invoked Function Expression) \u00e9 uma fun\u00e7\u00e3o que \u00e9 executada logo ap\u00f3s ser definida.<\/p>\n\n\n\n

(function() {\n\n  \/\/ ...\n\n})();<\/code><\/pre>\n\n\n\n
A fun\u00e7\u00e3o IIFE \u00e9 executada apenas uma vez. Vari\u00e1veis e fun\u00e7\u00f5es definidas dentro dela ser\u00e3o privados por padr\u00e3o, ou seja, ser\u00e3o inacess\u00edveis no escopo global.<\/p>\n\n\n\n
Por que utilizo o JavaScript Module Pattern?<\/h2>\n\n\n\n
Utilizo o JavaScript Revealing Module Pattern quando quero evitar poluir o escopo global de um projeto JavaScript. Exponho de forma seletiva apenas fun\u00e7\u00f5es e vari\u00e1veis que desejo que se tornem p\u00fablicas. <\/p>\n\n\n\n
const hello = (function() {\n\n  const message = 'hello, world!';\n\n  return {\n    message,\n  }\n\n})();<\/code><\/pre>\n\n\n\n
No c\u00f3digo acima utilizo uma fun\u00e7\u00e3o IIFE que retorna um objeto onde exponho as vari\u00e1veis e fun\u00e7\u00f5es que desejo. A fun\u00e7\u00e3o \u00e9 executada apenas uma vez e seu resultado armazenado na constante hello<\/code>.<\/p>\n\n\n\n
Se preciso obter o texto armazenado na vari\u00e1vel message<\/code> basta acess\u00e1-lo atrav\u00e9s da vari\u00e1vel hello<\/code>.<\/p>\n\n\n\n
console.log(hello.message);\n\/\/ output: hello, world!<\/code><\/pre>\n\n\n\n
Exemplo pr\u00e1tico 1 – calculadora<\/h2>\n\n\n\n
Neste primeiro exemplo pr\u00e1tico demonstro a cria\u00e7\u00e3o de uma calculadora. Uso o Revealing Module Pattern para criar as fun\u00e7\u00f5es sum<\/code> e subtract<\/code> e \u00e0s revelo em seguida no retorno da fun\u00e7\u00e3o. O resultado atribuo a constante calculator<\/code>.<\/p>\n\n\n\n
const calculator = (function() {\n  \"use strict\";\n\n  const sum = function(a, b) {\n    return a + b;\n  };\n\n  const subtract = function(x, y) {\n    return x - y;\n  };\n\n  return {\n    sum,\n    subtract,\n  };\n\n})();<\/code><\/pre>\n\n\n\n
Para executar as opera\u00e7\u00f5es de soma e subtra\u00e7\u00e3o executo respectivamente os m\u00e9todos calculator.sum<\/code> e calculator.subtract<\/code> como demonstro em seguida.<\/p>\n\n\n\n
$(document).ready(function() {\n  \"use strict\";\n\n  const sum = calculator.sum(3, 7);\n  const sub = calculator.subtract(9, 3);\n\n  console.log(sum);\n  \/\/ output: 10\n\n  console.log(sub);\n  \/\/ output: 6\n\n});<\/code><\/pre>\n\n\n\n
Usando o Revealing Module Pattern consegui evitar de poluir o escopo global por que expus apenas a constante calculator<\/code> que \u00e9 por sua vez respons\u00e1vel por revelar os m\u00e9todos calculator.sum<\/code> e calculator.subtract<\/code>.<\/p>\n\n\n\n
Exemplo pr\u00e1tico 2 – incrementador<\/h2>\n\n\n\n
Neste segundo exemplo demonstro a cria\u00e7\u00e3o de um incrementador. Uso o Revealing Module Pattern para criar a vari\u00e1vel counter<\/code> e a fun\u00e7\u00e3o next<\/code> mas revelo somente a fun\u00e7\u00e3o next. O resultado atribuo a constante incrementor<\/code>.<\/p>\n\n\n\n
const incrementor = (function() {\n  \"use strict\";\n\n  let counter = 0;\n\n  const next = function() {\n    return ++counter;\n  };\n\n  return {\n    next,\n  };\n\n})();<\/code><\/pre>\n\n\n\n
Para executar a opera\u00e7\u00e3o de incremento executo o m\u00e9todo incrementor.next<\/code> como demonstro em seguida.<\/p>\n\n\n\n
$(document).ready(function() {\n  \"use strict\";\n\n  const first = incrementor.next();\n  const second = incrementor.next();\n\n  console.log(first);\n  \/\/ output: 1\n\n  console.log(second);\n  \/\/ output: 2\n\n});<\/code><\/pre>\n\n\n\n
Novamente o Revealing Module Pattern permitiu manter o escopo global limpo. No contexto global existe apenas a constante incrementor<\/code> que por sua vez revela o m\u00e9todo incrementor.next<\/code>. Como n\u00e3o revelei a vari\u00e1vel counter<\/code> a mesma se tornou uma propriedade privada do objeto incrementor<\/code>.<\/p>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
Demonstrei neste artigo como utilizo fun\u00e7\u00f5es IIFE & Revealing Module Pattern para organizar e separar responsabilidades em meus c\u00f3digos JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"
Quero apresentar para voc\u00ea o que \u00e9 uma fun\u00e7\u00e3o IIFE e como ela se relaciona com o Revealing Module Pattern al\u00e9m de explicar as motiva\u00e7\u00f5es para usar ambas t\u00e9cnicas em seus projetos. Em seguida demonstro dois exemplos onde aplico o JavaScript Revealing Module Pattern no c\u00f3digo para torn\u00e1-lo simples e f\u00e1cil para dar manuten\u00e7\u00e3o.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/40"}],"collection":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":1,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":762,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/40\/revisions\/762"}],"wp:attachment":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}