jquery'nin küçük uygulaması

Question

1) Javascript'te jQuery'yi uygulamak için bir görevim var. Ama bir nedenden dolayı, yöntemimin her biri çalışmıyor. Örneğin i

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

yazarken o

DOMException döndürür: yürütülemedi 'querySelectorAll' 'Belge' üzerine: '[object Object]' geçerli seçici değildir.

Ayrıca, diğer işlevlerin içinde this.each kullanamıyorum. Örneğin, forEach yerine her birini kullanmış olsaydım, işe yaramazdı.

---

<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

i

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

bu

DOMException döner geç Örneğin: yürütmek başarısız 'querySelectorAll 'Belgesi' ile: [nesne Nesne] 'geçerli bir seçici değil.

Sen each callback'inde içindeki $(this) yapıyoruz. Böylece ,ile instanceof $ olmayan DOM öğesine ayarlandı ve böylece DOM öğesini geçerek new $(selector) numaralı telefonu çağırırsınız. Bu, this.search(selector) numaralı çağrıyı sonlandırır; burada selector, DOM öğesidir. Sonra querySelectorAll(selector)'u ara. QSA, DOM öğelerini değil, dizeleri kabul eder ve böylece öğe "[object Object]" dizesine dönüştürülür (veya bazı motorlarda "[object HTMLElement]" olur) ve başarısız olur.

Bu hataları, tarayıcınızda yerleşik hata ayıklayıcısını kullanarak kod deyiminde gezinerek tanıyabilirsiniz. Herhangi bir nedenden dolayı jQuery'yi yeniden kullanacaksanız, tam olarak bunu yapma alışkanlığınıza girmeniz gerekir: Hata ayıklayıcısını kullanarak, neyin yanlış olduğunu saptamak ve düzeltmek. Bu durumda, örneğin, selector'un bir dize olmadığını algılamak istersiniz. belli belirsiz böyle bir şey:

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; 
}, 

Ama çok ve için ayıklayıcısını gerekir Eğer bunun ötesinde içine edeceğiz diğer şeyler, bir sürü olacaktır.

Answer 2

Bu USECASE için çalışacak ama biraz daha karmaşık olacağını tüm sınır durumları uygulamak için:

(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>')})