{"id":65,"date":"2019-06-27T12:49:56","date_gmt":"2019-06-27T12:49:56","guid":{"rendered":"https:\/\/micheladrianomedeiros.com.br\/blog\/?p=65"},"modified":"2019-06-27T12:57:34","modified_gmt":"2019-06-27T12:57:34","slug":"object-literal-pattern","status":"publish","type":"post","link":"https:\/\/micheladrianomedeiros.com.br\/blog\/object-literal-pattern\/","title":{"rendered":"Object Literal Pattern"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">O Object Literal Pattern \u00e9\nprovavelmente o jeito mais simples encapsular as partes de uma implementa\u00e7\u00e3o de\nbaixo de um objeto de guarda-chuva que funciona como um M\u00f3dulo. O nome deste\npadr\u00e3o descreve como \u00e9 utilizado. O desenvolvedor apenas precisa declarar uma\nvari\u00e1vel e nomear um objeto que ir\u00e1 relacionar com todas as partes que forem\nnecess\u00e1rias encapsuladas dentro deste M\u00f3dulo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos criar um M\u00f3dulo que\nfornece um \u00fanico inteiro para uma p\u00e1gina, \u00e9 similar ao que o jquery.guid faz: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">var simpleguid = {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; guid:\n1,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; init:\nfunction(){<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.guid\n= 1;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; increaseCounter:\nfunction(){<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.guid++;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ou\nsimpleguid.guid++;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getNext:\nfunction(){<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var\nnextGuid = this.guid;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.increaseCounter();<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return\nnextGuid;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma simples regra que voc\u00ea pode\nseguir deste padr\u00e3o \u00e9 definir todas as vari\u00e1veis e fun\u00e7\u00f5es que cada implementa\u00e7\u00e3o\nprecisa como as propriedades de um objeto. Nosso c\u00f3digo \u00e9 reutiliz\u00e1vel e n\u00e3o\npolui o Global Namespace, outros podem apenas definir uma simples vari\u00e1vel para\no nosso M\u00f3dulo, \u00e9 o simpleguid neste caso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos acessar as propriedades\ninternas do M\u00f3dulo, ou utilizar a keyword this, como a this.guid, ou utilizar o\nnome completo do M\u00f3dulo simple.guid. Para utilizar o M\u00f3dulo do c\u00f3digo\napresentado, precisamos acessar sua propriedade utilizando o seu nome. Por exemplo,\nchamando o m\u00e9todo simpleguid.getNext() que retornar\u00e1 o pr\u00f3ximo n\u00famero e mudar\u00e1\no estado do M\u00f3dulo incrementando o seu contador interno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um ponto negativo deste padr\u00e3o\n\u00e9 que n\u00e3o fornece nenhuma seguran\u00e7a interna do M\u00f3dulo. Todas as partes internas\ndo M\u00f3dulo podem ser acessadas e subscritas por um c\u00f3digo externo, apesar que somos\nn\u00f3s que escolhermos o que ser\u00e1 exposto, como os m\u00e9todos simpleguid.init() e o\nsimpleguid.next(). H\u00e1 muitas conven\u00e7\u00f5es de como escolher os nomes, pela sua\nfuncionalidade ou adicionando o underscore(_) para os nomes das propriedades\nque ser\u00e3o utilizadas apenas internamente, mas tecnicamente isto n\u00e3o resolve o\nponto negativo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Outra desvantagem \u00e9 escrever\num M\u00f3dulo gigante utilizando um objeto literal. \u00c9 verdade que desenvolvedores\nJavaScript est\u00e3o acostumados a terminar suas vari\u00e1veis com ponto e v\u00edrgula(;), e\nescrevem grandes M\u00f3dulos utilizando v\u00edrgula(,) depois de cada propriedade, que\nfacilmente pode levar a erros de sintaxe. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar deste padr\u00e3o torna\nf\u00e1cil a declara\u00e7\u00e3o de Namespaces aninhados para um M\u00f3dulo, pode acontecer de a estrutura\nficar com uma legibilidade ruim, neste caso h\u00e1 a necessidade de criar v\u00e1rios\nn\u00edveis. Vamos ver um exemplo:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">var myTodoApp = {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; todos: [],<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; addTodo: function(todo) { this.todos.push(todo); },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getTodos:\nfunction() { return this.todos; },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; updateTodo:\nfunction(todo) { \/*&#8230;*\/ },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imports:\n{<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fromGDrive:\nfunction() { \/*&#8230;*\/ },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fromUrl: function() { \/*&#8230;*\/ },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fromText: function() { \/*&#8230;*\/ }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; exports:\n{<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gDrivePublicKey:\n&#8216;#wnanqAASnsmkkw&#8217;,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; toGDrive:\nfunction() { \/*&#8230;*\/ },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; toFile:\nfunction() { \/*&#8230;*\/ }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; share:\n{<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; toTwitter:\nfunction(todo) { \/*&#8230;*\/ }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">};<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Felizmente neste caso pode ser\nfacilmente ajustado, separando o objeto literal em m\u00faltiplas assinaturas de subm\u00f3dulos\n(preferencialmente em arquivos separados):<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;var myTodoApp = {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; todos: [],<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; addTodo: function(todo) { this.todos.push(todo); },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getTodos:\nfunction() { return this.todos; },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; updateTodo:\nfunction(todo) { \/*&#8230;*\/ }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">};<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\/*&#8230;*\/<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">myTodoApp.exports = {<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; gDrivePublicKey:\n&#8216;#wnanqAASnsmkkw&#8217;,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; toGDrive:\nfunction() { \/*&#8230;*\/ },<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; toFile: function() { \/*&#8230;*\/ }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">};<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\/*&#8230;*\/<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> \ud83d\ude0d Aulas de\u00a0Javascript\u00a0&#8211;\u00a0<a rel=\"noreferrer noopener\" href=\"http:\/\/bit.ly\/blackzigjavascript\" target=\"_blank\">http:\/\/bit.ly\/blackzigjavascript<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.amazon.com.br\/gp\/offer-listing\/B019CIYMQS\/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B019CIYMQS&amp;linkCode=am2&amp;tag=blackzig0b-20&amp;linkId=d00f283a22232eb8f2453f7f4ca56593\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?_encoding=UTF8&amp;MarketPlace=BR&amp;ASIN=B019CIYMQS&amp;ServiceVersion=20070822&amp;ID=AsinImage&amp;WS=1&amp;Format=_SL250_&amp;tag=blackzig0b-20\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-background has-pale-cyan-blue-background-color wp-block-paragraph\"><strong>jQuery Design Patterns (English Edition)<\/strong> &#8211; <a href=\"https:\/\/amzn.to\/2RJaILW\">https:\/\/amzn.to\/2RJaILW<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">#designpattern #objectliteralpattern<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Fonte: Livro jQuery\nDesign Patterns<\/h6>\n\n\n","protected":false},"excerpt":{"rendered":"<p>O Object Literal Pattern \u00e9 provavelmente o jeito mais simples encapsular as partes de uma implementa\u00e7\u00e3o de baixo de um objeto de guarda-chuva que funciona como um M\u00f3dulo. O nome deste padr\u00e3o descreve como \u00e9 utilizado. O desenvolvedor apenas precisa declarar uma vari\u00e1vel e nomear um objeto que ir\u00e1 relacionar com todas as partes que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":66,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,19],"tags":[23,24],"class_list":["post-65","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designpatterns","category-objectliteralpattern","tag-design-patterns","tag-object-literal-pattern"],"_links":{"self":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":8,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":74,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions\/74"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/media\/66"}],"wp:attachment":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}