Erstellen einer jQuery Plugin, Wie kann ich tun Gewohnheit Scopes?

Question

Ich mag eine jQuery-Plugin mit einer API, so etwas erstellen:

$("#chart").pluginName().attr("my_attr");

Statt diese:

$("#chart").pluginName_attr("my_attr");
$.pluginName.attr("#chart", "my_attr");

Grundsätzlich statt mit jeder Methode, um Namespace, zu denen in jQuery ähnlich wirkt, würde Ich mag auf „Umfang“ die Methoden zu einer benutzerdefinierten api, wo $("#chart).pluginName() ein Objekt zurückgeben würde, so dass get, attr, find und ein paar andere wäre völlig neu geschrieben werden.

Ich bin sicher, dies ist nicht eine beliebte Idee, wie es Konvention bricht (oder?), Aber es ist einfacher und besser lesbar, und wahrscheinlich mehr optimiert, als die beiden oben stehenden Optionen. Was sind Ihre Gedanken?

Answer 1

Ich bin mit der Idee zu experimentieren.

Scheint, wie Sie nur die Funktionen für das jQuery-Objekt ändern könnten, dass das Plugin empfängt, und das zurück.

So etwas wie folgt aus:

$.fn.tester = function() {  // The plugin

    this.css = function() {  // Modify the .css() method for this jQuery object
        console.log(this.selector);   // Now it just logs the selector
        return this;     // Return the modified object
    }
    return this;   // Return the modified object

}

---

http://jsfiddle.net/EzzQL/1/ (aktualisiert von Original () als auch zu überschreiben .html)

$.fn.tester = function() {
    this.css = function() {  
        console.log(this.selector);  // This one logs the selector
        return this;
    }
    this.html = function() {
        alert(this.selector); // This one alerts the selector
        return this;
    }
    return this;
};

// Because .css() and .html() are called after .tester(),
// they now adopt the new behavior, and still return a jQuery
//    object with the rest of the methods in tact
$('#test1').tester().css().html().animate({opacity:.3}); 


// .css() and .html() still behave normally for this one
//    that doesn't use the plugin
$('#test2').css('backgroundColor','blue').html('new value');​

---

EDIT:

Wenn Sie alternativ die Elemente zwischenzuspeichern gehen, auf denen die benutzerdefinierten Methoden angewandt werden sollten, könnten Sie die Methoden .apply(), bevor Sie sie verwenden.

zu bauen auf dem obigen Beispiel:

var $test1 = $('#test1');  // Cache the elements

$.fn.tester.apply($test1,[this]);  // apply() the new methods

$test1.css().html().animate({opacity:.3});  // Use the new methods