將代碼片段轉換爲javascript中的方法

Question

當前綁定將我的代碼保存在一個對象中，我想將點擊事件的內容轉換爲方法，但不是過度確定這是如何完成的。當前的代碼看起來是這樣的：

當前JS

init: function(){ 

      var _this = this, 
       slides_li = _this.els.slides.children(), 
       large = 260, 
       small = 60; 

      // Hover 
      slides_li.on('mouseover', function(){ 
       $(this).stop(true, true).animate({ opacity: 1 }, 300); 
      }).on('mouseout', function(){ 
       $(this).stop(true, true).animate({ opacity: .8 }, 300) 
      }); 

      // Click handlers 
      slides_li.on('click', function(){ 

//想這個代碼轉移到其自己的方法toggle_slides（）？

   $('.active', _this.els.slides).not(this).animate({ 
        width: small 
       }, 300).removeClass('active'); 
       // animate the clicked one 

       if (!$(this).hasClass('active')){ 
        $(this).animate({ 
         width: large 
        }, 300).addClass('active'); 
       }     
      });     
     } 

，但我想的代碼看起來是這樣，但我知道我錯過了幾個關鍵的東西，加上這顯然並不意味着點擊事件：

JS

init: function(){ 

      var _this = this, 
       slides_li = _this.els.slides.children(), 
       large = 260, 
       small = 60; 

      // Hover 
      slides_li.on('mouseover', function(){ 
       $(this).stop(true, true).animate({ opacity: 1 }, 300); 
      }).on('mouseout', function(){ 
       $(this).stop(true, true).animate({ opacity: .8 }, 300) 
      }); 

      // Click handlers 
      slides_li.on('click', function(){ 
       toggle_slides(); //pass in this? 
      });     
     }, 
     toggle_slides: function(){ // add argument for this? 
       $('.active', _this.els.slides).not(this).animate({ 
        width: small 
       }, 300).removeClass('active'); 
       // animate the clicked one 

       if (!$(this).hasClass('active')){ 
        $(this).animate({ 
         width: large 
        }, 300).addClass('active'); 
       }     
     } 

任何人都可以提供一些建議，如何使這項工作？

Answer 1

問題是'this'的依賴於上下文的值。

首先，對原代碼是如何工作的注意事項：

當的init（）最初被調用，this指父對象（GEP）。但在點擊事件處理程序中，this引用了單擊的元素。因此，您仍然可以訪問點擊處理程序中的父項，您將'此項的父項值'捕獲到_this中，以便稍後使用它 - 並且一切正常。

但是，當你在處理程序的代碼移到一個單獨的方法，不少事情的變化：

• 首先，小，大和其他變量是在局部範圍內不再，所以必須重新定義或導入爲參數。

• this現在再次引用父元素，因爲現在正在執行的方法不是事件處理程序，而是父元素上的方法。因此，在舊代碼中引用_this可以在新代碼中使用this。

• 最後，在舊代碼中，在事件處理程序中，this引用了被單擊的元素。但是，在新方法中（見上），這意味着不同的東西：'父'對象。因此，我們需要一個參數來捕獲單擊的元素 - 我已將它作爲el參數傳遞，舊代碼中對this的引用也相應地發生了變化。

所以要注意的真實情況是：此代碼屬於哪個對象？如果您將屬於一個對象的代碼移動到另一個對象 - 例如。從一個對象上的事件處理程序到另一個對象上的方法 - 您可能需要根據需要重新修改/重命名這些或此類變量。

註釋更新的代碼拷貝如下，也可作爲jsfiddle：

... 
     // Click handlers 
     slides_li.on('click', function(){ 
      // pass 'this' - the clicked element - as the el param; also small and large. 
      gep.toggle_slides(this, small, large); 
     });     
    }, 

    toggle_slides: function(el, small, large){ 
      // '_this' in old code in handler replaced with 'this'; 
      // 'this' in handler code replaced with 'el' here 
      $('.active', this.els.slides).not(el).animate({ 
       width: small 
      }, 300).removeClass('active'); 
      // animate the clicked one 

      // 'this' in handler code replaced with 'el'here 
      if (!$(el).hasClass('active')){ 
       $(el).animate({ 
        width: large 
       }, 300).addClass('active'); 
      }     
    }