Насколько зол код jQuery * inside * MooTools?
Я живу и дышу jQuery, но я также люблю находить отличный плагин, который делает работу, которую я хочу идеально.
Мое приложение Rails закодировано в jQuery, но для загрузки файлов я еще не нашел ничего лучше, чем FancyUpload (лучше, чем Uploadify или SWFUpload). Попробовав все три библиотеки, FancyUpload, безусловно, лучше всего интегрируется в мое приложение.
Однако FancyUpload основан на MooTools, и загрузка обеих библиотек (не говоря уже о работе с ними) начинает немного болеть голова. Во-первых, я загружаю MooTools только на те страницы, которые используют функцию загрузки; все остальные страницы используют исключительно jQuery. Во-вторых, я должен был вручную создать пространство имен многих моих функций jQuery, что немного раздражает.
Но, возможно, самая громоздкая особенность этой установки заключается в том, что я не знаю MooTools. Поскольку я мог делать почти все остальное с помощью jQuery, я никогда не утруждал себя обучением. Теперь, когда я заставляю себя использовать эта библиотека FancyUpload (которую я люблю и хочу продолжать использовать), я столкнулся с моей неумелостью в MooTools.В частности, вот моя функция onFileSuccess
для FancyUpload:
onFileSuccess: function(file, response) {
var json = new Hash(JSON.decode(response, true) || {});
if (json.get('status') == '1') {
// success
file.element.addClass('file-success');
(function ($, elem, queue_item) {
$('#images').append($(elem).hide().fadeIn('slow'));
$(queue_item).fadeOut('slow', function () { $(this).remove(); });
})(jQuery, json.get('data'), file.element);
} else {
// failure
file.element.addClass('file-failed');
}
}
Как вы заметите, у меня есть функция jQuery прямо в середине функции MooTools.
Мой вопрос заключается в следующем: действительно ли это плохо? Моя функция работает именно так, как я хочу, но я не знаю, приближаюсь ли я к какой-то будущей катастрофе, делая это.Если это действительно плохая идея, может кто-нибудь дать мне указатель на то, что код MooTools-эквивалент будет?
Я был бы признателен за любое понимание или помощь.2 ответа:
Как правило, это не проблема, но я бы рекомендовал не смешивать конкретный код фреймворка в какой-либо функциональности, если только фреймворк, который вы используете, не предоставляет вам необходимые функции. Таким образом, вы сохраняете переносимость, и у вас есть только одно требование вместо того, чтобы требовать 2 определенных версии 2 различных библиотек.
Ваш код должен быть примерно таким:
onFileSuccess: function(file, response) { var json = new Hash(JSON.decode(response, true) || {}); if (json.get('status') == '1') { // success file.element.addClass('file-success'); document.id('images').adopt(document.id(json.get('data')).fade('hide').fade('in')); document.id(file.element).set('tween', { onComplete: function() { this.element.dispose();} }).fade('out'); } else { // failure file.element.addClass('file-failed'); } }
Edit: только что заметил, что Димитр сделал несколько похожий ответ. мое решение работает точно так же, но правильно избегает использования функции$, которая особенно необходима при смешивании фреймворков.
Я думаю, что использование зарезервированного символа ' $ ' для jq и mootools никогда не будет хорошей вещью, учитывая, что этого можно легко избежать, правильно используя пространство имен. Я предполагаю, что вы используете пространство имен, используя что-то вроде:
jQuery.noConflict();
Когда лучший способ-это просто назначить его переменной:
var jQ = jQuery.noConflict();
Теперь вы можете вызвать jQ ('selector here') для jq и $ для mootools. Помогает мне держать мой код прямо и делает его более читаемым, а также. Вы также можете просто изменить свой порядок включает, что также можно решить проблему с пространством имен.