javascript - 如何将函数应用到某个容器？

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 中传递的多个元素。

---

如果您想指定上下文，即 this 关键字，您当前使用 .call 调用回调的方式很有用回调函数。

考虑你的回调看起来像这样:

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