Comments

O RequireJS é uma biblioteca para carregar arquivos e módulos javascript que também gerencia as dependências de cada módulo.

Exemplo:

Você tem um módulo de login que depende de um módulo ajax que por sua vez depende de um módulo parseJSON. Ao fazer a requisição do módulo ajax o requirejs vai automáticamente carregar antes o módulo parseJSON e quaisquer dependências que o módulo parseJSON tiver, e então irá carregar o módulo ajax e por fim carregará seu módulo de login.

Por onde começar?

O primeiro passo é baixar o RequireJS no site oficial, ou se você usa o bower :

1
bower install --save requirejs

O plugin recomenda que você mantenha todo seu código javascript separado do html e então faça apenas a requisição do RequireJs:

1
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>

Talvez essa tag script tenha um pouco mais do que você está acostumado, mas é bem fácil entender, no atributo src você vai chamar normalmente o arquivo do Requirejs e no atributo data-main você vai passar o endereço do seu arquivo principal do javascript, aonde você vai carregar os seus módulos (sem a extensão .js). Note então que a minha lib que foi instalada pelo bower está na pasta bower_components/requirejs e o meu arquivo principal do javascript está na pasta scripts e se chama main.js.

Criando um módulo:

Um módulo é diferente de um arquivo javascript tradicional, é importante entender que cada módulo cria um novo escopo o que evita poluir o namespace global e faz com que um módulo não entre em conflito com outros, um módulo também pode listar suas dependências e trazer elas sem precisar de uma referência a objetos globais e sim receber elas como argumentos na função que define o módulo. Os módulos do RequireJS são extensões do Javascript Module Pattern, com o benefício de não precisar de variáveis globais.

Definir um módulo é simples:


Se o seu módulo não tem nenhuma dependência e possui apenas uma coleção, então você pode passar ele como um objeto literal para a função define do RequireJs ex.:

1
2
3
4
5
6
define({
    user: {
      name: 'Rafael',
      age: '24 years'
    }
});

Caso seu módulo não tenha nenhuma dependência mas é uma função, então você apenas passa uma função como parametro que pode retornar o que você quer tornar público ou a propria função ex.:

1
2
3
4
5
6
define(function () {
  function doSomething (arguments) {
      var foo = bar;
  }
  return doSomething;
});

Caso o seu módulo tenha dependências você precisa apenas passar um array para a função define com as dependências antes de passar a função ex.:

1
2
3
4
5
6
7
8
9
define([
  'lib/ajax'
], function (ajaxModule) {
  function userLogin (user, key) {
      var url = 'http:/login/' + user + '/' + key;
      ajaxModule(url);
  }
  return userLogin;
})

No exemplo acima o módulo de ajax está dentro de uma pasta chamada lib.


E a requisição do seu módulo de login ficaria no arquivo main.js de alguma das duas formas

Caso o seu módulo não retorne nenhum valor e seja apenas uma função que será auto executada:

1
require(['login', 'otherModule']);

Caso o seu módulo esteja retornando algum valor mesmo que este seja a própria função (mais utilizado quando o seu módulo precisa de algum argumento para funcionar):

1
2
3
4
5
define([
  'modules/login'
], function (userLogin) {
  userLogin('foo', 777);
})

Acho que já deu para pegar um pouco do que é o RequireJS e como mudularizar seu código com ele. Em breve farei outros posts mostrando como carregar códigos de terceiros que não são módulos AMD, arquivos de templates, usar o RequireJS para executar seus testes automatizados e otimizar o RequireJS com RequireJS Optimizer.

Comments

Me lembro do final de 2010 começo de 2011, o Lucas Elias bravo porque eu não conseguia fazer coisas com jQuery e o quanto eu era preguiçoso e dependente dele, eu não sabia o quanto simples era entender os meus problemas, o medo do novo me fazia travar e não ser sucinto ao perguntar para o google como resolver os meus problemas, o Lucas como todo bom professor me mostrava o caminho e me mandava andar, e então eu parava e falava: “não consigo” 1.

Tudo era tão óbvio mas ficava tão difícil porque minha cabeça precisava que tudo fosse complexo, acho que vai ser difícil eu me explicar, se alguém entender isso me fala ;)

3 anos depois eu sinto que estou começando a entender os meus problemas, aprendendo a aprender, enxergando de forma simples e sucinta o que eu quero, recentemente andei praticando muito Rubber Duck Debugging quando estou sozinho e a cada dia que passa me sinto mais tranquilo e confiança para mergulhar em novas disciplinas, a fonte do conhecimento tem me deixado viciado e não consigo mais passar uma semana sem aprender algo novo, a intenção desse post é resumir com poucas palavras o que eu aprendi em 3 anos de me divertindo com desenvolvimento web:

  • Não importa a ordem que você aprende, jQuery ou Javascript primeiro tanto faz, só aprenda algo novo sempre.
  • Dê o seu melhor, o seu melhor sempre será o suficiente.
  • Desconfie de tudo que for fácil.
  • O Google é um psicólogo, conte seus problemas para ele sem omitir informações e ele saberá o que te responder.
  • Quanto mais você aprende mais você tem que aprender.
  • Rubber Duck Debugging é a prova de falhas.
  • Cuidado com o excesso de prática e falta de teoria.
  • Um passo de cada vez e você chega lá.
  • Pair Programming, TDD, BDD, Clean Code e Agile vão fazer você se frustrar menos.

* O Renan Ivo procura perguntas de pessoas no Stack Overflow sobre uma tecnológia que ele quer aprender e tenta encontrar as soluções como forma de aprender, acho isso fantástico.

E no final queria agradecer a algumas pessoas que me ensinaram muito durante esse tempo e que eu admiro muito profissionalmente:

a Paula Mariano, ao Leo Caseiro, ao Lucas Elias, ao Hugo Campos, ao Fabio Lima, ao Lucas Machado, ao Eduardo Omine, ao Bruno Soares e ao Renan Ivo, todos vocês são profissionais fantásticos, pessoas com quem eu adorei trabalhar e tento todos os dias juntar um pouco de cada um de vocês para ser feliz no meu trabalho.

1acho que ele devia ter a mesma sensação que eu tenho quando tento ensinar pro cachorro da minha namorada que ele tem que andar comigo e ele para e não se move de jeito nenhum.