iskm/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2024-12-23 17:41:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Spanish translation version 1

Browse Source
This commit is contained in:
Damaso Sanoja 2015-10-17 11:35:56 -04:30
parent 172797939b
commit 0f003ef3e9
1 changed files with 16 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
es-es/amd-es.html.markdown
View File

@ -1,423 +1,214 @@
--- ---
category: tool category: tool
tool: amd tool: amd
contributors: contributors:
- ["Frederik Ring", "https://github.com/m90"] - ["Frederik Ring", "https://github.com/m90"]
translators: translators:
- ["Damaso Sanoja", "https://github.com/damasosanoja"] - ["Damaso Sanoja", "https://github.com/damasosanoja"]
filename: learnamd-es.js filename: learnamd-es.js
lang: es-es lang: es-es
--- ---
## Iniciando con AMD ## Iniciando con AMD
El API del **Módulo de Definición Asíncrono** especifica un mecanismo para definir módulos JavaScript de manera tal que tanto el módulo como sus dependencias puedan ser cargadas de manera asíncrona. Esto es particularmente adecuado para el entorno del navegador donde la carga sincronizada de los módulos genera problemas de rendimiento, usabilidad, depuración y acceso de multi-dominios.
El API del **Módulo de Definición Asíncrono** especifica un mecanismo para definir módulos
JavaScript de manera que tanto el módulo como sus dependencias puedan ser cargadas de manera asíncrona. Esto es particularmente adecuado para el entorno del navegador donde la carga sincronizada de los módulos genera problemas de rendimiento, usabilidad, depuración y acceso cruzado de dominios.
### Conceptos básicos ### Conceptos básicos
```javascript ```javascript
// El API básico de AMD consiste en tan solo dos métodos: `define` y `require`
// El API básico de AMD consiste en nada más que dos métodos: `define` y `require`
// y se basa en la definición y consumo de los módulos: // y se basa en la definición y consumo de los módulos:
// `define(id?, dependencias?, fábrica)` define un módulo
// `define(id?, dependencies?, factory)` define un módulo // `require(dependencias, callback)` importa un conjunto de dependencias y
// las consume al invocar el callback
// `require(dependencies, callback)` importa un conjunto de dependencias y
// las consume en el callback invocado
// Comencemos usando define para definir un nuevo módulo // Comencemos usando define para definir un nuevo módulo
// que no posee dependencias. Lo haremos enviando un nombre // que no posee dependencias. Lo haremos enviando un nombre
// y una función fábrica para definirla:
// y una función factoría para definirla:
define('awesomeAMD', function(){ define('awesomeAMD', function(){
var isAMDAwesome = function(){ var isAMDAwesome = function(){
return true; return true;
}; };
// El valor que regresa la función fábrica del módulo será
// El valor que regresa de la función factoría del módulo es // lo que los otros módulos o llamados require recibirán cuando
// soliciten nuestro módulo `awesomeAMD`.
// aquello que los otros módulos o llamados require reciben cuando
// solicitan nuestro módulo `awesomeAMD`.
// El valor exportado puede ser cualquier cosa, funciones (constructores), // El valor exportado puede ser cualquier cosa, funciones (constructores),
// objetos, primitivos, incluso indefinidos (aunque eso no ayuda mucho). // objetos, primitivos, incluso indefinidos (aunque eso no ayuda mucho).
return isAMDAwesome; return isAMDAwesome;
}); });
// Ahora definamos otro módulo que dependa de nuestro módulo `awesomeAMD`. // Ahora definamos otro módulo que dependa de nuestro módulo `awesomeAMD`.
// Observe que ahora hay un argumento adicional que define // Observe que ahora hay un argumento adicional que define
// las dependencias de nuestro módulo: // las dependencias de nuestro módulo:
define('loudmouth', ['awesomeAMD'], function(awesomeAMD){ define('loudmouth', ['awesomeAMD'], function(awesomeAMD){
// las dependencias serán enviadas a los argumentos de la fábrica
// las dependencias serán enviadas a los argumentos de la factoría
// en el orden que sean especificadas // en el orden que sean especificadas
var tellEveryone = function(){ var tellEveryone = function(){
if (awesomeAMD()){ if (awesomeAMD()){
alert('This is sOoOo rad!'); alert('This is sOoOo rad!');
} else { } else {
alert('Pretty dull, isn\'t it?'); alert('Pretty dull, isn\'t it?');
} }
}; };
return tellEveryone; return tellEveryone;
}); });
// Como ya sabemos utilizar define usemos ahora `require` para poner en marcha // Como ya sabemos utilizar define usemos ahora `require` para poner en marcha
// nuestro programa. La firma de `require` es `(arrayOfDependencies, callback)`. // nuestro programa. La firma de `require` es `(arrayOfDependencies, callback)`.
require(['loudmouth'], function(loudmouth){ require(['loudmouth'], function(loudmouth){
loudmouth(); loudmouth();
}); });
// Para hacer que este tutorial corra código, vamos a implementar una // Para hacer que este tutorial corra código, vamos a implementar una
// versión muy básica (no-asíncrona) de AMD justo aquí: // versión muy básica (no-asíncrona) de AMD justo aquí:
function define(name, deps, factory){ function define(name, deps, factory){
// observa como son manejados los módulos sin dependencias // observa como son manejados los módulos sin dependencias
define[name] = require(factory ? deps : [], factory || deps); define[name] = require(factory ? deps : [], factory || deps);
} }
function require(deps, callback){ function require(deps, callback){
var args = []; var args = [];
// primero recuperemos todas las dependencias que necesita // primero recuperemos todas las dependencias que necesita
// el llamado require // el llamado require
for (var i = 0; i < deps.length; i++){ for (var i = 0; i < deps.length; i++){
args[i] = define[deps[i]]; args[i] = define[deps[i]];
} }
// satisfacer todas las dependencias del callback // satisfacer todas las dependencias del callback
return callback.apply(null, args); return callback.apply(null, args);
} }
// puedes ver este código en acción aquí: http://jsfiddle.net/qap949pd/ // puedes ver este código en acción aquí: http://jsfiddle.net/qap949pd/
``` ```
### Uso en el mundo real con require.js ### Uso en el mundo real con require.js
En contraste con el ejemplo introductorio, `require.js` (la librería AMD más popular) implementa la **A** de **AMD**, permitiéndote cargar los módulos y sus dependencias asincrónicamente via XHR: En contraste con el ejemplo introductorio, `require.js` (la librería AMD más popular) implementa la **A** de **AMD**, permitiéndote cargar los módulos y sus dependencias asincrónicamente via XHR:
```javascript ```javascript
/* file: app/main.js */ /* file: app/main.js */
require(['modules/someClass'], function(SomeClass){ require(['modules/someClass'], function(SomeClass){
// el callback es diferido hasta que la dependencia sea cargada // el callback es diferido hasta que la dependencia sea cargada
var thing = new SomeClass(); var thing = new SomeClass();
}); });
console.log('So here we are, waiting!'); // esto correrá primero console.log('So here we are, waiting!'); // esto correrá primero
``` ```
Por convención, usualmente guardas un módulo en un fichero. `require.js` puede resolver los nombres de los módulos basados en rutas de archivo, de forma que no tienes que nombrar tus módulos, simplemente referenciarlos usando su ubicación. En el ejemplo `someClass` asumimos que se ubica en la carpeta `modules`, relativa a tu `baseUrl` configurada:
Por convención, usualmente guardas un módulo en un fichero. `require.js` puede resolver los nombres de los módulos basados en rutas de archivo, de forma que no tienes que nombrar tus módulos, simplemente referenciarlos usando su ubicación. En el ejemplo `someClass` es asumido que se ubica en la carpeta `modules`, relativa a tu `baseUrl` configurada:
* app/ * app/
* main.js * main.js
* modules/ * modules/
* someClass.js * someClass.js
* someHelpers.js * someHelpers.js
* ... * ...
* daos/ * daos/
* things.js * things.js
* ... * ...
Esto significa que podemos definir `someClass` sin especificar su id de módulo: Esto significa que podemos definir `someClass` sin especificar su id de módulo:
```javascript ```javascript
/* file: app/modules/someClass.js */ /* file: app/modules/someClass.js */
define(['daos/things', 'modules/someHelpers'], function(thingsDao, helpers){ define(['daos/things', 'modules/someHelpers'], function(thingsDao, helpers){
// definición de módulo, por supuesto, ocurrirá también asincrónicamente // definición de módulo, por supuesto, ocurrirá también asincrónicamente
function SomeClass(){ function SomeClass(){
this.method = function(){/**/}; this.method = function(){/**/};
// ... // ...
} }
return SomeClass; return SomeClass;
}); });
``` ```
Para alterar el comportamiento del mapeo de ruta usa `requirejs.config(configObj)` en tu `main.js`: Para alterar el comportamiento del mapeo de ruta usa `requirejs.config(configObj)` en tu `main.js`:
```javascript ```javascript
/* file: main.js */ /* file: main.js */
requirejs.config({ requirejs.config({
baseUrl : 'app', baseUrl : 'app',
paths : { paths : {
// también puedes cargar módulos desde otras ubicaciones // también puedes cargar módulos desde otras ubicaciones
jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min', jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
coolLibFromBower : '../bower_components/cool-lib/coollib' coolLibFromBower : '../bower_components/cool-lib/coollib'
} }
}); });
require(['jquery', 'coolLibFromBower', 'modules/someHelpers'], function($, coolLib, helpers){ require(['jquery', 'coolLibFromBower', 'modules/someHelpers'], function($, coolLib, helpers){
// un fichero `main` necesita llamar a require al menos una vez, // un fichero `main` necesita llamar a require al menos una vez,
// de otra forma jamás correrá el código // de otra forma jamás correrá el código
coolLib.doFancyStuffWith(helpers.transform($('#foo'))); coolLib.doFancyStuffWith(helpers.transform($('#foo')));
}); });
``` ```
Las aplicaciones basadas en `require.js` usualmente tendrán un solo punto de entrada (`main.js`) que se pasa a la etiqueta del script `require.js` como un atributo de datos. Será cargado y ejecutado automáticamente al cargar la página: Las aplicaciones basadas en `require.js` usualmente tendrán un solo punto de entrada (`main.js`) que se pasa a la etiqueta del script `require.js` como un atributo de datos. Será cargado y ejecutado automáticamente al cargar la página:
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Cien etiquetas de script? Nunca más!</title> <title>Cien etiquetas de script? Nunca más!</title>
</head> </head>
<body> <body>
<script src="require.js" data-main="app/main"></script> <script src="require.js" data-main="app/main"></script>
</body> </body>
</html> </html>
``` ```
### Optimizar todo un proyecto usando r.js ### Optimizar todo un proyecto usando r.js
Muchas personas prefieren usar AMD para la organización del código durante el desarrollo, pero quieren enviar para producción un solo fichero en vez de ejecutar cientos de XHRs en las cargas de página.
Muchas personas prefiere usar AMD para la sana organización del código durante el desarrollo, pero todavía prefiere enviar para producción un solo fichero en vez de ejecutar cientos de XHRs en las cargas de página.
`require.js` incluye un script llamado `r.js` (el que probablemente correrás en node.js, aunque Rhino también es soportado) que puede analizar el gráfico de dependencias de tu proyecto, y armar un solo fichero que contenga todos tus módulos (adecuadamente nombrados), minificado y listo para consumo. `require.js` incluye un script llamado `r.js` (el que probablemente correrás en node.js, aunque Rhino también es soportado) que puede analizar el gráfico de dependencias de tu proyecto, y armar un solo fichero que contenga todos tus módulos (adecuadamente nombrados), minificado y listo para consumo.
Instálalo usando `npm`: Instálalo usando `npm`:
```shell ```shell
$ npm install requirejs -g $ npm install requirejs -g
``` ```
Ahora puedes alimentarlo con un fichero de configuración: Ahora puedes alimentarlo con un fichero de configuración:
```shell ```shell
$ r.js -o app.build.js $ r.js -o app.build.js
``` ```
Para nuestro ejemplo anterior el archivo de configuración luciría así: Para nuestro ejemplo anterior el archivo de configuración luciría así:
```javascript ```javascript
/* file : app.build.js */ /* file : app.build.js */
({ ({
name : 'main', // nombre del punto de entrada
name : 'main', // name of the entry point out : 'main-built.js', // nombre del fichero donde se escribirá la salida
out : 'main-built.js', // name of the file to write the output to
baseUrl : 'app', baseUrl : 'app',
paths : { paths : {
// `empty:` le dice a r.js que esto aún debe ser cargado desde el CDN, usando
// `empty:` tells r.js that this should still be loaded from the CDN, using // la ubicación especificada en `main.js`
// the location specified in `main.js`
jquery : 'empty:', jquery : 'empty:',
coolLibFromBower : '../bower_components/cool-lib/coollib' coolLibFromBower : '../bower_components/cool-lib/coollib'
} }
}) })
``` ```
Para usar el fichero creado en producción, simplemente intercambia `data-main`: Para usar el fichero creado en producción, simplemente intercambia `data-main`:
```html ```html
<script src="require.js" data-main="app/main-built"></script> <script src="require.js" data-main="app/main-built"></script>
``` ```
Un increíblemente detallado [resumen de opciones de generación](https://github.com/jrburke/r.js/blob/master/build/example.build.js) está disponible en el repositorio de GitHub. Un increíblemente detallado [resumen de opciones de generación](https://github.com/jrburke/r.js/blob/master/build/example.build.js) está disponible en el repositorio de GitHub.
### Tópicos no cubiertos en este tutorial ### Tópicos no cubiertos en este tutorial
* [Cargador de plugins / transformaciones](http://requirejs.org/docs/plugins.html) * [Cargador de plugins / transformaciones](http://requirejs.org/docs/plugins.html)
* [Cargando y exportando estilos CommonJS](http://requirejs.org/docs/commonjs.html) * [Cargando y exportando estilos CommonJS](http://requirejs.org/docs/commonjs.html)
* [Configuración avanzada](http://requirejs.org/docs/api.html#config) * [Configuración avanzada](http://requirejs.org/docs/api.html#config)
* [Configuración de Shim (cargando módulos no-AMD)](http://requirejs.org/docs/api.html#config-shim) * [Configuración de Shim (cargando módulos no-AMD)](http://requirejs.org/docs/api.html#config-shim)
* [Cargando y optimizando CSS con require.js](http://requirejs.org/docs/optimization.html#onecss) * [Cargando y optimizando CSS con require.js](http://requirejs.org/docs/optimization.html#onecss)
* [Usando almond.js para construcciones](https://github.com/jrburke/almond) * [Usando almond.js para construcciones](https://github.com/jrburke/almond)
### Otras lecturas: ### Otras lecturas:
* [Especificaciones oficiales](https://github.com/amdjs/amdjs-api/wiki/AMD) * [Especificaciones oficiales](https://github.com/amdjs/amdjs-api/wiki/AMD)
* [¿Por qué AMD?](http://requirejs.org/docs/whyamd.html) * [¿Por qué AMD?](http://requirejs.org/docs/whyamd.html)
* [Definición Universal de Módulos](https://github.com/umdjs/umd) * [Definición Universal de Módulos](https://github.com/umdjs/umd)
### Implementaciones: ### Implementaciones:
* [require.js](http://requirejs.org) * [require.js](http://requirejs.org)
* [dojo toolkit](http://dojotoolkit.org/documentation/tutorials/1.9/modules/) * [dojo toolkit](http://dojotoolkit.org/documentation/tutorials/1.9/modules/)
* [cujo.js](http://cujojs.com/) * [cujo.js](http://cujojs.com/)
* [curl.js](https://github.com/cujojs/curl) * [curl.js](https://github.com/cujojs/curl)
* [lsjs](https://github.com/zazl/lsjs) * [lsjs](https://github.com/zazl/lsjs)
* [mmd](https://github.com/alexlawrence/mmd) * [mmd](https://github.com/alexlawrence/mmd)