在 Jquery Scrolly.js 中使用 data()

Question

我正在尝试为自己制作一个视差插件，并在网上找到了一个名为 scroll.js 的简单视差插件：

虽然它有一些令人困惑的代码行，但即使对文档进行多次检查也无济于事。 jQuery 文档说 jQuery 中的 data 方法接受 key : Value 对，即使插件中的很多代码是通过引用传递的，我也看不到键：值对的形成。

Google 搜索稍好一些，在 Google 上搜索后，我对 data 方法有了更好的理解，但是在 jQuery 插件中使用 data 方法的情况下，这仍然对我没有帮助，所以这是我的困难。

我没看懂的sn-p代码是：

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

整个插件源代码都可以在这里找到（别担心！它不到 100 行！不是一个巨大的插件）。 Plugin on Git

现在我对上面这段代码的困难是，到目前为止我在教程等中看到的所有数据方法的例子，data 方法在现实世界插件中的用法是相当不同的。作者在这里真正使用数据功能是为了什么？

除了线：

return this.each(function () {

所有其他代码行，我并不完全自信地理解它们。他们在做什么？

例如。下面的行在做什么？

if (!$.data(this, 'plugin_' + pluginName)) {

检查 'plugin_' + pluginName 是否具有初始化为对象文字的属性？我的假设正确吗？

如果条件返回真怎么办？ ：

 $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));

上面这行代码被执行了，但是它又在做什么呢？？

我看到再次使用了 data 方法，关键字 this 用于指向当前元素，'plugin_' + pluginname（我猜这指定了“this”应该指向 'plugin_' + pluginname??? ）和最后创建一个新实例。

我对 Jquery 的理解不是很好，我试图猜测或者更确切地说解释这个小sn-p 代码中发生了什么。对不起，如果我的解释离题了。

如果真的有人能来告诉我到底发生了什么，那就太好了。

我问这个问题的一个重要原因是因为我在许多当代 Jquery 插件中看到了类似的 sn-ps 代码。

Answer 1

插件将类（函数）实例作为数据存储在 DOM 元素上，因此以后可以很容易地找到它，以便为方法调用提供正确的“this”引用。 data(key, value) 调用将原始对象存储到名称/值缓存中（不一定在元素本身上）。 data(key) 调用检索与该键关联的对象。

data 使用的版本是 static jQuery data 方法，因此“this”（元素）作为参数提供。它相当于data 的基于元素的版本，如下所示：$(this).data(key, value)。

以下行在创建新实例之前检查对象的类型（即插件名称/键值）对象是否已经存在。如果它已经有该插件，它将不会再次创建一个（因此是 if）。通常，如果它存在，插件将采用传递的任何新选项并更改其设置，但您的示例插件不会这样做：

if (!$.data(this, 'plugin_' + pluginName)) {

以下行存储类的新实例（例如实际的插件实例）：

$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));

new Plugin( this, options ) 部分通过对 DOM 元素的引用以及提供给插件调用的选项对象调用类构造函数（主函数）。

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

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

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

    this.init();
}

在构造函数内部，它将存储元素引用，使用传递的选项扩展一组默认选项值，然后初始化插件（注册事件处理程序等以完成实际工作）。