Jquery Scrolly.js中数据()的使用

Question

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

不过，它有几行令人困惑的代码，即使对文档进行多次检查也于事无补。jQuery文档说，jQuery中的数据方法接受key : Value对，尽管插件中的许多代码都是通过引用传递的，但我没有看到键:值对的形成。

谷歌搜索做得稍微好一些，在谷歌搜索之后，我对data方法有了全面更好的理解，但是，在data方法在jQuery插件中使用的上下文中，这仍然对我没有帮助，所以我的困难是。

我不明白的代码片段是：

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

整个插件源代码都可以在这里找到(别担心！还不到100行！不是一个巨大的插件)。Git上的插件

现在，我在上面的代码中遇到的困难是，我在教程中看到的所有数据方法的例子等等，data方法在现实世界中的使用都是不同的。作者在这里真正使用数据函数的目的是什么？

除了这条线：

return this.each(function () {

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

例如：下面这条线在做什么？

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

检查“plugin_”+ pluginName是否有一个属性作为对象文字?？我的假设正确吗？

如果条件返回为true怎么办？：

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

上面的代码行被执行，但是它又在做什么?？

我再次看到数据方法被使用，这个关键字用于指向当前元素'plugin_‘+ pluginname (我猜这指定了" this“应该指向'plugin_’+pluginname？)最后，创建一个新实例。

我对Jquery的理解不是很好，我尝试过猜测或更确切地解释在这个代码片段中发生了什么。抱歉，如果我的解释太离谱了。

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

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

Answer 1

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

使用的data版本是静态jQuery data方法，因此"this“(元素)作为参数提供。它等价于基于元素的data版本，如：$(this).data(key, value)。

下面的行在创建新实例之前检查对象的类型(插入名称/键值)对象是否已经存在。如果它已经有了这个插件，它将不会再创建一个插件(因此，如果)。通常，如果存在插件，则插件将接受传递的任何新选项并更改其设置，但您的示例插件不会这样做：

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

下面的行存储类的一个新实例(例如实际插件实例)：

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

new Plugin( this, options )部件使用对DOM元素的引用调用类构造函数(主函数)，并调用插件调用提供的options对象。

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

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

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

    this.init();
}

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