2012-10-18 9 views
8

Lesen jQueryUI Dialog Code, habe ich herausgefunden habe, jQuery .attr() Methode hat einige undokumentierte Verhalten:jQuery attr Methode gesetzt Handler und inneren Text klicken können

<button id="btn1">1</button> 
<button id="btn2">2</button> 

$(function() { 
    var props = { 
     text: 'Click it!', 
     click: function() { 
      console.log('Clicked btn:', this); 
     } 
    }; 

    $('#btn1').attr(props, true); // Changes #btn1 inner text to 'Click it!' 
            // and adds click handler 
    $('#btn2').attr(props);   // Leaves #btn2 inner text as it is and fires 
            // click function on document ready 
}); 
  • Können Sie mir erklären, wie es funktioniert? Warum sollte ich true als zweites Argument nach Zuordnung von Attribut-Wert-Paaren festlegen?
  • Kann ich diese Funktion in meinen Projekten sicher verwenden?
+2

Ich würde vorschlagen, dass 'attr()' zu erstellen Click-Handler ist eine nicht unterstützte Methode in JQuery. Es gibt viele Dinge, die mit dem Framework funktionieren können, aber wenn sie nicht dokumentiert sind, können sie in zukünftigen Upgrades brechen. Habe gesehen, jQuery Entwickler-Team diese Philosophie in ihrem Support-Forum zum Ausdruck bringen – charlietfl

+0

Der Grund, ich habe diese Frage geschrieben war, dass ich nicht verstehen konnte, warum Click-Handler abgefeuert, bevor es angewendet wurde. Bitte beachten Sie dies [jquery.ui.dialog.js L371] (https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L371) – ASergey

Antwort

3

Ich rate etwas hier, weil ich mit der Quelle jQuery nicht vertraut bin. jQuery.attr ruft jQuery.access, und der Kommentar über die jQuery.access Funktion lautet:

// Multifunctional method to get and set values of a collection 
// The value/s can optionally be executed if it's a function 

Bei der weiteren Untersuchung, die text() Funktion ruft auch jQuery.access:

attr: function(name, value) { 
     return jQuery.access(this, jQuery.attr, name, value, arguments.length > 1); 
    }, 
    ......... 
    text: function(value) { 
     return jQuery.access(this, function(value) { 
     ...... 
    }, 

Sie attr verwenden Text und Ereignis einstellen Handler, für die es nicht so ist. Allerdings scheinen alle die gleiche Funktion zu verwenden, um die Aufgabe zu erledigen, so dass die Verwendung undokumentierter Parameter nur beiläufig das erwartete Verhalten ergibt.

Ich würde es als unzuverlässig betrachten, sich auf undokumentiertes Verhalten zu verlassen, um das zu erreichen, was Sie hier versuchen, da jedes zukünftige Upgrade von jQuery Ihren Code zerstören könnte.

+1

auch, wenn Sie Wenn Sie eine undokumentierte Funktion verwenden, sollten Sie diese Verwendung mindestens dokumentieren, was mehr Typisierung erfordern würde, als einfach die Methoden 'click()' und 'text()' zu verwenden. – yitwail

+1

Es ist auch zu erwähnen, dass es unklar ist, ob Ereignisse wie Dies würde mit dynamisch hinzugefügten DOM-Elementen funktionieren, sodass Sie Ihre Bindungen für neue Objekte verlieren könnten. Viel besser ist die Verwendung von .on() für Ihre Ereignisbehandlung, anstatt sie auf Objektbasis zu setzen. –

2

auf dem Code jQuery 1.8.2 Sehen, die true Parameter kommen schließlich in den Variablen pass auf einer Linie, die sagt:

exec = pass === undefined && jQuery.isFunction(value); 

die, wenn sie gesetzt, jQuery sagt zu der die Prüfung überprüfen der Wert gehör Schlüssel, und wenn es eine Funktion ist, rufen Sie sofort. Daher wird click: function(...) diese Funktion aufrufen, nicht Register diese Funktion.

Dies scheint zu sein, wie die .method(function() { ... } Versionen verschiedener jQuery-Funktionen funktionieren, dh diejenigen, die statt einen bestimmten Wert für eine Eigenschaft übergeben, übergeben Sie eine Funktion, die selbst den ursprünglichen Wert übergeben wird, und deren Rückgabewert zugewiesen ist die relevante Eigenschaft.

Kann ich diese Funktion in meinen Projekten sicher verwenden?

Ich würde nicht, nicht bis es dokumentiert ist.

0

Dies ist ein interessanter. Ich kann nicht so tun, als würde ich dir sagen/warum/es funktioniert, und ich denke, es könnte sogar ein Grund sein, dies als Fehlerbericht an jQuery zu senden, weil das Verhalten, das sie dokumentieren, nicht so herauskommt, wie ich es erwarten würde .

Auf dieser Seite wird das folgende Zitat in Richtung der Unterseite: http://api.jquery.com/attr/

„Hinweis: Wenn nichts in der Setter-Funktion zurückgegeben wird (. Dh Funktion (index, attr) {}), oder wenn undefined wird zurückgegeben, der aktuelle Wert wird nicht geändert Dies ist nützlich, um Werte nur selektiv festzulegen, wenn bestimmte Kriterien erfüllt sind."

Dies führte mich einige Herumspielen auf jsFiddle zu tun. http://jsfiddle.net/mori57/GvLcE/

Beachten Sie, dass, im Gegensatz zu ihrer Dokumentation, Koffer 8 und 9 Rückkehr entweder null oder nichts Blick auf das, was Alnitak erwähnt, es scheint macht Sinn, da ihr Test/tatsächlich/nur validiert, dass es/ist eine Funktion/nicht, was diese Funktion zurückgibt (.isFunction sollte immer nur wahr/falsch zurückgeben, was anders ist als zu sagen, dass der zurückgegebene Wert wahr/falsch ist).

Am Ende würde ich sowohl Alnitak als auch bcoughlan zustimmen, dass dies nicht die Funktionalität ist, auf die Sie sich verlassen sollten Ich würde hinzufügen, dass es nicht nur instabil ist, weil es in zukünftigen Releases von jQuery geändert werden kann, sondern es auch eine schlechte Praxis ist, sich auf Hacks zu verlassen, die auf undokumentierte Funktionen angewiesen sind, weil zukünftige Entwickler des Codes heute schreiben schließt dich ein, in 2-4 Monaten!) könnte sehr leicht vergessen, dass es da ist, oder warum es so eingestellt ist. Weitaus besser, explizit zu sein und die Funktionalität so zu nutzen, wie sie dokumentiert ist, damit Sie sich selbst und anderen klar machen, was Ihr Code tun soll.