javascript - Dojo require() y AMD(1.7)

data-structures js-amd

Question

Estoy teniendo una transición de tiempo heckuva a Dojo y la nueva estructura de AMD, y realmente espero que alguien pueda arrojar algo de luz sobre el concepto completo. He estado viviendo en Google durante las últimas semanas tratando de encontrar información sobre el uso, pero la estructura y las tendencias del patrón de diseño en el uso de este.

Me resulta extraño que para una aplicación javascript relativamente compleja, como para una página principal donde se deben crear y diseñar Dijits, crear elementos DOM, etc., que necesito requerir, y por lo tanto usar, una TONELADA de diferentes módulos que fueron de lo contrario, disponible en el espacio de nombres dojo antes del sistema AMD (o, al menos, no asignado a 23 vars diferentes).

Ejemplo:

require([''dijit/form/ValidationTextBox'', ''dijit/form/SimpleTextarea'', ''dijit/form/CheckBox'', ''dijit/Dialog'', ''dijit/form/Form''])
require([''dojo/ready'', ''dojo/parser'', ''dojo/dom-style'', ''dijit/registry'', ''dojo/dom'', ''dojo/_base/connect'', ''dojo/dom-construct''],
function(ready, parser, style, registry, dom, event, construct){
//...etc
}

Estos son solo algunos de los módulos para una de las páginas en las que estoy trabajando. Seguramente hay una mejor forma de acceder a estos métodos, sin interrupciones en futuras versiones. ¿Quiero decir, realmente tengo que importar un módulo completamente nuevo para usar byId() ? ¿Y otra más para conectar eventos? Además de eso, todo el desorden que se crea al tener que asignar un nombre de variable en la lista de argumentos de funciones para aferrarse simplemente parece un retroceso.

Pensé que tal vez require() el módulo solo cuando fuera necesario, como el módulo de query , pero si lo necesito más de una vez, entonces es probable que la variable a la que está asignado esté fuera del alcance, y tendría que ponerlo en un domReady! o llamada ready . Reaally .... ¿¡!

Por eso solo puedo suponer que es mi falta de comprensión para el dojo.

Realmente miré, busqué y compré libros (aunque uno anterior a AMD), pero esta biblioteca realmente me está echando a correr por mi dinero. Aprecio que alguien pueda arrojar luz sobre esto.

Editar por ejemplo

require([''dijit/form/ValidationTextBox''])
require([''dojo/ready'', ''dojo/parser'', ''dojo/dom-style'', ''dijit/registry'', ''dojo/dom'', ''dojo/_base/connect'', ''dojo/dom-construct''], function(ready, parser, style, registry, dom, event, construct){
/* perform some tasks */
var _name = new dijit.form.ValidationTextBox({
propercase : true,
tooltipPosition : [''above'', ''after'']
}, ''name'')
/*
Let''s say I want to use the query module in some places, i.e. here.
*/
require([''dojo/query'', ''dojo/dom-attr''], function(query, attr){
query(''#list li'').forEach(function(li){
// do something with these
})
})
}

Basado en este formato, que se usa con muchos ejemplos tanto del grupo de herramientas de dojo como de sitios de terceros, sería, en mi humilde opinión, absolutamente ridículo cargar todos los módulos requeridos como la primera function(ready, parser, style, registy... volvería más y más largo, y crearía problemas al nombrar colisiones, etc.

Comenzar y require() todos los módulos que necesitaría durante la vida del guión me parece una tontería. Dicho esto, tendría que ver algunos de los scripts de "administrador de paquetes". Pero para este ejemplo, si quisiera usar el módulo de consulta en lugares seleccionados, tendría que cargarlo con el resto en la instrucción require() principal. Entiendo por qué hasta cierto punto, pero ¿qué hay de malo con los espacios de nombres genéricos de sintaxis de puntos? dojo.whatever? dijit.findIt ()? ¿Por qué cargar el módulo, referencia en un nombre único, pasar por el cierre, bla, bla?

Desearía que esta fuera una pregunta más fácil de hacer, pero espero que tenga sentido.

Exasperación

Llámame newb, pero esto es realmente ... realmente ... me está volviendo loco. No soy novato cuando se trata de Javascript (aparentemente no) pero guau. No puedo entender esto ¡fuera!

Esto es lo que estoy reuniendo. En adder.js:

define(''adder'', function(require, exports){
exports.addTen = function(x){
return x + 10
}
})

En alguna página maestra o lo que sea:

require([''./js/cg/adder.js''])

... que no sigue el formato require([''cg/adder'']) pero lo que sea. No es importante en este momento.

Entonces, el uso del adder debe ser:

console.log(adder.addTen(100)) // 110

Lo más cerca que conseguí fue console.log(adder) devolviendo 3 . Sí. 3 . De lo contrario, su adder is not defined .

¿Por qué esto tiene que ser tan difícil? Estoy usando mi tarjeta noob en esto, porque realmente no tengo idea de por qué esto no se está uniendo.

Gracias chicos.

Answer 1

El formato de matriz de dependencia:

define(["a", "b", "c"], function (a, b, c) {
});

de hecho puede ser molesto y propenso a errores. Hacer coincidir las entradas de la matriz con los parámetros de la función es un verdadero dolor.

Prefiero el formato require ( "Contenedor CommonJS Simplificado" ):

define(function (require) {
var a = require("a");
var b = require("b");
var c = require("c");
});

Esto mantiene sus líneas cortas y le permite reorganizar / eliminar / agregar líneas sin tener que recordar para cambiar las cosas en dos lugares.

El último formato no funcionará en PS3 y navegadores más antiguos de Opera, pero espero que no te importe.

En cuanto a por qué hacer esto en lugar de objetos de espacio de nombres manualmente, la respuesta de @ peller proporciona una buena visión de por qué la modularidad es algo bueno, y mi respuesta a una pregunta similar habla de por qué AMD y los sistemas de módulos como una forma de lograr modularidad son algo bueno. .

Lo único que agregaría a la respuesta de @ peller es expandir "prestar atención a las dependencias realmente hace que el código sea mucho mejor". Si su módulo requiere demasiados módulos, ¡eso es una mala señal! Tenemos una regla flexible en nuestra base de códigos JavaScript de 72K LOC que un módulo debe tener ~ 100 líneas de largo y requiere entre cero y cuatro dependencias. Nos ha servido bien.

Answer 2

requirejs.org brinda una descripción bastante buena de lo que es AMD y por qué querrías usarlo. Sí, Dojo se está moviendo hacia módulos más pequeños a los que harías referencia individualmente. El resultado es que carga menos código y sus referencias son explícitas. Prestar atención a las dependencias realmente hace que el código sea mucho mejor, creo. AMD permite optimizaciones, y una vez que se completa la migración, ya no tiene que cargar todo en globales. ¡No más colisiones! El bloque require () ajusta el código que usa varios módulos. domReady! se relaciona con la carga del DOM y no tiene nada que ver con el alcance de las variables.

De todos modos, esto se está desviando del formato Q & A de SO. Es posible que desee hacer preguntas específicas.