jQuery重构函数

时间:2012-02-23 03:46:21

标签: javascript jquery refactoring dry

我希望尽可能保持我的代码为DRY,并想知道以下是否可行。 我需要多次重复使用下面的代码,唯一的区别就是我在下面的函数中所做的。

.on("click", "a", function(e) {})

我可以复制addToBooking函数,给它一个不同的名称,在点击处理程序中稍作修改,但这会让人觉得浪费和重复。

我可以将代码块传递给addToBooking函数吗? 或许还有另一种我不了解的很酷,有效的方式。

完整的代码块

var addToBooking = function(that, event) {
  var left, top;

  event.stopPropagation(); 

  //Turn off all calendar tracking
  $(".track").off(); 

  //Get proper sticky positioning (Checks to make sure it wont display off screen)
  left = getPosition(".add_to_booking", "left");
  top = getPosition(".add_to_booking", "top");

  //Position sticky, display and listen for click event to see what to do next
  $(".add_to_booking").css({top: top, left: left})
                      .fadeIn('fast')
                      .on("click", function(e) { e.stopPropagation(); })
                      .on("click", "a", function(e) {
                        if($(this).text() === "YES") {
                          //Close dialog
                          closeTT();

                          //Open new add to booking box
                          addBooking(that, event);

                        } else {
                          closeTT();
                        }
                      });
}

1 个答案:

答案 0 :(得分:2)

传入函数并指定它

var addToBooking = function(that, event, custFnc) {
    ...
    ...
    .on("click", "a", custFnc );
}

Fiddle

要传递参数,您需要使用call()

jQuery( function(){

    function hey(evt, test){ 
        var text = jQuery(this).text();
        alert(text + ":" + test);
    }


    function addClick( custFnc ){ 
        var test=99;
        jQuery("#foo").on("click", 
            function(e){ 
                custFnc.call(this, e,test); 
            } 
        );
    }

    addClick(hey);
});

Fiddle