提取方法

Question

我試圖爲Extrac此功能的方法：

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

問題是解決了，這是非常有趣和容易找到！衆所周知，這個指針有時會有所不同，在這種情況下，只有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)); 
    } 
}, 

Answer 2

如果我理解正確的話，你要分割addWidgetControls和doWidget

在您的實現，你沒有訪問到addWidgetControls，宣佈即iNettuts（$和settings無論是局部變量，但你可以從上訪問它們水平。

var iNettuts = this,是你的問題。在您的情況最好的辦法是，我猜，申報iNettuts出addWidgetControls範圍，所以這是由doWidget太接近。如果它是FUL l對象，您可以在doWidget本地重新聲明iNettuts，就像在addWidgetControls中一樣。

在一個側面說明，你並不需要聲明重新聲明doWiget如func在addWidgetControls，只需直接調用它是這樣的：iNettuts.doWidget(this);