tag:blogger.com,1999:blog-76696052056415803262024-03-08T16:17:55.979-08:00Adventures in Linux DevelopmentRildohttp://www.blogger.com/profile/14393864406179609911noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-7669605205641580326.post-54340365595744222632019-02-27T15:50:00.005-08:002019-02-27T15:59:58.209-08:00<h1 dir="ltr" style="line-height: 1.35; margin-bottom: 0pt; margin-top: 0pt; padding: 15pt; text-align: left;">
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c"><span style="background-color: white; color: #404040; font-family: "times new roman"; font-size: 24pt; vertical-align: baseline; white-space: pre-wrap;">Módulos JavaScript no servidor e navegador</span></span></h1>
<div>
<br /></div>
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c">
</span>
<br />
<div>
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c"><span style="background-color: white; color: #404040; font-family: "times new roman"; font-size: 24pt; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-d84c6507-7fff-579f-b2da-7102daa27283"><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">Aplicações web, mais especialmente as que são de maior porte, necessitam de bibliotecas javascript e de outros recursos como folhas de estilo (Bootstrap é um exemplo típico) e outras páginas html ou de texto plano, para funcionarem a contento. Alguns desses recursos devem ser carregados sequencialmente à medida que a página vem sendo carregada, daí colocarmos elementos como <script> e <link> (esse último para folhas de estilo), mas muitos desses programas só serão necessários bem adiante. Alguns podem ser </span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">carregados</span><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"> em background, e em paralelo, vários deles ao mesmo tempo. Isso acelera consideravelmente a apresentação da página web para o cliente, que aguarda ansiosamente. Além de usar os elementos acima (<script> e <link>), podemos efetuar chamadas XHR, ou seja, XMLHttpRequest, ou usando o padrão mais moderno do Fetch API. O problema nos elementos já mencionados é que o navegador precisa carregá-los sequencialmente, pois ele não tem idéia das dependências contidas nos scripts. Se soubéssemos que não há dependência entre os scripts, poderíamos fazer a carga em paralelo, daí a terminologia “Asynchronous Module Definition” ou AMD, que é um dos padrões para a definição de módulos cuja dependência é explicitamente identificada e que pode ser carregado sob demanda pelo navegador. Isso é explorado por carregadores de módulos como RequireJS (</span><a href="http://requirejs.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">http://requirejs.org/</span></a><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">) e muitos outros que visam a otimização da carga de módulos no navegador.</span><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c">
</span>
<br />
<div>
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c"><span style="background-color: white; color: #404040; font-family: "times new roman"; font-size: 24pt; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-1bc44f6a-7fff-8fee-7f58-45fd6e9759b7"></span></span><br /></span>
<br />
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c"><span style="background-color: white; color: #404040; font-family: "times new roman"; font-size: 24pt; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-1bc44f6a-7fff-8fee-7f58-45fd6e9759b7"><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">O formato AMD (Asynchronous Module Definition, em inglês) é uma tentativa de fornecer uma solução para módulos javascript que pode ser usada atualmente por desenvolvedores web do lado do cliente (navegador). Ele veio da experiência real do grupo do Dojo (</span><a href="https://dojotoolkit.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">https://dojotoolkit.org/</span></a><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">) em modularizar seu código. O desenvolvimento desse padrão foi passado para o grupo AMDjs (</span><a href="https://github.com/amdjs" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">https://github.com/amdjs</span></a><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">). Ele é uma proposta para a definição de módulos onde tanto os módulos como suas dependências (em relação a outros módulos) podem ser carregados de forma independente, assincronamente. AMD representa também um passo certo na direção do sistema de módulos proposto para a padronização futura nos padrões do ECMAscript (javascript). Apesar de ter sido inicialmente definido como um formato para o CommonJS, ele é um padrão separado deste último.</span><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><br /></span><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">Para criar módulos, usamos alguns padrões possíveis no javascript. O primeiro destes é o </span><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: italic; vertical-align: baseline;">“immediately invoked function expression (IIFE)”,</span><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"> ou seja, uma expressão que define uma função e permite ela ser invocada imediatamente. Conseguimos isso colocando a definição da função (anônima) entre parênteses. Se não fosse assim, a definição não seria uma expressão e a tentativa de executá-la de imediato resultaria num erro.</span><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><br /></span><span style="color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><br /></span><span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;">(function(){</span><span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"> // definição da função</span><span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;">})()</span></span></span></span><br />
<span style="background-color: white; color: #404040; font-family: "times new roman"; font-size: 24pt; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><br /></span></span></div>
<div>
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c"><span style="background-color: white; color: #404040; font-family: "times new roman"; font-size: 24pt; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-1bc44f6a-7fff-8fee-7f58-45fd6e9759b7"><span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><span id="docs-internal-guid-3c334188-7fff-be28-f57f-b2c26bbf17a2"><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">Os dois parênteses ( ) no final são responsáveis pela invocação imediata da função. Poderíamos incluir no interior destes, argumentos a serem passados para a função.</span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><br /></span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">Esse padrão (IIFE) nos permite encapsular código no interior da função, de modo que não precisamos conhecer detalhadamente o que a função IIFE faz, mas podemos usar esse código externamente. Ademais, como o interior de uma função é uma </span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: italic; vertical-align: baseline;">closure</span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">, podemos criar variáveis no seu interior, sem poluir o espaço global. Podemos ter múltiplas definições de funções inclusive, retornando um objeto com as várias funções que queremos exportar, todas invisíveis de outra maneira, por estarem numa </span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: italic; vertical-align: baseline;">closure</span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">. Isso nos conduz ao segundo padrão útil, o </span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: italic; vertical-align: baseline;">“revealing module pattern”</span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">.</span></span></span></span></span></span></div>
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c"><span style="background-color: white; color: #404040; font-family: "times new roman"; font-size: 24pt; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-1bc44f6a-7fff-8fee-7f58-45fd6e9759b7"><div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><span id="docs-internal-guid-0c8e843c-7fff-0d8d-4ff4-95e9ca532973"><span style="background-color: #f7f7f7; color: #333333; font-size: 11pt; vertical-align: baseline;"><br /></span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">var globModulo = function(){</span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> function ola(){</span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> console.log('Olá, módulo!');</span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> }</span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> return {</span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> ola: ola</span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> }</span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 12pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">}()</span></span></span></div>
<span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><span id="docs-internal-guid-0c8e843c-7fff-0d8d-4ff4-95e9ca532973">
</span></span>
<br />
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><span id="docs-internal-guid-0c8e843c-7fff-0d8d-4ff4-95e9ca532973"><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">Após salvar o retorno em </span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-weight: 700; vertical-align: baseline;">globModulo</span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">, podemos executar </span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-weight: 700; vertical-align: baseline;">globModulo.ola( )</span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"> para invocar a função definida internamente. Obviamente, várias outras funções poderiam ser definidas no interior desse bloco. Observe que a definição da função não está entre parênteses como acima. Isso não é necessário porque a função não é a primeira declaração na linha, que começa por uma atribuição a uma variável. Nesse caso, a inclusão da definição da função entre parênteses não é necessária e ela pode ser invocada imediatamente.</span></span></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><span id="docs-internal-guid-0c8e843c-7fff-0d8d-4ff4-95e9ca532973"><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;">Os formatos mais comuns para módulos são o CommonJS, o AMD e o UMD, além do novo formato padronizado pelo ES6. </span></span></span></div>
<br />
<span style="background-color: #ffe599; color: #85200c; font-family: "verdana"; font-size: 12pt; vertical-align: baseline;"><span id="docs-internal-guid-0c8e843c-7fff-0d8d-4ff4-95e9ca532973"><div>
<h2 dir="ltr" style="line-height: 1.2; margin-bottom: 6pt; margin-top: 5pt; text-align: justify;">
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><span id="docs-internal-guid-56b0495e-7fff-5166-6cde-ade797e70efa"><span style="font-family: "paytone one"; font-size: 20pt; vertical-align: baseline;">Módulos CommonJS</span></span></span></h2>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><span id="docs-internal-guid-56b0495e-7fff-5166-6cde-ade797e70efa"><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Os módulos padronizados pelo CommonJS são definidos como arquivos js regulares, incluindo a atribuição de exports ou module.exports no seu conteúdo. O sistema de módulos então adicionará um </span><span style="font-size: 11.5pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">wrapper</span><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> que conterá essas variáveis como parâmetro, além de algumas outras, como veremos.</span></span></span></div>
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><span id="docs-internal-guid-56b0495e-7fff-5166-6cde-ade797e70efa">
</span></span>
<br />
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><span id="docs-internal-guid-56b0495e-7fff-5166-6cde-ade797e70efa"><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Um exemplo de módulo, usando a implementação do commonjs contida no NodeJS, é a seguinte:</span><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: slategrey; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">// saudacoes.js</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">exports.bomdia </span><span style="background-color: #f9f9fa; color: #a67f59; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">=</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #0077aa; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">function</span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">()</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">{</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #0077aa; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">return</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #669900; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">"Bom dia!"</span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">;</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">};</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">exports.boanoite </span><span style="background-color: #f9f9fa; color: #a67f59; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">=</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #0077aa; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">function</span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">()</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">{</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #0077aa; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">return</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #669900; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">"Boa noite!"</span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">;</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">};</span></span></span></div>
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><span id="docs-internal-guid-56b0495e-7fff-5166-6cde-ade797e70efa">
</span></span>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><span id="docs-internal-guid-56b0495e-7fff-5166-6cde-ade797e70efa"><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">No programa principal, ou em outro módulo qualquer que precise utilizar esse módulo “saudacoes”, teremos:</span></span></span></div>
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; vertical-align: baseline;"><span id="docs-internal-guid-56b0495e-7fff-5166-6cde-ade797e70efa">
<div dir="ltr" style="line-height: 1.56; margin-bottom: 24pt; margin-top: 6pt;">
<span style="background-color: #f9f9fa; color: #0077aa; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">var</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> saudacoes </span><span style="background-color: #f9f9fa; color: #a67f59; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">=</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #dd4a68; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">require</span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">(</span><span style="background-color: #f9f9fa; color: #669900; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">"./saudacoes.js"</span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">);</span><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Ou simplesmente,</span><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #0077aa; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">var</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> saudacoes </span><span style="background-color: #f9f9fa; color: #a67f59; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">=</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> </span><span style="background-color: #f9f9fa; color: #dd4a68; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">require</span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">(</span><span style="background-color: #f9f9fa; color: #669900; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">"saudacoes"</span><span style="background-color: #f9f9fa; color: #999999; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">);</span><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">E após essa definição, podemos usar as funções saudacoes.bomdia() e saudacoes.boanoite(). Entretanto, nessa segunda forma (sem conter um caminho para um arquivo js diretamente, mas o nome do módulo, precisaremos de um arquivo package.json, que pode ser criado pelo comando “npm init”, num subdiretório do “node_modules”.</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Todas as funções e variáveis criadas no módulo e não exportadas serão completamente invisíveis, graças ao </span><span style="font-size: 11.5pt; font-style: italic; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">wrapper </span><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">introduzido.</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">(function(exports, require, module, __filename, __dirname) {</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"> module.exports = exports = {};</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">// o conteúdo do arquivo com o módulo reside aqui</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">});</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Para nossa conveniência, __filename e __dirname são respectivamente o nome do arquivo fonte e o diretório onde ele se encontra. A variável ‘module’ é um objeto com alguns ítens como “id”, “exports”, “parent”, “paths”, “children” (array com outros módulos). Ele tem referências circulares, o que o impede de ser visualizado por JSON.stringify(). Nesse caso, podemos dispor do módulo “json-stringify-safe” para essa função.</span></div>
<div>
<br /></div>
<div>
<h2 dir="ltr" style="line-height: 1.2; margin-bottom: 6pt; margin-top: 5pt; text-align: justify;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-ad1650a9-7fff-bbee-a4eb-8f4651f05eba"><span style="font-family: "paytone one"; font-size: 20pt; vertical-align: baseline;">Módulos AMD</span></span></span></h2>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-ad1650a9-7fff-bbee-a4eb-8f4651f05eba"><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">No navegador é mais interessante definirmos módulos AMD (assíncronos). Uma vantagem explícita desse tipo de módulos é que a carga destes pode ser feita independentemente, sem nos preocuparmos com a ordem de carga dos módulos. A definição de um módulo AMD é realizada num simples função:</span></span></span></div>
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-ad1650a9-7fff-bbee-a4eb-8f4651f05eba">
</span></span>
<br />
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-ad1650a9-7fff-bbee-a4eb-8f4651f05eba"><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; vertical-align: baseline;">define(id?, dependencias?, factory);</span></span></span></div>
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-ad1650a9-7fff-bbee-a4eb-8f4651f05eba">
</span></span>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-ad1650a9-7fff-bbee-a4eb-8f4651f05eba"><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">onde o id do módulo é uma string opcional, bem como é opcional o array de dependências de outros módulos. O parâmetro “factory” é uma função que efetivamente cria o módulo, como por exemplo, se o módulo fosse jQuery, retornaria a tão familiar função “$”.</span></span></span></div>
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span id="docs-internal-guid-ad1650a9-7fff-bbee-a4eb-8f4651f05eba">
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Vejamos um exemplo com a página html, um módulo (amdmod.js), um script inicial (main.js), usando o carregador RequireJS (</span><a href="http://requirejs.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11.5pt; vertical-align: baseline;">http://requirejs.org/</span></a><span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">) feito especialment para carregar módulos AMD no navegador.</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #660000; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">index.html</span><span style="background-color: #f9f9fa; color: #660000; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #660000; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">-------------</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><!DOCTYPE html></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><html></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> <head></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> <title>Uma pagina html</title></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> <!-- o atributo data-main attribute indica a require.js</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> para carregar o script main.js depois que require.js </span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> é carregado --></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> <script data-main="main" src="require.js"></script></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </head></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><body></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> <h1>Texto do header h1</h1></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </body></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"></html></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><b id="docs-internal-guid-494886f6-7fff-f437-6e3b-25d816cd4ab7" style="font-weight: normal;"><br /></b></span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #5b0f00; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">amdmod.js</span><span style="background-color: #f9f9fa; color: #5b0f00; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #5b0f00; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">--------------</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">define(['jquery'] , function ($) {</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> return function () {</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> console.log("FACTORY em amdmod.js");</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> // usa jquery para obter o texto do elemento h1</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> console.log($("h1").text());</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> };</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">});</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #5b0f00; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">main.js</span><span style="background-color: #f9f9fa; color: #5b0f00; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #5b0f00; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">---------</span><span style="background-color: #f9f9fa; color: #5b0f00; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">requirejs(["amdmod"], function(amdfun) {</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> console.log("LOADED amdmod.js");</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> amdfun();</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">});</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<br /></div>
<h2 dir="ltr" style="line-height: 1.2; margin-bottom: 6pt; margin-top: 5pt; text-align: justify;">
<span style="background-color: white; color: #373737; font-family: "paytone one"; font-size: 20pt; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Módulos UMD</span></h2>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Como desenvolvedor, nos deparamos frequentemente com a possibilidade de usar </span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">um determinado módulo no ambiente do navegador, e tambḿe no servidor (nodejs). </span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Os métodos de inclusão funcionam de maneira diferente nos dois casos. Quando você inclui </span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">um módulo ou biblioteca usando um tag <script>, usualmente você estará criando variáveis </span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">globais que outros scripts poderão acessar, porém uma das vantagens de se usar RequireJS </span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">(ou outros caregadores de módulos) é que ele elimina a necessidade de termos variáveis </span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">globais. Como podemos ter a mesma biblioteca carregada de ambas as maneiras? </span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">A resposta pode ser encontrada em módulos UMD (Universal Moule Definition). Praticamente,</span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> o procedimento consiste em encapsular o código em uma espécie de </span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">boilerplate</span><span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> que</span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> tenta definir os tipos de módulos existentes na biblioteca e no sistema, escolhendo o que</span><br />
<span style="background-color: white; color: #373737; font-family: "helvetica neue"; font-size: 11.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> dá certo.</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">(function (root, factory) {</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> if (typeof define === 'function' && define.amd) {</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> // foi encontrada uma função define e esta parece ser AMD,</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> // então crie um módulo AMD anônimo</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> define(['b'], factory);</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> } else if (typeof exports === 'object') {</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> // parece ser nodejs (tipo commonjs)</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> module.exports = factory(require('b'));</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> } else {</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> // nada suportado, defina como um global (root == window)</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> root.returnExports = factory(root.b);</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> }</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">}(this, function (b) {</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> // use ‘b’ da forma apropriada</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> // então retorne o que deve ser exportao pelo módulo</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> // Pode ser um objeto ou simlesmente uma função.</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> return {};</span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span><span style="background-color: #f9f9fa; color: #333333; font-family: "consolas"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">}));</span></div>
<div dir="ltr" style="line-height: 1.56; margin-bottom: 0pt; margin-top: 5pt;">
<span style="font-size: 11.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></div>
</span></span></div>
</span></span></div>
</span></span></div>
</span></span></span></div>
<span id="docs-internal-guid-7d787979-7fff-0a02-1b7e-74f70ea8ed7c">
</span>Rildohttp://www.blogger.com/profile/14393864406179609911noreply@blogger.com0