winzige Implementierung von jquery

Question

1) Ich habe eine Aufgabe, jQuery in Javascript zu implementieren. Aber aus irgendeinem Grund funktioniert meine Methode nicht. Zum Beispiel, wenn ich schreibe

$('.a').each(function (index) {$(this).append('<b>' + index + '</b>')}) 

es gibt

DOMException: Fehler beim Ausführen 'querySelectorAll' auf 'Document': '[object Object]' ist kein gültiger Selektor.

auch ich kann this.each innerhalb anderer Funktionen nicht verwenden. Zum Beispiel, wenn ich jedes anstelle von forEach innerhalb des Anhangs verwendet hätte, hätte es nicht funktioniert.

---

<script type="text/javascript"> 
(function() { 
    function $(selector) { 
    if (this instanceof $) return this.search(selector) 
     return new $(selector); 
    } 
    $.prototype = { 
    constructor: $, 
    length: 0, 

    search: function(selector) { 
     var that=this; 
     var elems=Array.prototype.slice 
      .call(document.querySelectorAll(selector)); 
     elems.forEach(function(x,i){that[i]=x;}); 
     this.length = elems.length; 
     return this; 
    }, 

    append: function(text) { 
     if (text instanceof $) { 
     this[0].appendChild(text[0]); 
     for(var i = 1; i < this.length-1; i++) { 
      var p = text[0].cloneNode(true); 
      this[i].appendChild(p); 
     } 
     } else Array.prototype.slice 
      .call(this).forEach(function(x){ 
       x.innerHTML = x.innerHTML + text; 
      }); 

     return this; 
    }, 

    each: function(callback){ 
     for (var i=0;i<this.length;i++){ 
     this[i]=callback.call(this,this[i]) 
     }; 
     return this; 
    }, 

    } 
    window.$ = $; 
}()); 

Answer 1

Zum Beispiel, wenn ich schreibe

$('#id').each(function (index) {$(this).html('<b>' + index + '</b>')}) 

es gibt

DOMException: Fehler beim Ausführen 'querySelectorAll' auf 'Document': ‚[object Objekt] 'ist kein gültiger Selektor.

Sie tun $(this) in Ihrem each Rückruf. So ruft $ mit this auf das DOM-Element, das nicht instanceof $ ist, und so rufen Sie new $(selector) übergeben das DOM-Element. Das ruft this.search(selector) auf, wo wiederum selector das DOM-Element ist. Dann rufen Sie querySelectorAll(selector) an. QSA akzeptiert Zeichenketten, nicht DOM-Elemente, und so wird das Element in die Zeichenkette "[object Object]" konvertiert (oder bei einigen Engines ist es "[object HTMLElement]") und schlägt fehl.

Sie können diese Fehler diagnostizieren, indem Sie mit dem in Ihrem Browser integrierten Debugger den Code-Anweisung-für-Anweisung-Code durchlaufen. Wenn Sie jQuery aus irgendeinem Grund neu implementieren möchten, müssen Sie sich angewöhnen, genau das zu tun: Debugger stark zu verwenden, Fehler zu identifizieren und zu beheben.

In diesem Fall möchten Sie zum Beispiel erkennen, dass selector keine Zeichenfolge ist und behandeln, dass z. etwas vage wie folgt aus:

search: function(selector) { 
    var that=this, elems; 
    if (typeof selector === "string") { 
    elems = Array.prototype.slice.call(document.querySelectorAll(selector)); 
    elems.forEach(function(x,i){that[i]=x;}); 
    this.length = elems.length; 
    } else { 
    this[0] = selector; 
    this.length = 1; 
    } 
    return this; 
}, 

Aber es wird viele, viele andere Dinge, die Sie in darüber hinaus laufen werde, mit dem Sie Ihren Debugger benötigen für.

Answer 2

Dies wird für Ihre usecase arbeiten, aber alle Grenzfälle zu implementieren wäre ein bisschen komplizierter:

(function() { 
    function $(selector) { 
    if (!(this instanceof $)){//forgot new 
     return new $(selector); 
    } 
    if(typeof selector === 'string'){ 
     return this.search(selector); 
    } 
    //assuming selector is a dom object 
    this[0]=selector; 
    this.length=1; 
    } 
    $.prototype = { 
    constructor: $, 
    length: 0, 

    search: function(selector) { 
     var that=this; 
     var elems=Array.prototype.slice 
      .call(document.querySelectorAll(selector)); 
     elems.forEach(function(x,i){that[i]=x;}); 
     this.length = elems.length; 
     return this; 
    }, 
    append: function(text) { 
     if (text instanceof $) { 
     this[0].appendChild(text[0]); 
     for(var i = 1; i < this.length-1; i++) { 
      var p = text[0].cloneNode(true); 
      this[i].appendChild(p); 
     } 
     } else { 
      this.each(function(x){ 
       this.innerHTML = this.innerHTML + text; 
      }); 
     } 
     return this; 
    }, 
    // callback is called with the invoking object to be the dom element 
    each: function(callback){ 
     for (var i=0;i<this.length;i++){ 
     this[i]=callback.call(this[i],i); 
     }; 
     return this; 
    }, 

    } 
    window.$ = $; 
}()); 
$('.a').each(function (index) {return $(this).append('<b>' + index + '</b>')})