ExigirJS é uma maneira eficaz de melhorar a velocidade e a qualidade do seu código JavaScript, além de torná-lo muito mais legível e fácil de manter.
Neste artigo, apresentarei a você o RequireJS e como você pode começar a usá-lo. Vamos passar a exigir arquivos e definir um módulo e até tocar em otimização.
Em termos simples, o require.js é um carregador de scripts que permite que você insira seu código JavaScript em arquivos e módulos, gerenciando assim as dependências de cada modelo.
Para começar a trabalhar com o RequireJS e sua Definição de Módulo Assíncrono (AMD), precisamos primeiro baixar então, link para o arquivo require.js na cabeça do nosso documento da seguinte forma:
Você pode estar se perguntando qual é o atributo data-main , usar RequireJS significa que, quando você chama require no cabeçalho do seu documento, você também está vinculando ao arquivo principal do seu aplicativo JavaScript, o atributo data-main é um link para o principal arquivo JavaScript para seu aplicativo, neste caso main.js. (Observe que o RequireJS adiciona automaticamente o .js no final do nome do arquivo.)
Neste arquivo main.js, você colocará a configuração do RequireJS, carregará seus módulos e definirá um caminho base para uso ao exigir arquivos.
O RequireJS usa uma função simples require para carregar scripts, neste exemplo o RequireJS carrega o jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Uma das melhores coisas sobre o RequireJS é que ele é extremamente legível, se você olhar para aquele bloco de código, você verá que primeiro precisa pegar o arquivo com o nome de jquery.js e ele passa uma função anônima com $ do jQuery como parâmetro , quando isso for feito, você está livre para usar todo o código JQuery que quiser.
Agora, você normalmente não teria a biblioteca jQuery em um arquivo chamado jquery.js, como a maioria dos plugins e frameworks, normalmente escolhemos carregar a partir do GitHub ou do Google CDN, e para isso precisamos configurar os caminhos que eles apontam para o lugar certo:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Isso significa que você pode exigir o jQuery via Google e usá-lo sem problemas. (Note que eu usei o nome "jquery" neste exemplo, mas você poderia chamá-lo como quiser.)
Usando o padrão AMD significa que nosso código pode ser estruturado em módulos; esses modelos são apenas pedaços de código que fazem algo em nosso aplicativo. Você pode colocar duas linhas de código em um módulo ou 100, isso depende apenas do que você deseja que o módulo faça.
Para definir um módulo, usamos código como este:
define(function () {function add (x,y) {return x + y;}});Neste exemplo, criei uma função add simples sem dependências, mas se essa função precisasse que o jQuery funcionasse corretamente, a função define seria estruturada assim:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Usando essa sintaxe, dizemos ao JavaScript para obter o jQuery primeiro e depois executar o código para que o jQuery esteja disponível quando necessário. Também podemos usar isso em módulos que escrevemos em arquivos JavaScript, não se limitando a frameworks ou plugins.
Como você pode ver, o RequireJS é uma ótima ferramenta para organizar seus arquivos em módulos e apenas carregar o que você precisa. A desvantagem é que muitos arquivos JavaScript resultam em tempos de carregamento ruins, e é por isso que o RequireJS inclui um otimizador para coletar os dados de todos os arquivos e colocá-los em um único arquivo minimizado.
Em suma, RequireJS é uma das melhores maneiras de organizar e otimizar seu JavaScript para a web moderna.
Você já usou o RequireJS em um projeto? Melhorou seu fluxo de trabalho? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de caixas via Shutterstock.