尝试使用多个选择器制作 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

jQuery 的强大功能之一是可以链接命令，这实际上是通过保存对初始选择器查询的引用来完成的。为了得到基本的想法，一个简单的启动实现可能如下所示：

$$$ = function(selector) {
  var Handler = function(selector) {
    var elements = document.querySelectorAll(selector);
    this.css = function(options) {
      for (var i=0; i<elements.length; i++) {
        for (var property in options) {
          elements.item(i).style[property] = options[property];
        }
      }
      return this;
    };
    this.hide = function() {
      return this.css({display: 'none'});
    };
    this.show = function() {
      return this.css({display: ''});
    };
    this.replace = function(html) {
      for (var i=0; i<elements.length; i++) {
        elements.item(i).innerHTML = html;
      };
      return this;
    };
  };
  return new Handler(selector);
};

上面代码的一个简单的工作示例如下所示：

$$$('div').css({border: '1px solid red', background: 'green'}).hide().show();

由于所有内部函数都返回当前实例 (return $this)，因此启用了对不同操作的链接调用。

Answer 2

您想使用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()来调用它。