« Anterior: BÁSICO > "ENUM"
Próximo: BÁSICO > GERENCIAMENTO DE MEMÓRIA »

Objetivos

Clique sobre os tópicos listados abaixo para navegar até o conteúdo desejado.

  1. Dividir programas em arquivos
  2. Integrar biblioteca com HTML
  3. Usar recursos da biblioteca
  4. Bibliotecas como objetos
  5. Uso de freeze em recursos

Biblioteca do usuário

Por boa prática, nossos programas escritos em uma qualquer linguagem de programação \ devem ser divididos ou "quebrados" em partes menores para melhor manutenção, separação de responsabilidade e reuso.

Tendo essa divisão discutida acima em mente, vamos estudar o básico sobre criação de bibliotecas ou módulo do usuário em JS.

Nos exemplos abaixo será utilizada a integração com HTML. Para a execução, será necessário um navegador Web ou um compilador/interpretador online que forneça suporte a integração de JS e HTML.

Separando em arquivos .js

Uma biblioteca nada mais é do que um arquivo com extensão .js em que declaramos funções, objetos ou outros, de forma a agrupá-los por responsabilidade.

Exemplo 1
script.js
script2.js

No exemplo acima, temos um arquivo chamado script.js e um segundo arquivo script2.js. Ambos são responsáveis por armazenar os seus recursos individuais de acordo com suas responsabilidades que são mostradas no exemplo abaixo:

Exemplo 2
//script.js
const CONSTANTE1 = 1;

function funcao1(){
	console.log("funcao1");
	document.getElementById("spn").innerHTML = CONSTANTE1 //exibe constante na página
}
//script.js
const CONSTANTE2 = 2;

function funcao1(){
	console.log("funcao2");
	document.getElementById("spn").innerHTML = CONSTANTE2 //exibe constante na página
}
Saída
-

Os arquivos .js criados acima devem estar armazenados em uma mesma pasta para que sejam utilizados nos próximos exemplos de integração e uso.

A inclusão dos arquivos .js mencionados acima podem ser feitas na como no exemplo abaixo. Um arquivo index.html deve ser criado para execução dos próximos exemplos como abaixo:

Exemplo 3
<!-- index.html-->
<!DOCTYPE html>
<html>
  <head>
    <title>title </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
      <script src="script.js"></script>
      <script src="script2.js"></script>
  </body>
</html>
Saída
-

Nessa abordagem, todos os recursos disponíveis em ambos arquivos são visíveis de forma global, não sendo possível definir nenhum tipo de restrição de acesso a recursos que não desejamos compartilhar.

A integração depende diretamente do framework, linguagem ou outra tecnologia que utiliza a linguagem JS como linguagem de programação principal ou de extensão.

Cada tecnologia possui suas próprios meios de integração com JS, não ficando restrito à integração com HTML como aborda nos exemplos.

Tendo declarados os arquivos .js mostrados anteriormente, podemos utilizar os recursos contidos em nossas bibliotecas diretamente na tag html <script> como mostrado no exemplos abaixo:

Exemplo 4
//index.html
<!-- index.html-->

<html lang="en">
  <head>
    <title>title </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
	<button onclick="funcao1()">Botão1</button>
	<button onclick="funcao2()">Botão2</button>

    <span id="spn"></span> <!-- exibe constantes ao clicar nos botões-->

	<script src="script.js"></script>
    <script src="script2.js"> <script>
  </body>
</html>
Saída
funcao1
funcao2

Para visualização da saída acima é necessário executar o exemplo utilizando um navegador Web ou compilador/interpretador JavaScript com suporte a aplicação Web.

Uma abordagem mais organizada na separação de arquivos .js em nossos programas escritos em JS, é utilizando a criação de objetos que compõem todas as variáveis, métodos e outros recursos de uma biblioteca.

Nessa abordagem mencionada acima, utilizamos o nome dos objetos para acessarmos seus recursos, tornando mais legível a origem de um recurso utilizado.

Exemplo 5
//meuObjeto.js : recursos da biblioteca
let meuObjeto = {
  var1:'',
  var2:0,
  metodo1: function(){
    return 'metodo1';
  },
  metodo2: function(){
    return 'metodo2';
  },
  metodo3: function(){
    return 'metodo3';
  }
};

function funcao_meuobjeto()
{
    meuObjeto.var1 = "testando biblioteca"; 
    console.log(meuObjeto.var1);
}

O arquivo meuObjeto.js contém apenas a declaração do um objeto de forma a encapsular todos os recursos como variáveis, constantes e funções. Para cada nova biblioteca um novo arquivo .js deve ser criado. Abaixo um exemplo de uso:

Exemplo 6
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <button onclick="funcao_meuobjeto()">Botão</button> 
    <script src="meuObjeto.js"></script>
  </body>
</html>
Saída
testando biblioteca

Para visualização da saída acima é necessário executar o exemplo utilizando um navegador Web ou compilador/interpretador JavaScript com suporte a aplicação Web.

Histórico de atualizações

  1. 15/08/2025 - revisão 4 - Ajustes: pontuais, sintaxe, objetivos e navegação 'anterior'; Correção: todos os Exemplos
  2. 26/09/2024 - revisão 2 - Ajustes pontuais
  3. 05/10/2023 - revisão 1 - Correção em layout, navegação e erros gramaticais
  4. 31/05/2023 - versão inicial
« Anterior: BÁSICO > "ENUM"
Próximo: BÁSICO > GERENCIAMENTO DE MEMÓRIA »