Dojo require() и AMD (1.7)
У меня чертовски много времени переходит на Dojo и новую структуру AMD, и я очень надеюсь, что кто-нибудь сможет пролить свет на всю концепцию. Последние несколько недель я живу в Google, пытаясь найти информацию не о его использовании, а о структуре и тенденциях дизайна в этой области.
Мне кажется странным, что для относительно сложного javascript-приложения, такого как главная страница, где нужно создавать и стилизовать Dijits, создавать элементы DOM и т. Д., Мне нужно требовать и, следовательно, использовать TON различных модулей, которые были в противном случае доступно в пространстве имен dojo до системы AMD (или, по крайней мере, не назначено для 23 различных переменных).
Пример:
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
}
Это только несколько модулей для одной из страниц, над которой я работаю. Конечно, есть лучший способ доступа к этим методам, не нарушающий будущие выпуски и т. Д. Я имею в виду, действительно ли мне нужно импортировать совершенно новый модуль для использования byId()
? И еще один, чтобы связать события? Вдобавок ко всему, весь беспорядок, создаваемый необходимостью присвоить имя переменной в списке аргументов функций, чтобы цепляться за него, просто кажется таким отступлением.
Я думал, может быть, вы бы require()
модуль только при необходимости, такой как query
модуля, но если он мне нужен более одного раза, то, скорее всего, переменная, которой он назначен, находится вне области видимости, и мне нужно поместить ее в domReady!
или же ready
вызов. reaalllly....??!
Вот почему я могу только предположить, что это мое непонимание додзё.
Я действительно искал, искал и покупал книги (хотя и книги до AMD), но эта библиотека действительно дает мне шанс заработать. Я ценю свет, который каждый может пролить на это.
Изменить для примера
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
})
})
}
Исходя из этого формата, который используется со многими примерами, как от людей, занимающихся инструментарием Dojo, так и от сторонних сайтов, было бы совершенно нелепо загружать все необходимые модули в качестве первого. function(ready, parser, style, registy...
будет становиться все дольше и дольше, и создавать проблемы с именами коллизий и т. д.
Разжигание и require()
все модули, которые мне понадобятся при жизни сценария, кажутся мне глупыми. При этом мне придется взглянуть на некоторые из сценариев "менеджера пакетов". Но для этого примера, если бы я хотел использовать модуль запроса в выбранных местах, мне пришлось бы либо загрузить его с остальными в основной require()
заявление. Я понимаю, почему до некоторой степени, но что такого плохого в общих пространствах имен с точечным синтаксисом? dojo.whatever? dijit.findIt()? Зачем загружать модуль, ссылаться на уникальное имя, проходить через закрытие, бла-бла?
Я хотел бы, чтобы это был более легкий вопрос, но я надеюсь, что это имеет смысл.
озлобление
Назовите меня новичком, но это действительно.. действительно.. сводит меня с ума. Я не новичок, когда дело доходит до Javascript (видимо, нет), но ничего себе. Я не могу понять это из!
Вот что я собираю. В adder.js:
define('adder', function(require, exports){
exports.addTen = function(x){
return x + 10
}
})
На какой-то главной странице или что-то еще:
require(['./js/cg/adder.js'])
... который не следует за аккуратным require(['cg/adder'])
формат но что угодно. Не важно сейчас.
Затем использование adder
должно быть:
console.log(adder.addTen(100)) // 110
Ближайший был console.log(adder)
возврате 3
, Ага. 3
, В противном случае это adder is not defined
,
Почему это должно быть так сложно? Я использую свою карту noob для этого, потому что я действительно понятия не имею, почему это не собирается вместе.
Спасибо, парни.
2 ответа
Формат массива зависимостей:
define(["a", "b", "c"], function (a, b, c) {
});
действительно может быть раздражающим и подверженным ошибкам. Сопоставление записей массива с параметрами функции - это настоящая боль.
Я предпочитаю require
формат ( "Упрощенный Обложка CommonJS"):
define(function (require) {
var a = require("a");
var b = require("b");
var c = require("c");
});
Это делает ваши строки короткими и позволяет вам переставлять / удалять / добавлять строки без необходимости поменять вещи в двух местах.
Последний формат не будет работать на PS3 и более старых мобильных браузерах Opera, но, надеюсь, вам все равно.
Что касается того, почему делать это вместо объектов пространства имен вручную, ответ @ peller дает хороший обзор того, почему модульность - это хорошо, а мой ответ на аналогичный вопрос говорит о том, почему AMD и модульные системы как способ достижения модульности - это хорошо.,
Единственное, что я хотел бы добавить к ответу @ peller, - это остановиться на том, что "уделение внимания зависимостям на самом деле делает код намного лучше". Если вашему модулю требуется слишком много других модулей, это плохой знак! У нас есть свободное правило в нашей кодовой базе JavaScript 72K LOC, что модуль должен иметь длину ~100 строк и требовать от нуля до четырех зависимостей. Это послужило нам хорошо.
http://requirejs.org/ дает довольно хороший обзор того, что такое AMD и почему вы хотите ее использовать. Да, Dojo движется к меньшим модулям, на которые вы бы ссылались по отдельности. В результате вы загружаете меньше кода, и ваши ссылки на него явные. Я думаю, что уделение внимания зависимостям на самом деле делает код намного лучше. AMD обеспечивает оптимизацию, и после завершения миграции вам больше не нужно загружать все в глобальные переменные. Нет больше столкновений! Блок require() оборачивает код, который использует различные модули. domReady! относится к загрузке DOM и не имеет ничего общего с переменными в области видимости.
В любом случае, это отклонение от формата вопросов и ответов SO. Возможно, вы захотите задать конкретные вопросы.