1

只是在网上戳了一个名为 Unslider.js 的插件，这是一个简单的轻量级轮播插件，我很难理解插件中的以下代码：

me.data(key, instance).data('key', key);

现在让我解释一下这一行的上下文，在插件中，上面的行前面是以下代码行：

$.fn.unslider = function(o) {
        var len = this.length;

        //  Enable multiple-slider support
        return this.each(function(index) {
            //  Cache a copy of $(this), so it

            var me = $(this),

                // if len less than 1 , the below line returns "Unslider"
                // Else it returns Unslider-1 , Unslider-2 and so on .. 
                key = 'unslider' + (len > 1 ? '-' + ++index : '');      

                instance = (new Unslider).init(me, o);

我进行了一些测试，发现了以下行，

key = 'unslider' + (len > 1 ? '-' + ++index : '');

也就是说，key 返回 'slider'，如果 len “小于” 1，如果大于 1，那么结果将类似于 'slider-1'、'slider-2'、'slider-3' 等等。

下一行是：

instance = (new Unslider).init(me, o);

正在创建一个 Unslider 的新实例并将其存储在 instance 中，然后将其存储。

init(me,o) 函数在哪里执行，

me = $(this) 和 o 只不过是用户传递给插件的对象文字。

现在我把上面所有的解释都给了，所以一切都没有断章取义。

现在我确实去了 Jquery 官方文档并检查了 data() 的用法。

我看到了一些例子，例如：

  $( "body" ).data( "foo", 52 );
    $( "body" ).data( "bar", { myType: "test", count: 40 } );
    $( "body" ).data( { baz: [ 1, 2, 3 ] } );
    $( "body" ).data( "foo" ); // 52
    $( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

老实说，这些例子很可爱，但不知何故，它们并不能帮助我理解我想要什么。

所以回到我的问题，

me.data(key, instance).data('key', key);

上面这行真的在做什么？

编辑 ：：

如果我取消那条线，一切似乎都工作得很好，插件仍然工作正常，carousal 仍然滑动。

谢谢你。

亚历山大。

4

1 回答 1

1

当 jQuerydata与两个参数一起使用时，一个键和一个值，它将给定键下的值存储在 jQuery 跟踪的内部对象中。

执行此操作时，jQuery 返回集合，因此可以再次链接它

var me  = $('#element'); // a DOM element

var me2 = me.data('key1', 'value'); // returns same DOM element

me2.data('key2', 'value');

是相同的

var me  = $('#element'); // a DOM element

me.data('key1', 'value').data('key2', 'value');

因为集合被返回，并且可以被链接。

至于存储在 中的数据data，那是插件内部使用的东西，可以是任何东西，甚至是一个对象，只要有一个钥匙可以再次取回数据，记住这不是 HTML 中的数据属性，它是一个内部store 接受任何数据类型，甚至是函数的实例。

至于键，它只是增加是唯一的

key = 'unslider' + (len > 1 ? '-' + ++index : ''); // the string "unslider-1" etc

然后第一次调用data存储滑块的当前实例

me.data(key, instance).data('key', key);

而第二个存储密钥，因为这样做更容易

me.data('key');

取回密钥，如果您不知道密钥中的最后一个数字是什么，那么它实际上有点聪明，因为它可以让您这样做

var key = me.data('key');
var instance = me.data(key);

无论索引、增量等如何，都可以返回正确的实例。

于 2015-02-04T08:58:41.900 回答