summaryrefslogtreecommitdiffhomepage
path: root/pt-br/amd.html.markdown
diff options
context:
space:
mode:
Diffstat (limited to 'pt-br/amd.html.markdown')
-rw-r--r--pt-br/amd.html.markdown218
1 files changed, 0 insertions, 218 deletions
diff --git a/pt-br/amd.html.markdown b/pt-br/amd.html.markdown
deleted file mode 100644
index 38c1f70f..00000000
--- a/pt-br/amd.html.markdown
+++ /dev/null
@@ -1,218 +0,0 @@
----
-category: tool
-tool: amd
-contributors:
- - ["Frederik Ring", "https://github.com/m90"]
-translators:
- - ["Felipe Tarijon", "http://nanoincub.com/"]
-lang: pt-br
-filename: learnamd-pt.js
----
-
-## Começando com AMD
-
-A API de Definição de Módulos Assíncrona **Asynchronous Module Definition**
-especifica um mecanismo para definição de módulos em JavaScript para os quais o
-módulo e suas dependências podem ser carregados de forma assíncrona. Isso é
-particularmente bem adequado para o ambiente do browser onde o carregamento de
-módulos de forma síncrona fica sujeito a problemas de performance, usabilidade,
-debugging e problemas de acesso em requisições cross-domain.
-
-### Conceito básico
-```javascript
-// O básico da API de AMD consiste de nada mais que dois métodos: `define` e `require`
-// e isso é tudo sobre a definição de módulo e consumo:
-// `define(id?, dependências?, factory)` define um módulo
-// `require(dependências, callback)` importa uma série de dependências e
-// consome elas no callback passado como parâmetro.
-
-// Vamos começar usando o define para definir um novo módulo
-// que não tem dependências. Nós vamos fazer isso passando um nome
-// e uma função factory para definir:
-define('awesomeAMD', function(){
- var isAMDAwesome = function(){
- return true;
- };
- // O valor retornado da função de factory do módulo é
- // o que os outros módulos ou chamadas de require irão
- // receber quando requisitarem nosso módulo `awesomeAMD`.
- // O valor exportado pode ser qualquer coisa, (construtor) funções,
- // objetos, primitives, até mesmo undefined (apesar de que não irão ajudar muito).
- return isAMDAwesome;
-});
-
-// Agora, vamos definir outro módulo que depende do nosso módulo `awesomeAMD`.
-// Perceba que existe um argumento adicional definindo nossas dependências do
-// módulo agora:
-define('loudmouth', ['awesomeAMD'], function(awesomeAMD){
- // dependências serão passadas como argumentos da factory
- // na ordem que elas forem especificadas
- var tellEveryone = function(){
- if (awesomeAMD()){
- alert('Isso é tãaaao loko!');
- } else {
- alert('Bem estúpido, né não?');
- }
- };
- return tellEveryone;
-});
-
-// Agora que nós sabemos como usar o define, vamos usar o `require` para
-// começar nosso programa. A assinatura do `require` é `(arrayDedependências, callback)`.
-require(['loudmouth'], function(loudmouth){
- loudmouth();
-});
-
-// Para fazer esse tutorial executável, vamos implementar uma versão muito básica
-// (não-assíncrona) de AMD bem aqui nesse lugar:
-function define(nome, deps, factory){
- // perceba como os módulos sem dependências são manipulados
- define[nome] = require(factory ? deps : [], factory || deps);
-}
-
-function require(deps, callback){
- var args = [];
- // primeiro vamos recuperar todas as dependências necessárias
- // pela chamada requerida
- for (var i = 0; i < deps.length; i++){
- args[i] = define[deps[i]];
- }
- // corresponder todas as dependências da função de callback
- return callback.apply(null, args);
-}
-// você pode ver esse código em ação aqui: http://jsfiddle.net/qap949pd/
-```
-
-### Uso na vida real com require.js
-
-Em contraste com o exemplo introdutório, `require.js` (a biblioteca mais popular de AMD) na verdade implementa o **A** do **AMD**, permitindo que você carregue os módulos e suas
-dependências via XHR:
-
-```javascript
-/* file: app/main.js */
-require(['modules/algumaClasse'], function(AlgumaClasse){
- // o callback é deferido até que a dependencia seja carregada
- var coisa = new AlgumaClasse();
-});
-console.log('Então aqui estamos nós, esperando!'); // isso vai rodar primeiro
-```
-
-Por convenção, você geralmente guarda um módulo em um arquivo. `require.js` pode resolver nome de módulos baseado no caminho das pastas, então você não precisa nomear os seus módulos, mas sim simplesmente referenciar eles usando sua origem. No exemplo `algumaClasse` é adotado a pasta `modules`, relativa a configuração da sua `baseUrl`:
-
-* app/
- * main.js
- * modules/
- * algumaClasse.js
- * algunsHelpers.js
- * ...
- * daos/
- * coisas.js
- * ...
-
-Isso significa que nós podemos definir `algumaClasse` sem especificar o id de um módulo:
-
-```javascript
-/* arquivo: app/modules/algumaClasse.js */
-define(['daos/coisas', 'modules/algunsHelpers'], function(coisasDao, helpers){
- // definição de módulo, claro, irá acontecer também de forma assíncrona
- function AlgumaClasse(){
- this.metodo = function(){/**/};
- // ...
- }
- return AlgumaClasse;
-});
-```
-Para alterar o comportamento padrão de mapeamento de caminho de pastas utilize
-`requirejs.config(configObj)` em seu `main.js`:
-
-```javascript
-/* arquivo: main.js */
-requirejs.config({
- baseUrl : 'app',
- paths : {
- // você pode também carregar módulos de outros locais
- jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
- coolLibFromBower : '../bower_components/cool-lib/coollib'
- }
-});
-require(['jquery', 'coolLibFromBower', 'modules/algunsHelpers'], function($, coolLib, helpers){
- // um arquivo `main` precisa chamar o require pelo menos uma vez,
- // caso contrário, o código jamais rodará
- coolLib.facaAlgoDoidoCom(helpers.transform($('#foo')));
-});
-```
-Apps baseados em `require.js` geralmente terão u´m único ponto de acesso (`main.js`) que é passado à tag script do `require.js` como um data-attribute. Ele vai ser automaticamente carregado e executado com o carregamento da página:
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
- <title>Umas 100 tags de script? Nunca mais!</title>
-</head>
-<body>
- <script src="require.js" data-main="app/main"></script>
-</body>
-</html>
-```
-
-### Otimizando um projeto inteiro utilizando r.js
-
-Muitas pessoas preferem usar AMD para sanar a organização do código durante o desenvolvimento, mas continuam querendo colocar um único arquivo de script em produção ao invés de realizarem centenas de requisições XHRs no carregamento da página.
-
-`require.js` vem com um script chamado `r.js` (que você vai provavelmente rodar em node.js, embora Rhino suporte também) que você pode analisar o gráfico de dependências de seu projeto, e fazer em um único arquivo contendo todos os seus módulos (corretamente nomeados), minificados e prontos para serem consumidos.
-
-Instale-o utilizando `npm`:
-```shell
-$ npm install requirejs -g
-```
-
-Agora você pode alimentá-lo com um arquivo de configuração:
-```shell
-$ r.js -o app.build.js
-```
-
-Para o nosso exemplo acima a configuração pode ser essa:
-```javascript
-/* file : app.build.js */
-({
- name : 'main', // nome do ponto de acesso
- out : 'main-built.js', // nome o arquivo para gravar a saída
- baseUrl : 'app',
- paths : {
- // `empty:` fala para o r.js que isso ainda deve ser baixado da CDN, usando
- // o local especificado no `main.js`
- jquery : 'empty:',
- coolLibFromBower : '../bower_components/cool-lib/coollib'
- }
-})
-```
-
-Para usar o arquivo gerado, em produção, simplesmente troque o `data-main`:
-```html
-<script src="require.js" data-main="app/main-built"></script>
-```
-
-Uma incrível e detalhada visão geral [de build options](https://github.com/jrburke/r.js/blob/master/build/example.build.js) está disponível no repositório do GitHub.
-
-### Tópicos não abordados nesse tutorial
-* [Plugins de carregamento / transforms](http://requirejs.org/docs/plugins.html)
-* [CommonJS style carregamento e exportação](http://requirejs.org/docs/commonjs.html)
-* [Configuração avançada](http://requirejs.org/docs/api.html#config)
-* [Shim configuration (carregando módulos sem AMD)](http://requirejs.org/docs/api.html#config-shim)
-* [Carregando e otimizando CSS com require.js](http://requirejs.org/docs/optimization.html#onecss)
-* [Usando almond.js para builds](https://github.com/jrburke/almond)
-
-### Outras leituras:
-
-* [Especificação oficial](https://github.com/amdjs/amdjs-api/wiki/AMD)
-* [Por quê AMD?](http://requirejs.org/docs/whyamd.html)
-* [Universal Module Definition](https://github.com/umdjs/umd)
-
-### Implementações:
-
-* [require.js](http://requirejs.org)
-* [dojo toolkit](http://dojotoolkit.org/documentation/tutorials/1.9/modules/)
-* [cujo.js](http://cujojs.com/)
-* [curl.js](https://github.com/cujojs/curl)
-* [lsjs](https://github.com/zazl/lsjs)
-* [mmd](https://github.com/alexlawrence/mmd)