javascript - 为什么使用 data() 将函数存储在元素上？

Question

我正在尝试理解 Swipebox 插件中的一些代码。

声明了一个函数。

$.swipebox = function( elem, options ){
   // plugin Jquery codes..
}

现在下面的代码我真的不明白。这段代码的主要目的是什么？为什么它将函数保存到元素中？

$.fn.swipebox = function( options ) {

    if ( ! $.data( this, '_swipebox' ) ) {
        var swipebox = new $.swipebox( this, options );
        this.data( '_swipebox', swipebox );
    }
    return this.data( '_swipebox' );
};

为什么不直接运行 swipebox(this, options);？

$.fn.swipebox = function( options ) {
   $.swipebox(this, options);
};

此外，我不明白在声明函数时使用 $.swipebox 而不是使用 swipebox。

Answer 1

swipebox 的做法避免了声明任何新的全局变量。

它们的构造函数是 $.swipebox() ，它们的 jQuery 方法是 $.fn.swipebox() ，可以在 jQuery 对象上调用 $(".selector").swipebox(...).

this.data( '_swipebox', swipebox );将 swipeBox 对象(由 swipeBox 构造函数创建)与实际 DOM 对象关联起来，这样当 DOM 对象上发生任何类型的事件时，一些代码可以找到该 DOM 对象已经存在的 swipebox 对象(同样无需创建任何新的全局变量来跟踪它)。这样，DOM 对象就指向 swipebox 对象(通过 .data() 关联)，并且 swipebox 对象包含相关的 DOM 对象，因此每个对象都可以根据需要访问另一个对象。