Wie schreibe ich jquery kettenfähige Funktionen für die lokale Verwendung?

Question

Wie man kettenfähige Funktionen schreibt, aber $ .fn nicht verschmutzt? Schreibe Funktionen nur für die Verwendung in meinem Plugin. Ist es möglich?

$('.myclass').makeSomething().andOneMoreFunction().andLast(); 

Es ist richtiger Ansatz?

UPD. Die beste Lösung in meinem Fall ist Erweiterung Methode:

String.prototype.getMyLength = function(){return this.length;} 

Und jetzt kann ich diese Funktion auf jede Zeichenfolge wie folgt anwenden:

var mystring = "test"; 
mystring.getMyLength(); 

Oder

"teststring".getMyLength() 

Und es verkettbar machen :

String.prototype.getMe = function(){return this;} 
"string".getMe().getMe().getMe().getMe().getMe(); 

Danke für die Antworten!

Answer 1

Sie können alles verketten, was Sie wollen. Wenn Sie selbst einen $.fn definieren, ist es wichtig, dass Sie return this am Ende von Ihnen funktionieren.

Wenn Sie selbst Javascript schreiben möchten, können Sie auch ketten! Es hängt nur davon ab, was Sie zurückgeben. Wenn Sie also ein anderes Objekt zurückgeben, können Sie von diesem Objekt aus ketten. Der Rückgabewert wird dafür verwendet.

Beispiel

var obj = { 
    test : function(){ 
     alert("Y"); 
     return this; 
    }, 
    test2 : function(){ 
     alert("2"); 
     return this; 
    } 
} 
obj.test().test2(); // And so on since it returns this 

jQuery Plugin API

$.fn.test = function(){ 
    var methods = { 
     method0 : function(){ 
      alert("method0"); 
      return this; 
     } 
    }; 
    return methods; 
} 
var api = $("obj").test(); // Returns methods 
api.method0(); // Calling a function from the returned methods. 
// OR 
$("obj").test().method0(); 

Above Funktion mehr jQuery verkettbar nicht. Sie können also $("obj").test().addClass("test") nicht verwenden, da Sie Ihre eigene API zurückgeben!

Answer 2

Wenn Sie a.foo() aufrufen, wird die Funktion foo mit this aufgerufen, die auf a festgelegt ist. Sie können dies zu Ihrem Vorteil nutzen.

auch daran erinnern, dass der Ausdrucka.foo() auswertet, was auch immer Sie return d innerhalb der Funktion.

Also, einfach zurück this.

Dann a.foo() wertet zurück zu a und (a.foo()).bar() wird auf äquivalente a.foo() dann ruft a.bar() ... das heißt verkettete Operationen auf a ruft!

$.fn ist nicht besonders magisch — es verwendet einfach die obige Logik in der gleichen Weise, die Sie gerade sind.

Answer 3

Sie können Verschmutzung vermeiden, indem Sie den ersten Parameter der Funktion Ihres Plugins verwenden, um die Methode der Wahl anzugeben; zum Beispiel

(function() { 
    var o = { // object holding your methods 
     'bar': function() {console.log('bar', this); return this;}, 
     'foobar': function() {console.log('foobar', this); return this;} 
    }; 
    $.fn.foo = function (method /*, args*/) { 
     return o[method].apply(
      this, 
      Array.prototype.slice.call(arguments, 1) // pass your args 
     ); 
    }; 
}()); 

und dann

$('something').foo('bar').foo('foobar'); 
/* 
bar, thisobj 
foobar, thisobj 
*/ 

diese Weise erhalten Sie Zugriff auf das jQuery-Objekt als normal halten, auch.