了解 Unslider.js 中的链式 data() 函数

Question

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

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 returns 'slider'，如果 len "is less then" 1，如果大于 1，那么结果看起来像 'slider-1'，'slider-2'、'slider-3'等。

下一行是：

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

正在创建一个新的 Unslider 实例并将其存储在实例中和之后。

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 仍然滑动。

谢谢。

亚历山大。

Answer 1

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

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

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 中的数据属性，它是一个内部存储，可以接受任何数据类型，甚至是函数的实例。

至于密钥，它只是递增是唯一的

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);

无论索引、增量等如何，都能得到正确的实例

了解 Unslider.js 中的链式 data() 函数

understanding the chained data() function in Unslider.js

javascript

jquery

unslider