javascript - 了解基本的 jQuery 结构

Question

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

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

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

我在其他几个地方看到过这个问题，for example here ，但我不明白的点还没有得到解决。我感到困惑的地方......

-为什么特殊的jquery“$”对象传递给初始函数？

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

谢谢。

Answer 1

简单说明

它只是创建一个闭包，您可以在其中使用 $ 引用 jQuery，即使它位于 noConflict mode 中。 .

在jSang的回答(+1)的plugin authoring中也有解释.

从技术上讲，它只是定义了一个匿名函数，该函数接受一个名为 $ 的参数，并立即调用它，传递 jQuery 作为唯一参数，因此 $ > 在此函数作用域内充当 jQuery 的别名 - 请注意，全局作用域中的 $ 在此闭包内不可访问。

这意味着，如果您在全局作用域中使用 $ 来使用 Prototype，那么您将无法在闭包内使用 $ 来访问 Prototype，因为本地作用域是这样的引用 jQuery 的 $ 优先。

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

---

稍微详细一点

来自 noConflict docs 的实用闭包示例页面:

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

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

无论 jQuery 是否控制 $ 变量，都可以使用闭包，因此它非常适合插件创作。

想象一下，如果您的最终用户之一在无冲突模式下使用 jQuery，并使用 $ 命名空间进行原型(prototype)设计，并且您的插件尝试使用 jQuery 方法扩展 $ 会怎样？混沌与小马!

当然，您可以跳过闭包并将所有 $ 替换为 jQuery，但这会使您的代码变得更长，并且对许多开发人员来说可读性较差。

此外，How do JavaScript closures work?如果您在理解闭包方面遇到困难，那么有许多有用的答案，即使这个问题不需要对闭包有太多深入的了解。 :)