Javascript 插件设计模式，如 jQuery

Question

有人可以用 javascript 写下一个非常简单的基本示例来概念化(并希望让我理解)jQuery 插件设计模式是如何完成的以及它是如何工作的吗？

我对如何为 jQuery 创建插件不感兴趣(所以这里根本没有 jQuery 代码)。我感兴趣的是一个简单的解释(可能有一些 Javascript 代码)来解释插件概念是如何完成的。

请不要回复我去阅读 jQuery 代码，我试过了，但是它太复杂了，否则我不会在这里发布问题。

谢谢!

Answer 1

jQuery 有一个函数库，存储在一个名为 fn 的内部对象中。 .这些是您可以在每个 jQuery 对象上调用的对象。

当你做 $("div.someClass")你得到一个包含所有 <div> 的 jQuery 对象该类的元素。现在你可以做 $("div.someClass").each( someFunction )申请someFunction给他们每个人。这意味着 each()是存储在 fn 中的函数之一(在这种情况下是内置的)。

如果扩展(添加到)内部 fn对象，那么您会自动使您的自定义函数对相同的语法可用。假设您有一个将所有元​​素记录到控制台的函数，称为 log() .您可以将此函数附加到 $.fn , 然后将其用作 $("div.someClass").log() .

附加到 fn 的每个函数对象将以在函数体中的方式被调用，this关键字将指向您使用的 jQuery 对象。

通常的做法是返回this在自定义函数的末尾，这样方法链就不会中断:$("div.someClass").log().each( someFunction ) .

有几种方法可以将函数附加到 $.fn对象，有些比其他更安全。一个非常安全的做法是:

jQuery.fn.extend({
  foo: function() {
    this.each( function() { console.log(this.tagName); } );
    return this;
  }
})