10

Nas linguagens de programação como Java, C# e C, quando queremos utilizar algum comando ou função devemos incluir a biblioteca onde contém os comandos que queremos ou as classes se for linguagem orientada a objeto, veja os exemplos:

Classe Scanner do Java que pertence ao pacote util, usamos o comando import para utilizar esta classe:

import java.util.Scanner;

Codigo...

Classe Regex do C# que pertence ao pacote RegularExpressions, usamos o comando using para utilizar esta classe:

using System.Text.RegularExpressions;

Codigo...

Função pow() do C que pertence a biblioteca math.h, neste caso utilizamos o #include para utilizar a função:

#include <math.h>

Codigo...

Porem, em JavaScript eu percebo que não é assim, eu apenas digito o comando que eu quero por exemplo console.log() ou array.push('Stack') e utilizo o método ou classe que eu quiser.

Minha dúvida:

Eu gostaria de saber como funciona a importação de bibliotecas no JavaScript e como o JavaScript gerencia suas bibliotecas tantas como da própria linguagem como as de terceiros?

3
  • Se tiver alguma sugestão de melhoria pode deixar um comentário por favor.
    – gato
    Commented 8/05/2016 às 20:49
  • 2
    +1 esta pergunta é muito importante para o JavaScript. Porque o modelo "nativo" tem dado muitas dores de cabeça, porque houve uma guerra grande entre AMD e CJS no passado e porque o futuro está aí com ES6 harmony. Dei uma resposta +/- sucinta. Espero que ajude a perceber os conceitos pelo menos.
    – Sergio
    Commented 8/05/2016 às 21:28
  • @Sergio sim, e esta minha duvida tem sido uma barreira para mim, já que eu vim do programação para desktop :) vou ler sua resposta com calma :D
    – gato
    Commented 8/05/2016 às 21:33

1 Resposta 1

10

Sendo conciso pode dizer-se que há 3 gerações diferentes no que respeita a importar bibliotecas.

  • incluíndo a biblioteca no espaço global (a mais antiga e mais comum)
  • usando gestores de pacotes/bibliotecas/dependências (para quem sabe e precisa)
  • usando import (o futuro, ES6 e ES7)

A maneira mais comum ainda hoje é importar para o espaço global, inserindo o ficheiro diretamente na página. Exemplos disso são o jQuery, Angular, Mootools, etc quando carregado no HTML com por exemplo:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Dessa maneira as variáveis que forem globais nesse ficheiro serão globais na minha aplicação.

Isso é simples, mas pode causar problemas quando estamos a importar código que exporta muitas variáveis/nomes para o espaço global. Se pensar-mos que cada aplicação pode ter 20 ficheiros .js a serem carregados então é fácil perceber que a probablidade de sobreposição de nomes e variáveis que apagam outras é grande. Isto funciona bem em projetos pequenos e onde o autor tem controlo/conhecimento de que ficheiros inclui na aplicação.

Mais tarde surgiram gerenciadores como o require.js e o browserify (que converte módulos no Node.js para o browser).

A ideia é simples, estes programs carregam as bibliotecas necessárias e as suas dependências e depois expõe variáveis escolhidas dessas bibliotecas a um escopo defenido/limitado. Ou seja, o código que temos nunca é corrido no espaço global, mas sim dentro de funções para limitar o escopo e só com acesso às variáveis que o gerneciador de módulos tiver configuradas. Basicamente, exemplo minimalista:

requirejs(['jquery'], function( $ ) {
    // aqui dentro o $ do jQuery está disponivel.
    // o código da aplicação coloca-se a partir daqui
});

Paralelo a esta realidade mais ou menos habitual no browser surgiu o Node.js, que é JavaScript no lado do servidor. Aí foi adotado o modelo CJS. Que basicamente faz com que cada ficheiro nunca exporta para o espaço global, e tudo o que entra no ficheiro (módulo) tem de entrar via require.

var $ = require('jquery');
exports.myExample = function () {};

Isto seria o exepmlo equivalente, se bem que o jQuery não se usa no Node.js. Mas segúindo a comparação vê-mos que dentro desse ficheiro o $ está disponivel depois de requerido o módulo e atribuído à variável. O exports é a prta de passagem para o mundo exterior e é o que vai ser passado à proxima variável que fizer var x = require(etc...);

O futuro é usar [import]3 que faz parte das especificações ES6 e ES7 mas que ainda não está disponivel nos browsers. Estes módulos (em tempos chamados de Harmony) são inspirados no modelo do Node.js (CJS). Apesar de isto pertencer ao futuro, é contudo possivel hoje escrever JavaScript com esta sintaxe e depois converter para o browser com Babelify (Babel + Browserify), que são simuladores (bem fiáveis e muito usados). Assim escre-ve-se código que não precisa ser mudado no futuro.

Esta nova maneira de carregar dependências é muito útil e esperada. Neste caso futuro a sintaxe é:

// para importar todas as variáveis globais nesse "meu-modulo"
// e colocar numa nova variável chamada "meuModulo":
import * as meuModulo from "meu-modulo"; 

// para importar somente a variável meuModulo desse "meu-modulo"
import {meuModulo} from "meu-modulo"; 

// para importar e dar novo nome ao mesmo tempo (multiplos nomes/variáveis neste exemplo)
import {meuModulo as m, calculadora as c} from "meu-modulo"; 

Uma diferença importante entre este modelo e CJS é que na ES6/7 é possivel usar o export multiplas vezes para disponibilizar essas funcionalidades a "quem importar" esse ficheiro.

Um exemplo:

ficheiro main.js

import {closest, getElements} from 'utils';
// ou até import * as utils from 'utils'
getElements('div').forEach(el => {
    el.innerHTML = 'foo';
});

ficheiro utils.js

export function getElements(what, rel) {
    if (typeof what != 'string' && typeof what != 'undefined') return what.tagName ? [what] : what;
    var els = (rel || document).querySelectorAll(what);
    return [].slice.call(els);
}
export function getClosest(el, selector) {
    while (el && !el.matches(selector)) {
        el = el.parentElement;
    }
    return el;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .