Wie funktioniert basic-Objekt/Funktion verketten arbeiten in javascript?

Ich versuche, die Prinzipien zu tun, die jQuery-style-Funktion chaining gerade in meinem Kopf. Damit meine ich:

var e = f1('test').f2().f3();

Ich habe ein Beispiel, um zu arbeiten, während der andere nicht. Ich poste diesen unten. Ich will immer lernen, das erste Prinzip die Grundlagen, wie etwas funktioniert, so dass ich darauf aufbauen kann. Bis jetzt, ich hatte nur eine oberflächliche und lose Verständnis von, wie die Verkettung funktioniert und ich bin mit in die bugs die ich nicht beheben intelligent.

Was ich weiß:

Funktionen zurückkehren müssen, sich selbst, aka "return this;"
Verkettbare Funktionen müssen sich in einer übergeordneten Funktion, aka in jQuery, .css() ist eine sub-Methode von jQuery(), damit jQuery().css();
Der übergeordneten Funktion sollte entweder sich selbst zurückgeben oder eine neue Instanz von sich selbst.

Diesem Beispiel gearbeitet:

var one = function(num){
    this.oldnum = num;

    this.add = function(){
        this.oldnum++;
        return this;
    }

    if(this instanceof one){
        return this.one;    
    }else{
        return new one(num);    
    }
}
var test = one(1).add().add();

Aber dieses nicht:

var gmap = function(){

    this.add = function(){
        alert('add');

        return this;    
    }   

    if(this instanceof gmap) {
        return this.gmap;   
    } else{
        return new gmap();  
    }

}
var test = gmap.add();

Die Funktionen, die nicht zurückkehren selbst, sind Sie wieder das Objekt, das unterstützt die Methoden, die Sie die Verkettung auf. In der jQuery-Fall, es ist der Knoten betrieben wird, auf.
Haben Sie jede Funktion beenden mit einem return this;.
Ich weiß, aber wie?
Für einen Weg, um bestehende Methoden verkettbare, Sie könnten versuchen, diese: stackoverflow.com/a/15797662/162793
Verwandte: wie funktioniert jquery Verkettung der Arbeit?

InformationsquelleAutor Geuis | 2009-07-08

chaining javascript

36

In JavaScript-Funktionen sind first-class Objekte. Wenn Sie eine Funktion definieren, wird der Konstruktor für dieses Objekt Funktion. In anderen Worten:
```
var gmap = function() {
    this.add = function() {
        alert('add');
    return this;
    }

    this.del = function() {
       alert('delete');
       return this;
    }

    if (this instanceof gmap) {
        return this.gmap;
    } else {
        return new gmap();
    }
}
var test = new gmap();
test.add().del();
```
Durch die Zuordnung der
```
new gmap();
```
der variable test das Sie haben jetzt konstruiert ein neues Objekt, die "erbt" alle Eigenschaften und Methoden von der gmap () - Konstruktors (Klasse). Wenn Sie das snippet oben werden Sie sehen, eine Warnung für "hinzufügen" und "löschen".

In Ihren Beispielen oben, ist das "this" bezieht sich auf das window-Objekt, es sei denn, Sie wickeln Sie die Funktionen in eine andere Funktion oder ein Objekt.

Verkettung ist schwierig für mich zu verstehen, auf den ersten, zumindest war es für mich, aber sobald ich es verstanden, ich erkannte, wie mächtig ein Werkzeug es sein kann.

InformationsquelleAutor Lark
4

Leider ist die direkte Antwort 'Nein'. Auch wenn Sie das überschreiben der vorhandenen Methoden (die Sie wahrscheinlich in vielen UAs, aber ich vermute, nicht im IE), Sie würde immer noch stecken mit fiesen benennt:
```
HTMLElement.prototype.setAttribute = function(attr) { 
    HTMLElement.prototype.setAttribute(attr) //uh-oh;  
}
```
Die besten Sie könnten wahrscheinlich Weg mit mit einem anderen Namen:
```
HTMLElement.prototype.setAttr = function(attr) {
    HTMLElement.prototype.setAttribute(attr);
    return this;
}
```
Schaut wie stecke ich zu jQuery für die Verkettung!
Bitte beachten Sie die Antwort auf diese Frage zu eine andere Frage

InformationsquelleAutor kojiro
1

"Rewrite" Funktion, aber immer noch in der Lage sein, um die ursprüngliche version, müssen Sie zuerst ordnen Sie die original-Funktion auf eine andere variable. Nehmen ein Beispiel-Objekt:
```
function MyObject() { };

MyObject.prototype.func1 = function(a, b) { };
```
Umschreiben func1 für verkettbarkeit, dies zu tun:
```
MyObject.prototype.std_func1 = MyObject.prototype.func1;
MyObject.prototype.func1 = function(a, b) {
    this.std_func1(a, b);
    return this;
};
```
Hier ein Beispiel. Sie brauchen nur zu beschäftigen, diese Technik auf alle standard-Objekte, die Sie fühlen müssen, verkettbarkeit.

Durch die Zeit, die Sie tun all dies funktioniert, müssen Sie vielleicht erkennen, dass es gibt bessere Möglichkeiten, das zu erreichen, was Sie versuchen zu tun, wie mit einer Bibliothek, die bereits verkettbarkeit gebaut. _{*hust* jQuery *hust*}

Hier ist eine Allgemeine Lösung: stackoverflow.com/a/15797662/162793

InformationsquelleAutor FishBasketGordo
0

Lassen Sie mich zuerst sagen, dass ich bin, zu erklären, diese in meinen eigenen Worten.

Method chaining ist so ziemlich das aufrufen einer Methode des Objekts zurückgegeben wird, indem Sie eine andere Funktion/Methode. Beispiel (mit jquery):
```
$('#demo');
```
diese jquery-Funktion wählt und gibt ein jquery-Objekt das DOM-element mit der id demo. wenn das element ein text-Knoten(element), konnten wir die Kette auf eine Methode des Objekts, das zurückgegeben wurde. zum Beispiel:
```
$('#demo').text('Some Text');
```
So, solange eine Funktion/Methode ein Objekt zurückgibt, können Sie die Kette eine Methode des zurückgegebenen Objekts an der ursprünglichen Aussage.

Als dafür, warum letzteres nicht funktioniert, achten Sie darauf, wo und Wann das Schlüsselwort this verwendet wird. Es ist sehr wahrscheinlich eine Kontext-Frage. Wenn Sie anrufen this stellen Sie sicher, dass this bezieht sich auf die Funktion Objekt selbst, nicht das window-Objekt/global.

Hoffe, das hilft.

InformationsquelleAutor ryanwaite28
-4

Rufen Sie einfach die Methode als var test = gmap().add();

als gmap ist eine Funktion, keine variable

Das wird nicht funktionieren, weil add ist nicht definiert gmap(), aber nur auf new gmap().

InformationsquelleAutor Shankar Us

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.