Question

我构建了一个小函数，它返回一个应用于某个元素的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, ... );

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

Answer 1

看起来你正在尝试创建一个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
};

如何将功能应用于某个容器？

1 个答案: