javascript - 当返回一个 jQuery 对象数组时，jQuery 如何调用对象的方法？

Question

将字符串“选择器”传递给 jQuery 函数后:

$('#onenode')

返回一个 jQuery 对象的数组。

这些对象的方法之一是“html”，这就是为什么:

$('#onenode').html('hello!');

有效。

然而...

这个:

$('.somenodes')

返回一个 jQuery 对象数组，这个数组中的每个对象都有方法“html”。

那么如何:

$('.somenodes').html('hello');

工作？ “html”方法必须是返回的数组对象的方法。

因此我假设数组对象的“html”方法看起来与此类似:

html: function(value) {
   for(var i=0; i<this.length; i+=1) {
      this[i].html(value);
   }
}

这些都是假设，我几乎是在猜测。

我正在尝试创建我自己的使用“选择器”的小型库，但我在这部分遇到了困难。我知道这可能是不正确的——有人可以解释一下 jQuery 是如何做到的吗？

Answer 1

jQuery 基本上是一个很大的原型(prototype)，带有一堆返回 this 的方法，其中 this 是您正在使用的 jQuery 实例与。

I am attempting to create my own small library that uses "selectors"

这是一个在现代浏览器中工作的类 jQuery 模式的简化示例:

(function(win, doc) {

  var __slice = [].slice;

  function jQuery(selector) {
    this.el = this._init(selector);
    this.length = this.el.length;
  }

  function $(selector) {
    return new jQuery(selector);
  }

  jQuery.prototype = {

    _init: function(selector) {
      return __slice.call(doc.querySelectorAll(selector));
    },

    each: function(fn) {
      return this.el.some(fn), this;
    },

    map: function(fn) {
      return this.el.map(fn), this;
    }

  };

  win.$ = $;

}(window, document));

您可以使用它来构建您的 jQuery 之类的库。它的工作方式与 jQuery 完全一样:

$('p').each(function() {
  console.log(this);
});

柯里化(Currying)函数、each 和 map 是您入门所需的全部。这些是 jQuery 几乎在任何地方都使用的方法来操作 DOM 元素。 this.el 是元素数组，而 this 是 jQuery 实例。只是不要忘记您需要在每个将被链接的方法中返回这个。