2

我正在学习 jQuery,并试图理解以下代码结构。

if(jQuery) (function($){
    $.extend($.fn, {
        MyPlugin: function(a, b) {
        ....        
        }
    });
})(jQuery);

据我所知,这首先检查 jQuery 对象是否存在。如果是,它定义一个内联函数,该函数使用'fn' 属性扩展jQuery 对象。

我已经在其他几个地方看到过这个问题,例如在这里,但我不理解的点还没有得到解决。我在哪里感到困惑......

- 为什么将特殊的 jquery "$" 对象传递给初始函数?

- 为什么内联函数传递了 jQuery 对象(在最后一行)?即:(函数($){...})(jQuery);

谢谢。

4

4 回答 4

5

简单解释

它只是创建一个闭包,您可以在其中引用jQuerywith $,即使它处于noConflict 模式

在 jSang 的回答 (+1) 的插件创作中也有解释。

从技术上讲,它只是定义了一个匿名函数,该函数接受一个被调用的参数$并立即将其jQuery作为唯一参数传递,因此$用作jQuery此函数范围内的别名 - 请注意,$在此闭包内无法访问全局范围内的 。

这意味着,如果您$在全局范围内使用 Prototype,您将无法$在闭包内访问 Prototype using,因为$引用 jQuery 的本地范围优先。

当然,如果你需要在你的闭包中使用另一个库的方法,你可以使用 2 个参数来定义它:并假设另一个库正在使用命名空间来(function($j, $p) {调用它。或者更简单地说,将闭包的局部作用域 var 别名为与其他库的全局作用域 var: 不同的别名,这意味着全局仍然可以在函数作用域内访问。请注意,后一种效果可能是不可取的,因为除非您在文档中明确写入,否则您无法完全确定用户分配的内容。我猜需要多个库的插件有点离题,所以让我们把它留在那里。(jQuery, $)$(function($j) {$$


稍微详细一点

noConflict 文档页面中的一个实际关闭示例:

jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);

该闭包在其范围内具有别名jQuery,例如,如果您的用户拥有 Prototype 或其他使用全局命名空间的库$,则非常有用。这使您的插件更加坚固且不易出错。$

无论 jQuery 是否控制 $ 变量,都可以使用闭包,因此它是插件创作的理想选择。

想象一下,如果您的一位最终用户在 noConflict 模式下使用 jQuery 并使用$命名空间进行原型制作,并且您的插件尝试$使用 jQuery 方法进行扩展?混沌与小马!

当然,您可以跳过闭包并将所有内容替换$jQuery,但这会使您的代码更长,并且对许多开发人员来说可读性更低。

另外,JavaScript 闭包是如何工作的?如果您在理解闭包时遇到困难,会有很多有用的答案,即使这个问题不需要对闭包有太多深入的了解。:)

于 2012-07-20T03:58:41.050 回答
4

我会尽力回答这些问题。我在 iPad 上,所以如果我遗漏了一些技术细节,请耐心等待。这些点有点简化,但它们有助于描述正在发生的事情:)

  • $ 被传入是因为 $ 可能被覆盖以表示其他含义。jQuery 也可以处于 noCinflict 模式。
  • (jQuery) 正在做的是立即调用已定义的内联函数。这被称为自执行功能。虽然不正确(它不会自行执行,但我们会这样做),但这就是它的名称。它将 jQuery 传递给函数,所以我们有 $ 的值。正如在另一个答案中提到的,这会创建一个闭包。我建议谷歌搜索“JavaScript 闭包”。你会发现一些非常有价值的信息:)

希望有帮助:)

于 2012-07-20T04:01:36.180 回答
3

您正在寻找的是使用新插件“您正在扩展$.fn的部分”扩展 jQuery 。它被包裹在一个闭包块中。

(function($){
//do sth
})(jQuery);

上面的代码是你必须考虑的部分。要描述它,请参见下面的示例:

1. 声明一个函数并调用它

var fn = function(b){ /*do sth like alert(b)*/ };
fn('hiiii');

2. 更短的语法是

(function(b){ /*do sth like alert(b)*/ })('hiiii');

现在,如果你用$替换b并用jQuery传递参数'hiiii' ,你最终会得到:

(function($){ /*do sth with $*/ })(jQuery);

正如您在第一个示例中看到的那样,b是方法参数,而“hiiii”是在调用时传递的参数。与上面相同,$是方法参数,jQuery是调用时传递的参数。

原因是为了避免与其他库发生冲突,因为 $ 已在几乎所有 JS 库中广泛使用。所以你可以在其他库中使用 jQuery。

如果您想了解更多关于如何开发插件的信息,请查看这篇文章

于 2012-07-20T04:26:58.980 回答
3

这将回答您的问题: http ://docs.jquery.com/Plugins/Authoring

于 2012-07-20T03:56:29.487 回答