像jQuery一样的JavaScript插件设计模式

Question

有人能否用javascript写一个非常简单的基本示例来概括（并希望让我理解）jQuery插件设计模式是如何完成和工作的？

我对如何为jQuery创建插件不感兴趣（因此这里完全没有jQuery代码）。我感兴趣的是一个简单的解释（可能带有一些Javascript代码），以解释插件概念是如何实现的。

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

谢谢！

- Marco Demaio

Answer 1

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

当您执行$("div.someClass")时，您会得到一个包含该类别下所有

元素的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;
  }
})

- Tomalak

Answer 2

Tomalak已经发布了几乎所有你需要知道的内容。

还有一件事可以帮助jQuery使用this关键字。

它是一个叫做apply()的方法。

var somefunction=function(){
alert(this.text);
}
var anObject={text:"hello"};

somefunction.apply(anObject);
//alert "hello" will happen

它真的有助于创建抽象，以便框架/插件用户可以根据直觉使用this，无论您的代码中有什么

- naugtur

Answer 3

它使用JavaScript原型导向，像许多其他JS框架一样，可以正常工作。

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

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

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

document.doMyAlert = alertHelloWorld;

如果你这样做

document.doMyAlert();

将执行alertHelloWorld函数

您可以在这里阅读有关JavaScript对象原型的更多信息

- Benoit

---

很遗憾，您的示例根本没有使用原型。这是因为在JavaScript中，函数是一等对象，可以像任何其他变量一样传递和分配。 - adamnfish

是的，原型对象存在于声明为这样的对象上，它的工作方式类似。 我可以从下面的链接中复制/粘贴Object.prototype.inObj = 1;function A() { this.inA = 2; }A.prototype.inAProto = 3;B.prototype = new A; // 将A连接到B的原型链中 B.prototype.constructor = B;function B() { this.inB = 4; }B.prototype.inBProto = 5;x = new B; document.write(x.inObj + '，' + x.inA + '，' + x.inAProto + '，' + x.inB + '，' + x.inBProto); - Benoit