Question

在a website，我找到了以下代码来制作jQuery插件：

(function($){
  // Our code here...
})(jQuery);

我不明白上面的代码是如何工作的。我的理解是代码立即执行，因为()中的最后一个function(){}()。所以整个代码说这是一个立即运行的匿名函数。

但是我不明白为什么包装需要通过jQuery并且内部需要传递$。

据我了解，$是jQuery的别名，意思几乎相同。这里$和jQuery的含义是什么？整个代码如何作为jQuery插件工作？

Answer 1

jQuery是实际的参数。 $是形式参数。你写得很好：

(function(ForAFewDollarsLess){
    ForAFewDollarsLess('#myId') ...
})(jQuery);

一个原因是方便 - 它很短。您可能在noConflict模式下使用jQuery与其他库。也许一直输入jQuery是一件麻烦事，或者其他插件正在遵循不良做法并使用$代替jQuery。无论哪种方式，您都可以使用类似上面的自调用函数来解决问题。

Answer 2

您在函数中传递别名$，以便它总是会实际返回到JQuery。如果某个页面中包含一些其他库，例如原型也使用$，那么您的代码将不会中断并且可以正常工作。

Answer 3

为了与其他库最大程度地兼容，jQuery提供.noConflict()。这将从全局命名空间中删除$别名，以便其他库可以根据需要使用它。

如果您不希望自己的插件与.noConflict()一起使用，则没有必要。

使用闭包还可以让您不会使用var的

污染“全局范围”

Answer 4

<> Gnarf带来了vars的全球范围污染，我也会增加功能。

您可能希望使用辅助函数，如：

(function($){
  // Our code here...
  $.fn.myPluginFunction = function () {
    ...
    var x = foobalizeTheFrobmaster(this.offset())
    ...
  }

  function foobalizeTheFrobmaster(pos) {
    // do something useful
    return something;
  }
})(jQuery);

这样，内部函数foobalizeTheFrobmaster()完全隐藏在我们的闭包中。

理解jQuery插件的框架

4 个答案: