jQuery插件如何加载元素集合？

我不确定这是否是一个stackoverflow问题，因为这是一个一般性的问题，所以请原谅我

假设我有以下标记：

<div class="plugin"> ... </div>
<div class="plugin"> ... </div>
<div class="plugin"> ... </div>

插件代码如下所示：

;(function ( $, window, undefined ) {

  var myPlugin = 'myPlugin',
      document = window.document,
      defaults = {
        propertyName: "value"
      };

  // The actual plugin constructor
  function Plugin( element, options ) {
    this.element = element;

    this.options = $.extend( {}, defaults, options) ;

    this._defaults = defaults;
    this._name = myPlugin;

    this.init();
  }

  Plugin.prototype.init = function () {

  };

  // A really lightweight plugin wrapper around the constructor, 
  // preventing against multiple instantiations
  $.fn[myPlugin] = function ( options ) {
    return this.each(function () {
      if (!$.data(this, 'plugin_' + myPlugin)) {
        $.data(this, 'plugin_' + myPlugin, new Plugin( this, options ));
      }
    });
  }
}(jQuery, window));

当我运行这段代码时，似乎正在为类名为

myPlugin

的每个元素调用插件构造函数。我认为它会在整个div集合上运行插件，并且只调用构造函数一次

那么它是如何工作的呢？ 是否为类选择器返回的每个元素创建插件实例

是为返回的每个元素创建的插件实例 通过类选择器

是。因为在调用

this.each

时，您正在遍历插件构造函数中的元素，并为每个元素初始化一个新的

plugin

构造函数

---

如果要为集合运行单个自定义构造函数，请不要执行此操作。每个，只需将此传递给

插件

构造函数（尽管您可能需要使用

jQuery.data

重新考虑插件的“缓存”）

以下注释可能会有所帮助：

$.fn[myPlugin] = function ( options ) {
    /* "this" is collection of elements from selector*/
    return this.each(function () {
        /* "this" is individual element due to being inside "each" loop*/
      if (!$.data(this, 'plugin_' + myPlugin)) {
        $.data(this, 'plugin_' + myPlugin, new Plugin( this, options ));
      }
    });
  }

自上而下

$(".plugin").myPlugin();

jquery选择器

jQuery将使用选择器

.plugin

，然后运行其通常的选择过程，生成一个jQuery对象（jQuery原型可用于链接），该对象还包含结果的长度、结果数组和使用的选择器

因此，

$（“.plugin”）

返回包含上述内容的对象

myPlugin（）

myPlugin（）

是一个函数调用。它是根据jQuery原型生成的，jQuery原型是从

$（“.plugin”）

返回的。此函数位于定义它的位置：

$.fn[myPlugin]

fn

是jQuery向其基本原型添加功能的方式。请注意，这只调用一次

$.fn[myPlugin]=函数

这里调用的函数现在运行。它在

this

上运行，这是上面提到的原始jQuery对象（包括选择器的结果数组）

this.each（function（）{…}

，其中jQuery的

每个

函数将迭代来自jQuery对象的结果

每次迭代都会运行

if (!$.data(this, 'plugin_' + myPlugin)) {
 $.data(this, 'plugin_' + myPlugin, new Plugin( this, options ));
}

第一行是一个条件语句，它查看当前元素（这是3个div中的一个）上是否存在名为“plugin_myPlugin”（myPlugin是一个常量字符串值）的数据对象。首先运行此代码时，它们中没有一个具有此属性

$.data（这个'plugin.'+myPlugin，新插件（这个，选项））；

这行代码获取当前html元素的

This

对象，将其传递给jQuery的

data

方法，该方法将对象添加到按名称索引的元素中。本例中的名称为“plugin\u myPlugin”，对象为

新插件（此，选项）

Plugin是在示例中

$.fn[myPlugin]

范围内本地定义的函数。它被定义为

函数Plugin（元素，选项）{…}

函数插件（元素、选项）{…}

此函数将获取一个元素，该元素是从每个中的迭代中传递的，在本例中是3个div中的一个，以及最初作为$.fn[myPlugin]的参数发送的选项（在本例中，没有传入任何元素，如

myPlugin（）

所示）

函数获取这些参数，并使用

this.element

，

this.options

，

this.\u默认值

，和

this.\u name

，将它们构建到当前函数对象上，然后调用init函数（此处为空）

构建完函数对象之后，使用jQuery的

data

方法将其附加到当前元素

执行摘要

扩展函数

myPlugin

将为使用的选择器生成的jQuery对象中的每个元素运行一次。扩展函数将从定义的函数

Plugin

为每个符合条件的元素创建一个新的函数对象（因此，在本例中，在每个元素上运行构造函数3次）

if (!$.data(this, 'plugin_' + myPlugin)) {
 $.data(this, 'plugin_' + myPlugin, new Plugin( this, options ));
}