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：顺便说一句，这是从this tutorial抓住的。

Answer 1

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

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

var iNettuts = this,是你的问题。我认为，在您的情况下，最好的方法是将iNettuts声明为addWidgetControls的范围，因此doWidget也可以访问它。如果它是完整对象，您可以在iNettuts中本地重新声明doWidget，就像在addWidgetControls中一样。

在旁注中，您无需在func中将重新声明的doWiget声明为addWidgetControls，只需直接调用它：iNettuts.doWidget(this);

Answer 2

问题解决了，真的很有趣，很容易找到！众所周知，这个指针不时有所不同，在这种情况下，只有3个实例应该被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)); 
    } 
},

从jQuery函数中提取方法

2 个答案: