2010-08-13 6 views
5

Ich lebe und atme jQuery, aber ich finde es auch toll, ein exzellentes Plugin zu finden, das meine Arbeit perfekt macht.Wie böse ist jQuery * innerhalb * MooTools Code?

Meine Rails App ist in jQuery codiert, aber für das Hochladen von Dateien habe ich noch nichts besseres als FancyUpload gefunden (besser IMHO als Uploadify oder SWFUpload). Nachdem ich alle drei Bibliotheken ausprobiert habe, ist FancyUpload bei weitem das Beste, um es in meine App zu integrieren.

ist jedoch FancyUpload auf Mootools basiert, und beide Bibliotheken laden (geschweige denn mit ihnen zu arbeiten) beginnt, ein wenig Kopfschmerzen zu sein. Zuerst lade ich MooTools nur auf die Seiten, die die Upload-Funktion verwenden. Alle anderen Seiten verwenden ausschließlich jQuery. Zweitens hatte ich manually namespace many of my jQuery functions, was ein bisschen nervig ist.

Aber vielleicht das umständliche Merkmal dieser Einrichtung ist, dass ich weiß, MooTools nicht. Da ich mit jQuery so ziemlich alles andere machen konnte, habe ich mich nie darum gekümmert zu lernen. Jetzt, wo ich mich dazu zwinge, diese FancyUpload-Bibliothek zu benutzen (die ich liebe und die ich weiterverwenden möchte), stehe ich vor meiner Unfähigkeit in MooTools.

Insbesondere hier ist meine onFileSuccess Funktion für 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'); 

    } 
} 

Wie Sie bemerken, ich habe eine jQuery-Funktion direkt in der Mitte einer MooTools Funktion. diese

ist Meine Frage: ist dies eine wirklich schlechte Sache zu tun? Meine Funktion funktioniert genau so, wie ich es möchte, aber ich weiß nicht, ob ich dabei auf ein zukünftiges Desaster einschwinge.

Wenn dies wirklich eine schlechte Idee ist, kann mir jemand einen Zeiger geben, was der Mootools-äquivalent Code wäre?

Ich würde mich über jede Einsicht oder Hilfe freuen.

+0

Ich denke, es sollte kein Problem sein.Ich würde einen browserübergreifenden Test durchführen und beim Upgrade auf neuere Frameworks vorsichtig vorgehen. – Marko

+0

das mootools-Äquivalent wäre etwas wie $ ("images"). Adopt ($ (json.get ("data")). Fade (0,1, {duration: 1000})); $ (file.element) .set ("Tweens", { onComplete: function() { this.element.dispose();} }) verblassen ("out"); ' - obwohl es schwer ist. um zu sagen, welche Variable ein Zeiger auf ein Element ist und welche nicht - mootools benötigt keine Objekte, um durch $ zu gehen. –

Antwort

0

Dies ist in der Regel kein Problem, aber ich würde empfehlen, die Eigenschaften nicht bieten Sie verwenden Sie müssen nicht Framework-spezifischen Code in irgendeiner Funktionalität Mischen, es sei denn im Rahmen. Auf diese Weise behalten Sie die Portabilität und Sie haben nur eine einzige Anforderung, anstatt 2 spezifische Versionen von 2 verschiedenen Bibliotheken zu benötigen.

Ihr Code sollte wie folgt sein:

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: gerade bemerkt Dimitar eine ähnliche Antwort gab. Meine Lösung funktioniert ganz ähnlich, vermeidet aber korrekt die $ -Funktion, die speziell beim Mischen von Frameworks benötigt wird.

+1

fairer Kommentar, aber ich nahm die Schließung für die Mootools-Code und mootools wird zuerst geladen (das ist der falsche Weg, wie in mootools der noconflict ist automatisch zu dokumentieren.id) - aber ich glaube nicht, Haralds Zeug verwendet document.id also musst du einen Verschluss um seinen Code verwenden oder ihn bearbeiten –

4

Ich denke, für die reservierten Zeichen ‚$‘ mit beiden jq und Mootools ist nie eine gute Sache, wenn man bedenkt es leicht mit Namensräumen richtig vermieden werden kann. Ich nehme an, Sie sind wie etwas mit Namensräume:

jQuery.noConflict(); 

Wenn eine schönere Art und Weise einfach ist es zu einer Variablen zuzuweisen:

var jQ = jQuery.noConflict(); 

Jetzt können Sie jQ nennen (‚Selektor hier‘) für jq und $ für mootools. Hilft mir, meinen Code klar zu halten und ihn lesbarer zu machen. Sie können auch einfach die Reihenfolge der Includes ändern, die auch das Namespacing-Problem beheben könnte.

+0

Danke für den Tipp; Ich mag diese Idee viel besser, da ich sehen kann, wie es meinen Code sauberer hält! – neezer