创建带有$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
    }
    })();

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

Answer 1

这就是

jQuery插件和基本的javascript插件(或模块(之间的区别。

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

见来源 ：

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

Answer 2

iScroll(我假设Carousel也是(不是jQuery插件，因此它们的代码隐藏语法会有所不同。

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

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

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

另一方面，iScroll不是jQuery插件。它不能在jQuery对象上工作，所以你不希望它像$('#some-element').iScroll();一样工作。您可以通过调用iScroll()本身来使用它。

var obj = new iScroll('container');

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