javascript - 尝试使用多个选择器制作 jQuery

Question

我尝试制作一个非常精简的“类似 jQuery”的选择器，但我无法使其适用于所有类，我尝试使用 for 循环，但由于“return new”，它中断了循环。

JS

var $ = function(el){       
  var helpers = {
    css: function(v){
      (this.value).setAttribute('style',v);     
    },
    replace: function(v){
      (this.value).innerHTML = v;
      console.log(this.value);
    },
    append: function(v){
      (this.value).innerHTML =  (this.value).outerHTML + ' ' + v;
    }
  };
  function sel(el){ 
    this.value = document.querySelector(el);
  }
  sel.prototype = helpers;
  return new sel(el);
};

var sel1 = $('.sel1');

sel1.replace('<span>replaced</span>');
sel1.css("color:red");

HTML

<div class="sel1">test</div>
<div class="sel1">test</div>
<div class="sel1">test</div>

Answer 1

您想使用 Document.querySelectorAll()获得所有比赛而不仅仅是第一场比赛。这就是 jQuery 所做的。

显然，这意味着“值”不是节点，而是一个 NodeList(或 null)。这改变了函数，因为它们都必须处理一个列表，所以你必须有某种形式的 foreach() 来将你的函数应用于每个节点(这也是 jQuery 所做的，请参阅get() 就是一个很好的证明。)

最后，如果没有匹配项，jQuery 将返回一个 null，函数仍然有效。这是因为每个函数都使用 foreach() 函数，并且在 null 上，foreach() 什么都不做。因此，您必须实现该 foreach()。也许是这样的:

function foreach(list, func)
{
   var max, i, n;

   if(list) // make sure list is not 'null'
   {
       max = list.length;
       for(i = 0; i < max; ++i) // go through the elements
       {
           n = list[i];
           func(n);   // call user function
       }
   }
}

那么css函数就会变成这样:

css: function(v)
{
  foreach(this.value, function(n) { n.setAttribute('style', v); });
}

注意:如果您将 foreach() 作为助手的一部分，请确保使用 this.foreach() 调用它.