javascript - 使用 $fn 和不使用它创建 Jquery 插件的区别

Question

我正在寻找一些Jquery plugins，我想建立自己的。在所有教程中，我看到这样的语法：

(function($) {
  $.fn.myPlugIN = function() {
    // Add plugin code here
  };
})(jQuery);

但是当我查看 iScroll.js、Carousel、js 等少数流行插件的代码时，我发现不使用 $.fn 语法，他们将其写在一个函数中

(function(){
function iScroll (el, options) {
    var that = this, i;
    //some code
    }
    })();

这些功能和它们的用途有什么区别？

score 3 · Accepted Answer

这就是 jQuery 插件和基本 javascript 插件（或模块）之间的区别。

iScroll 不使用 jQuery，它没有理由被定义为 jQuery 插件。像大多数不基于特定框架的 javascript 插件一样，它基于非常方便的模块模式，它允许您定义许多私有变量，而不会使全局命名空间混乱。您显示的代码段不包含在全局命名空间中导出唯一变量的部分。

见源：

if (typeof exports !== 'undefined') exports.iScroll = iScroll;
else window.iScroll = iScroll;

score 2 · Accepted Answer

iScroll（我Carousel也假设）不是 jQuery 插件，所以它们的代码隐藏语法会有点不同。

jQuery 插件是一个处理 jQuery 对象的扩展函数。例如，如果我创建一个foojQuery 插件，我应该能够通过$('#some-element').foo();.

为了能够以这种方式工作，jQuery 插件$通过向变量添加函数来扩展原型，$.fn如下所示：

$.fn.foo = function () {
    // foo!
};

iScroll另一方面，它不是一个 jQuery 插件。它不适用于 jQuery 对象，因此您不希望它像$('#some-element').iScroll();. 您通过调用iScroll()自身来使用它。

var obj = new iScroll('container');

如您所料，使用方式的不同将决定在其脚本文件中声明插件的不同方式。

2 回答 2