7

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

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

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

谢谢！

4

3 回答 3

5

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

当你这样做时，你会得到一个包含该类$("div.someClass")的所有元素的 jQuery 对象。<div>现在你可以$("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;
  }
})
于 2010-05-20T11:51:50.613 回答
1

Tomalak already posted almost everything You need to know.

There is one last thing that helps jQuery do the trick with the this keyword.

it's amethod called apply()

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

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

It really helps in creating abstractions so that framework/plugin users would just use this as intuition tells them, whatever there is inside Your code

于 2010-05-20T11:58:45.993 回答
0

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

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

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

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

document.doMyAlert = alertHelloWorld;

如果你这样做

document.doMyAlert();

alertHelloWorld 函数将被执行

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

于 2010-05-20T11:46:30.693 回答