为什么使用 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 对象，因此每个对象都可以根据需要到达另一个对象。

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

Why store the function on the element using data()?

javascript

jquery

plugins