Question

以下是来自视差Jquery插件的代码片段：

function Plugin( element, options ) {
    this.element = element;
    this.$element = $(this.element);

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

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
}

该插件可以在github上找到：git link

现在有两条令人困惑的路线：

    this.element = element;
    this.$element = $(this.element);

我的理解是： 传递给函数插件的值存储在第一行的this.element中，现在为什么在第二行是作者添加另一个变量。$ element并将$（this.element）的值传递给它。？目的是什么？

在询问我的一位高级同事后，得到了以下答案： this.element = element设置“this”引用的任何对象的element属性。它将其设置为变量元素保存的值。

this。$ element = $（this.element）设置同一对象的$ element属性的值。在这种情况下，它将它设置为jQuery对象。

但我仍然没有得到2行代码正在做的事情。

另外，那些代码行是不是I.E. ：

this.element = element;
this.$element = $(this.element);

重写为：

this.$element = element; ??

我试过这样做，插件无法正常工作。

谢谢。

Tenali。

Answer 1

function Plugin( element, options )很可能是一个javascript构造函数，将会像这样使用：

var plugin = new Plugin(myDiv, options);

然后

this将成为对创建的新对象的引用。（我的示例中的plugin对象）

在此上下文中：element将是对传递给Plugin构造函数的任何DOM元素的引用，$(element)将是此dom元素的jQuery选择器，jQuery函数可以在其上被称为。

Answer 2

该插件的作者正在缓存DOM元素和该元素的jQuery表示，以方便和高效。

// Normal DOM node
this.element = element

// jQuery wrapped DOM node
this.$element = $(this.element);

在插件原型或私有函数中，而不是创建一个全新的jQuery对象（效率低下），this.$element中已有一个可以在任何地方使用的对象。这也意味着您可以更改与this.element关联的节点，并在整个代码中传播该更改。

Answer 3

因此Plugin是构造函数，element作为参数被传递。

这两行正在做的是保存对HTML元素的引用，第二行作者正在保存对jQuery对象的引用，以避免再次创建它，所以它是一种缓存。

this.element = element; // save reference to the HTML element
this.$element = $(this.element); // save reference to the jQuery object

$在此。$元素被添加为标识符，所以当任何正文稍后会看到它们会通过$的存在知道该对象是对jQuery对象的引用，这是一个共同模式。

this.element将无效，因为它携带的元素不是jQuery对象，传递给构造函数的元素也是HTML元素。

如果你想摆脱第二行，你需要在构造函数中传递jQuery对象。所以例如在实例化插件的最后，您可以执行以下操作...请注意，this包含在$中。

$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        if (!$.data($(this), 'plugin_' + pluginName)) {
            $.data($(this), 'plugin_' + pluginName, new Plugin($(this), options ));
        }
    });
};

理解Jquery插件中的函数

3 个答案: