summaryrefslogtreecommitdiffhomepage
path: root/pt-br
diff options
context:
space:
mode:
authorchenbridge <chenbridge@Bridge-Mac.local>2016-02-25 09:13:33 +0800
committerchenbridge <chenbridge@Bridge-Mac.local>2016-02-25 09:13:33 +0800
commitfbe569a5252d88e0b24ae05c1faa903a4da3d138 (patch)
treeb752dd72cbfcdac2d7192e92087cfeb7de9d9394 /pt-br
parent29555c9b70dbf5d6b2967215651d90c179c2466f (diff)
parent6439e7f2d87107ada7042faad172bfac6041a32d (diff)
Merge remote-tracking branch 'adambard/master'
Diffstat (limited to 'pt-br')
-rw-r--r--pt-br/amd.html.markdown218
-rw-r--r--pt-br/hy-pt.html.markdown2
-rw-r--r--pt-br/markdown-pt.html.markdown8
3 files changed, 223 insertions, 5 deletions
diff --git a/pt-br/amd.html.markdown b/pt-br/amd.html.markdown
new file mode 100644
index 00000000..690fc8da
--- /dev/null
+++ b/pt-br/amd.html.markdown
@@ -0,0 +1,218 @@
+---
+category: tool
+tool: amd
+contributors:
+ - ["Frederik Ring", "https://github.com/m90"]
+translators:
+ - ["Felipe Tarijon", "http://nanoincub.com/"]
+lang: ptr-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)
diff --git a/pt-br/hy-pt.html.markdown b/pt-br/hy-pt.html.markdown
index 4230579d..5fa4df75 100644
--- a/pt-br/hy-pt.html.markdown
+++ b/pt-br/hy-pt.html.markdown
@@ -171,6 +171,6 @@ Este tutorial é apenas uma introdução básica para hy/lisp/python.
Docs Hy: [http://hy.readthedocs.org](http://hy.readthedocs.org)
-Repo Hy no Github: [http://github.com/hylang/hy](http://github.com/hylang/hy)
+Repo Hy no GitHub: [http://github.com/hylang/hy](http://github.com/hylang/hy)
Acesso ao freenode irc com #hy, hashtag no twitter: #hylang
diff --git a/pt-br/markdown-pt.html.markdown b/pt-br/markdown-pt.html.markdown
index 4030ce3c..f22093f9 100644
--- a/pt-br/markdown-pt.html.markdown
+++ b/pt-br/markdown-pt.html.markdown
@@ -56,7 +56,7 @@ __E este também está._
*--Danouse! Este também__*
<!-- Em GitHub Flavored Markdown, que é usado para processar arquivos Markdown
-Github, nós também temos: -->
+GitHub, nós também temos: -->
~~Este texto é processado com tachado.~~
@@ -148,7 +148,7 @@ dentro do seu código -->
John não sabia nem o que o função 'goto()' fazia!
-<!-- Em Github Flavored Markdown, você pode usar uma sintaxe especial para o código -->
+<!-- Em GitHub Flavored Markdown, você pode usar uma sintaxe especial para o código -->
\`\`\`ruby <!-- exceto remover essas barras invertidas quando você faz isso, apenas ```
ruby! -->
@@ -157,7 +157,7 @@ def foobar
end
\`\`\` <!-- Aqui também, não barras invertidas, apenas ``` -->
-<-- O texto acima não requer recuo, mas o Github vai usar a sintaxe
+<-- O texto acima não requer recuo, mas o GitHub vai usar a sintaxe
destacando do idioma que você especificar após a ``` -->
<!-- Regra Horizontal (<hr />) -->
@@ -230,7 +230,7 @@ Quero digitar * Este texto entre asteriscos *, mas eu não quero que ele seja
em itálico, então eu faço o seguinte: \*Este texto entre asteriscos \*.
<!-- Tabelas -->
-<!-- Tabelas estão disponíveis apenas no Github Flavored Markdown e são ligeiramente
+<!-- Tabelas estão disponíveis apenas no GitHub Flavored Markdown e são ligeiramente
complicadas, mas se você realmente quer: -->
| Col1 | Col2 | Col3 |