在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() {
       var f = function(event,ui) {
           var width = $(".operation").width()
           $("#width span.text").text(width)
       }
       $(".operation").resizable({
       create: f,
       resize: f,
       stop: f,
       })
    })()

好处是不会污染全局名称空间（全局对象）。

如果你不介意的话，你可以定义一个全局函数。

Answer 2

我会声明这个函数：

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

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

Answer 3

声明一个新函数

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

然后将其设置为回调：

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