1

我已经构建了一个小函数,它返回一个应用于某个元素的 jQuery 插件,如下例所示:

var initiate_shop = function(shop_navigation, options, callback) {

    var default_settings = {
        containerID     : "",
        first           : false,
        previous        : false,
        next            : false,
        last            : false,
        startPage       : 1,
        perPage         : 8,
        midRange        : 15,
        startRange      : 1,
        endRange        : 1,
        keyBrowse       : true,
        scrollBrowse    : false,
        pause           : 0,
        clickStop       : true,
        delay           : 50,
        direction       : "auto",
        animation       : "fadeInUp",
        fallback        : 400,
        minHeight       : true,
        callback        : function(pages, items){
            if(typeof callback == 'function') {
                callback.call(this);
            }
        }
    };

    var settings = $.extend(default_settings, options);

    return $(shop_navigation).jPages(settings);
};

我的问题是,我怎么能initiate_shop像这样使用该功能:

$("shop_navigation").initiate_shop( ... );

而不是像这样使用它:

initiate_shop(shop_navigation, ... );

另外,如何为回调函数定义参数,在我的情况下,我有两个对象作为回调函数的参数?

4

1 回答 1

3

看起来您正在尝试创建一个 jQuery 插件。使用您的函数扩展$.fn对象,您将能够使用this函数中的关键字访问您的容器。

$.fn.initiate_shop = function(options, callback) {
    ...
    return this.jPages(settings);
};

请注意,您的调用$('shop_navigation')不是有效的选择器,除非您正在寻找名为shop_navigation. 你打算写$('#shop_navigation')吗?

我问的原因是你也可以写

$('.shop_navigation').initiate_shop(options, callback);

由您的插件来处理支持传入的多个元素this


.call如果您想指定上下文(即this关键字)在您的回调函数中,您当前调用回调的方式非常有用。

考虑您的回调如下所示:

var callback = function(pages, items) {
   console.log(this);
   console.log(pages);
   console.log(items);
};

如果您不关心this回调函数中的关键字是什么,您可以简单地将函数调用为

callback(pages, items);

如果要手动设置调用上下文,可以使用.call.apply。您仍然可以将参数传递给函数:

// first argument defines calling context
// all others passed as arguments to function
callback.call(this, pages, items);

或者

// first argument defines calling context
// second argument defines entire arguments collection
callback.apply(this, [pages, items]);

在您的情况下,如果callback变量只是一个函数或未定义的,并且您没有添加任何额外的逻辑,就像现在一样,您只需:

var default_settings = {
    ...
    callback: callback
};
于 2012-05-10T09:51:57.157 回答