从 jQuery 函数中提取方法

Question

我正在尝试从这个函数中提取一个方法：

addWidgetControls: function () {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings;

        $(settings.widgetSelector, $(settings.columns)).each(function () {
            var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
            if (thisWidgetSettings.removable) {
                $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
                    e.stopPropagation();
                }).click(function () {
                    $(this).parents(settings.widgetSelector).animate({
                        opacity: 0
                    }, function () {
                        $(this).wrap('<div/>').parent().slideUp(function () {
                            $(this).remove();
                        });
                    });

                    return false;
                }).appendTo($(settings.handleSelector, this));
            }

            if (thisWidgetSettings.collapsible) {
                $('<a href="#" class="collapse">COLLAPSE</a>').mousedown(function (e) {
                    e.stopPropagation();
                }).toggle(function () {
                    $(this).css({ backgroundPosition: '-38px 0' })
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).hide();
                    return false;
                }, function () {
                    $(this).css({ backgroundPosition: '' })
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).show();
                    return false;
                }).prependTo($(settings.handleSelector, this));
            }
        });
    },

我已经从这个函数中提取了代码，如下所示：

addWidgetControls: function () {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings,
            func = this.doWidget;

        $(settings.widgetSelector, $(settings.columns)).each(function () {
            func(this);
        });
    },

    doWidget: function (widg) {
        $ = jQuery;
        settings = iNettuts.settings;
        var thisWidgetSettings = iNettuts.getWidgetSettings(widg.id);
        if (thisWidgetSettings.removable) {
            $('<a href="#" class="remove"></a>').mousedown(function (e) {
                e.stopPropagation();
            }).click(function () {
                $(widg).parents(settings.widgetSelector).animate({
                    opacity: 0
                }, function () {
                    widg.wrap('<div/>').parent().slideUp(function () {
                        widg.remove();
                    });
                });

                return false;
            }).appendTo($(settings.handleSelector, widg));
        }

        if (thisWidgetSettings.collapsible) {
            $('<a href="#" class="collapse"></a>').mousedown(function (e) {
                e.stopPropagation();
            }).toggle(function () {
                $(widg).css({ backgroundPosition: '-38px 0' })
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).hide();
                return false;
            }, function () {
                $(widg).css({ backgroundPosition: '' })
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).show();
                return false;
            }).prependTo($(settings.handleSelector, widg));
        }
    },

我刚刚复制了函数代码，将 this 替换为 widg > 并添加 widg 作为参数。也许 $(widge) 和 widg 之间存在差异。 但这不起作用。我缺少什么？有没有一个工具可以轻松做到这一点？谢谢。

PS：顺便说一下，这是从本教程中获取的。

Answer 1

如果我理解正确的话，您想要拆分 addWidgetControls 和 doWidget

在您的实现中，您无权访问 addWidgetControls 中声明的局部变量，即 iNettuts（$ 和 settings 两者之一，但您可以从上层访问它们。

var iNettuts = this, 是您的问题的最佳方式。我猜情况是，声明 iNettuts 超出了 addWidgetControls 的范围，因此如果它是完整的对象，也可以通过 doWidget 访问它。您可以在 doWidget 中本地重新声明 iNettuts，就像在 addWidgetControls 中一样。

顺便说一句，您不需要声明 redeclare。 doWiget 作为 addWidgetControls 中的 func，直接调用即可：iNettuts.doWidget(this);

Answer 2

问题解决了，真是有趣又好找！众所周知，this 指针有时会有所不同，在本例中，只有 3 个 this 实例应该被替换为 widg。所以这是最终的代码：

addWidgetControls: function () { 
    var iNettuts = this, 
        $ = this.jQuery, 
        settings = this.settings, 
        func = this.doWidget; 

    $(settings.widgetSelector, $(settings.columns)).each(function () { 
        func(this); 
    }); 
}, 

doWidget: function (wid) { 
    var $ = iNettuts.jQuery, 
        settings = iNettuts.settings; 

    var thisWidgetSettings = iNettuts.getWidgetSettings(wid.id); 
    if (thisWidgetSettings.removable) { 
        $('<a href="#" class="remove"></a>').mousedown(function (e) { 
            e.stopPropagation(); 
        }).click(function () { 
            $(this).parents(settings.widgetSelector).animate({ 
                opacity: 0 
            }, function () { 
                $(this).wrap('<div/>').parent().slideUp(function () { 
                    $(this).remove(); 
                }); 
            }); 

            return false; 
        }).appendTo($(settings.handleSelector, wid)); 
    } 

    if (thisWidgetSettings.collapsible) { 
        $('<a href="#" class="collapse"></a>').mousedown(function (e) { 
            e.stopPropagation(); 
        }).toggle(function () { 
            $(this).css({ backgroundPosition: '-38px 0' }) 
                    .parents(settings.widgetSelector) 
                        .find(settings.contentSelector).hide(); 
            return false; 
        }, function () { 
            $(this).css({ backgroundPosition: '' }) 
                    .parents(settings.widgetSelector) 
                        .find(settings.contentSelector).show(); 
            return false; 
        }).prependTo($(settings.handleSelector, wid)); 
    } 
},