Começar a usar a biblioteca de fechamento

Este exercício do Hello World apresenta o processo de uso da Biblioteca de fechamento em uma página da Web. Para fazer esse exercício, você precisa conhecer o JavaScript, além de um cliente Git e Node.js.

Encerramento

Para começar a usar a Biblioteca outro SDK, use as funções do JavaScript do fechamento em uma página da Web simples, seguindo estas etapas:

Etapa 1: fazer o download e configurar a biblioteca de fechamento

Faça o download da biblioteca do Encerramento do repositório do Git executando o seguinte comando na linha de comando: 

git clone https://github.com/google/closure-library

Você precisa de um cliente Git para executar esse comando, mas talvez já tenha um. Tente o comando. Se isso não funcionar, faça o download e instale um cliente Git (em inglês).

Depois de executar esse comando, você terá um diretório chamado closure-library que contém o código da Biblioteca de interdição.

Antes de continuar, o repositório da biblioteca de interdições precisa ser inicializado. Parte deste exercício depende de um arquivo chamado deps.js, que é gerado e, portanto, não faz parte do repositório quando é verificado pela primeira vez. Para gerar esse arquivo, insira este diretório e execute npm install (npm está empacotado com Node.js): 

cd closure-library
npm install

Etapa 2: criar um arquivo JavaScript que usa a biblioteca outro projeto

Salve o seguinte JavaScript em um arquivo chamado hello.js. Coloque esse arquivo ao lado do diretório closure-library. 

goog.require('goog.dom');
goog.require('goog.dom.TagName');

function sayHi() {
  var newHeader = goog.dom.createDom(goog.dom.TagName.H1, {'style': 'background-color:#EEE'},
    'Hello world!');
  goog.dom.appendChild(document.body, newHeader);
}

Etapa 3: criar um arquivo HTML

Salve o seguinte HTML em um arquivo chamado hello.html. Coloque esse arquivo ao lado do diretório closure-library e do arquivo hello.js. 

<html>
  <head>
    <script src="closure-library/closure/goog/base.js"></script>
    <script src="hello.js"></script>
  </head>
  <body onload="sayHi()">
  </body>
</html>

Etapa 4: diga "Olá" à Biblioteca de interdição

Abra o arquivo HTML em um navegador. Você verá as palavras "Hello world!":

Como este exemplo funciona?

O JavaScript hello.js usa duas funções que não definem: goog.dom.createDom() e goog.dom.appendChild(). De onde vêm essas funções?

Essas funções são definidas na Biblioteca closure que você salvou na Etapa 1, no arquivo closure-library/dom/dom.js.

Para usar essas funções, o exemplo faz duas coisas:

  • Ele inclui a instrução goog.require('goog.dom') no início do JavaScript na Etapa 2.
  • Ele inclui o arquivo de inicialização da Biblioteca Frontend base.js no HTML da Etapa 3.

O arquivo base.js define a função goog.require(). A chamada de função goog.require('goog.dom') carrega o arquivo JavaScript que define as funções no namespace goog.dom, com quaisquer outros arquivos da Biblioteca outro necessário.

A Biblioteca outro projeto carrega esses arquivos adicionando dinamicamente uma tag de script ao documento para cada arquivo necessário. Por exemplo, a instrução goog.require('goog.dom') faz com que a seguinte tag seja adicionada ao documento, em que path-to-closure é o caminho do arquivo HTML para o diretório que contém base.js: 

<script src="path-to-closure/dom/dom.js"></script>

Normalmente, uma única instrução goog.require() carrega somente uma fração da base de código da closure Library.

Observação: não coloque as instruções goog.require() na mesma tag de script que o ponto de entrada para o código que usa as classes ou classes goog.require. Uma chamada goog.require() adiciona código ao documento após a tag do script que contém a chamada. Por exemplo, este código funciona: 

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
</script>
<script>
  var newHeader = goog.dom.createDom(goog.dom.TagName.H1);
</script>

A chamada goog.require() adiciona o código para goog.dom.createDom() imediatamente antes da tag de script que contém a linha var newHeader = goog.dom.createDom(goog.dom.TagName.H1).

Por outro lado, o código abaixo produz um erro: 

<script src="closure-library/closure/goog/base.js"></script>
<script>
  // DON'T DO THIS.
  goog.require('goog.dom');
  var newHeader = goog.dom.createDom(goog.dom.TagName.H1);
</script>

Essa chamada goog.require() adiciona o código para goog.dom.createDom() em uma tag de script que não será interpretada até que uma chamada para goog.dom.createDom() já tenha sido feita.

Incluir base.js não é a única maneira de incluir o código da Biblioteca de interdição, mas é a maneira mais fácil de começar. Seja qual for a forma como você usa o código da biblioteca de interdição, você sempre vai usar goog.require() para declarar as partes necessárias.

Próximas etapas

O exemplo ilustra uma maneira de acessar apenas as partes da Biblioteca de fechamento necessárias, incluindo base.js na sua página da Web e chamar a função goog.require().

Para uso mais avançado, recomendamos o Compile Compiler para minificar o JavaScript em um único arquivo.