Javascript插件设计模式就像jQuery

Question

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

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

Plz不回复我去读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;
  }
})

Answer 2

与许多其他 js 框架一样，它使用 javascript 原型定向来工作。

例如，您可以声明一个简单的函数

var alertHelloWorld = function() {
    alert('hello world');
}

然后将其绑定到现有对象（包括 DOM 节点）

document.doMyAlert = alertHelloWorld;

如果你这样做

document.doMyAlert();

将执行alertHelloWorld函数

您可以在此处阅读有关 javascript 对象原型的更多信息