Способ борьбы со спагетти
Для эффективной разработки и простого обслуживания приложения JavaScript, в отличие от ряда специальных сценариев или непрозрачной автоматизации на низком уровне, вы можете использовать собственное приложение Qooxdoo . Невозможно описать Qooxdoo, не написав слишком много, но в случае нативного приложения (не путайте термин с C или Java, Qooxdoo - это чистый JavaScript) оно описывается следующим образом:
Для приложений, использующих пользовательские графические интерфейсы на основе HTML / CSS вместо слоя виджетов qooxdoo.
Таким образом, такое приложение не использует какие-либо слои пользовательского интерфейса Qooxdoo, а просто использует средства структуры кода и инструменты сборки. Код в Qooxdoo организован по классам, по одному на файл, как в Java. Я могу выглядеть так:
/**
* @use(website.library.MosaicFlow)
*/
qx.Class.define('website.controller.Gallery', {
extend : website.controller.Abstract,
members : {
_baseUrl : 'https://picasaweb.google.com/data/feed/api',
_render : function(photos)
{
q('.preloader').remove();
q.template.get('gallery-template', {'photos': photos}).appendTo('#gallery-container');
var gallery = window.jQuery('#gallery-container .gallery').mosaicflow({
'minItemWidth' : 256,
'itemSelector' : '.photo',
'autoCalculation' : false
});
gallery.trigger('resize');
},
_convert : function(item, index)
{
try
{
return {
'url' : item.content.src,
'summary' : item.summary.$t,
'thumb' : item.media$group.media$thumbnail[0]
};
}
catch(ex)
{
this.debug('failed to convert', index, item);
return null;
}
},
_onLoadSuccess : function(event)
{
var request = event.getTarget();
var response = request.getResponse();
if(!qx.lang.Type.isObject(response) || !('feed' in response))
{
request.debug('Malformed response received');
}
else
{
this._render(response.feed.entry.map(this._convert, this).filter(function(item)
{
return !!item;
}));
}
},
_onLoadFail : function()
{
this.debug('Picasa search failed');
},
main : function()
{
var query = /^\/gallery\/(\w+)$/.exec(window.location.pathname);
var request = new qx.io.request.Jsonp(qx.lang.String.format('%1/all', [this._baseUrl]));
request.setRequestData({
'q' : query[1],
'thumbsize' : 300,
'max-results' : 20,
'alt' : 'json'
});
request.setTimeout(16000);
request.setCache(false);
request.addListener('fail', this._onLoadFail, this);
request.addListener('success', this._onLoadSuccess, this);
request.send();
}
}
});
Объектная модель Qooxdoo использует преимущества обоих миров. Он обладает качествами зрелых платформ, таких как Java, в то же время он современный и динамичный, предоставляя классы, наследование, интерфейсы, миксины, события, свойства, привязку данных и многое другое. Поскольку каждый класс имеет определенное имя и находится в дереве пространства имен, генератор Qooxdoo может воспользоваться этим. Он анализирует ваши классы и строит их синтаксические деревья. Затем он разрешает зависимости. То есть когда вы ссылаетесь на другой класс, например website.controller.Abstract. Это приводит к графу зависимостей, который используется для загрузки скриптов в правильном порядке. Обратите внимание, что все это автоматически и прозрачно для разработчика, и файлы загружаются как есть. Там нет никакой обработки, как в случае с CommonJS, нет уродливого шаблона, чтобы обернуть ваш код, как в AMD.
Как видно из приведенного выше примера, можно работать с внешними библиотеками, отличными от qooxdoo. Вам просто нужно написать фиктивную оболочку для библиотеки, чтобы включить ее в процесс сборки.
Среда разработки и производства
Вы разрабатываете сборку своего приложения (сборка необходима только тогда, когда в коде вводится новая зависимость) с так называемой исходной целью. Файлы вашего приложения загружаются в порядке зависимости, один за другим. Файлы инфраструктуры могут быть загружены один за другим, или, что лучше, встроены в несколько больших блоков. В производственной среде код вашего приложения создается с целью сборки. У вас есть возможность создать один выходной файл или создать частичную сборку, где код разбивается на большие файлы (вы можете контролировать их размер). Частичная сборка может выглядеть следующим образом (оптимизировано / распаковано):
├── [127/64kB] website.f6ffa57fc541.js
├── [100/33kB] website.f86294b58d1a.js
└── [361/110kB] website.js
Обратите внимание, что детали загружаются по требованию на страницах, которые их требуют.
http://example.com/
└── website.js
http://example.com/article
└── website.js
http://example.com/form
└── website.js
└── website.f86294b58d1a.js
http://example.com/gallery
└── website.js
└── website.f6ffa57fc541.js
http://example.com/geo
└── website.js
Поскольку Qooxdoo пока не нацелена на полноценные сборки веб-сайтов, а только предоставляет платформу собственного типа приложения, вам необходимо кодировать запись в приложении и некоторые основы, такие как начальная загрузка, маршрутизация URL и т. Д. Я пытался чтобы решить эту проблему с помощью qooxdoo-website-skeleton , к которым относятся приведенные выше примеры. Вы можете использовать его или написать свой собственный.
В заключение отметим, что запуск может быть не таким простым, как при использовании средней библиотеки JavaScript, но сложность пропорциональна возможной выгоде.