我可以將變量定義爲參數嗎？

Question

我有以下使用jQuery UI的功能：

$('.droppable').droppable({ 
    tolerance: 'touch', 
    over: function() { 
     var hasHiddenList = $(this).children('ul.hidden'); 
     if (hasHiddenList.length) 
      hasHiddenList.removeClass('hidden'); 
    }, 
    out: function() { 
     var hasEmptyList = $(this).children('ul.empty'); 
     if (hasEmptyList.length) 
      hasEmptyList.addClass('hidden'); 
    }, 
    drop: function() { 
     var hasEmptyList = $(this).children('ul.empty'); 
     if (hasEmptyList.length) 
      hasEmptyList.removeClass('empty'); 
    } 
}); 

而且我想知道如果我可以定義變量hasHiddenList和hasEmptyList回調函數之外，因爲它是在所有這些相同的變量。

Answer 1

如果你真的想要的變量，有兩種選擇。

顯而易見的一個（帶陷阱）是這樣的：

var hasHiddenList = $('.droppable').children('ul.hidden'); 
var hasEmptyList = $('.droppable').children('ul.empty'); 

$('.droppable').droppable({ 
    tolerance: 'touch', 
    over: function() { 
     if (hasHiddenList.length) 
      hasHiddenList.removeClass('hidden'); 
    }, 
    out: function() { 
     if (hasEmptyList.length) 
      hasEmptyList.addClass('hidden'); 
    }, 
    drop: function() { 
     if (hasEmptyList.length) 
      hasEmptyList.removeClass('empty'); 
    } 
}); 

變量已被提取，代碼少重複。都好。

現在，問題是選擇器只運行一次。回調over,out和drop在每次發生這些事件時被調用，但hasHiddenList和hasEmptyList不會被更新;它們在每次調用之間仍然是相同的。可能不是你想要的。

來解決這個問題的方法是改爲使用的變量函數，就像這樣：

var hiddenList = function(target) { 
    return $(target).children('ul.hidden'); 
}; 
var emptyList = function(target) { 
    return $(target).children('ul.empty'); 
}; 

$('.droppable').droppable({ 
    tolerance: 'touch', 
    over: function() { 
     var list = hiddenList(this); 
     if (list.length) 
      list.removeClass('hidden'); 
    }, 
    out: function() { 
     var list = emptyList(this); 
     if (list.length) 
      list.addClass('hidden'); 
    }, 
    drop: function() { 
     var list = emptyList(this); 
     if (list.length) 
      list.removeClass('empty'); 
    } 
}); 

這個抽象瞭如何查詢的執行（你只需要編寫$(target).children('ul.empty');一次，而不是兩次），但在現實中代碼並沒有真正變得更簡單。其實，我甚至會說現在很難跟上它。另一方面，如果你使用相同的選擇器甚至超過兩次，可以說五次，那麼這可能實際上是有用的。

此外，請注意，我已經從變量名稱中刪除了「has」，因爲「has」使得它聽起來像是布爾值，但它們不是。它們是元素列表。

Answer 2

更好

的是，你甚至不需要的if語句和變量：

$('.droppable').droppable({ 
    tolerance: 'touch', 
    over: function() { 
     $(this).children('ul.hidden').removeClass('hidden'); 
    }, 
    out: function() { 
     $(this).children('ul.empty').addClass('hidden'); 
    }, 
    drop: function() { 
     $(this).children('ul.empty').removeClass('empty'); 
    } 
});