Насколько зол код 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 5

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. Помогает мне держать мой код прямо и делает его более читаемым, а также. Вы также можете просто изменить свой порядок включает, что также можно решить проблему с пространством имен.