在Javascript中，我如何重構一些重複的匿名函數？

Question

以下代碼是多餘的---同一個匿名函數出現三次。

我該如何重構它？

$(".operation").resizable({ 
create: function(event, ui) { 
    var width = $(".operation").width() 
    $("#width span.text").text(width) 
}, 
resize: function(event, ui) { 
    var width = $(".operation").width() 
    $("#width span.text").text(width) 
}, 
stop: function(event, ui) { 
    var width = $(".operation").width() 
    $("#width span.text").text(width) 
}, 
}) 

Answer 1

我會聲明函數：

function setWidth(event, ui) { 
    var width = $(".operation").width(); 
    $("#width span.text").text(width); 
} 

$(".operation").resizable({ 
    create: setWidth, 
    resize: setWidth, 
    stop: setWidth, 
}); 

Answer 2

你可以使用一個局部變量：

 (function() { 
     var f = function(event,ui) { 
      var width = $(".operation").width() 
      $("#width span.text").text(width) 
     } 
     $(".operation").resizable({ 
     create: f, 
     resize: f, 
     stop: f, 
     }) 
    })() 

的好處是，你不污染全局命名空間（全局對象）。

如果您不介意，您可以定義一個全局函數。

Answer 3

聲明一個新的功能

function xxx(event, ui) { 
    var width = $(".operation").width(); 
    $("#width span.text").text(width); 
} 

然後將其設置爲回調：

$(".operation").resizable({ 
    create: xxx, 
    resize: xxx, 
    stop: xxx 
});