Question

我目前正在构建一个Web应用程序，我基本上使用很多ajax请求来构建它，这需要我使用jQuery中的.on()选择器来动态使用元素。我注意到，虽然我的脚本变得非常长，并且代码非常相似，但执行的功能也不同。

例如代码继续这样：

$(function() {

    $(document).on('click', '.el01', function() {
        executeFunctionA($(this).data('x'));
    });

    $(document).on('click', '.el02', function() {
        showDivFunction();
        executeFunctionB(true);
    });

    $(document).on('click', '.el03', function() {
        executeFunctionC($(this).data('x'), 300, false, function() {
            returnSomethingFromFunctionD();
        });
    });

    ............. Goes on for another 600 lines

});

我想知道是否有办法减少所有这些$(document).on()陈述？如果有一种更简单的方法可以减少代码量，那么继续这样下去将是愚蠢的。也许就像让$(document).on('click')成为一个我可以使用__c('el', f() {})或类似的东西来调用的选择器？

Answer 1

可以最小化点击功能。但无论如何，你必须在每个 if 包装器中编写子函数。

function ClkElmt(element) {
this.el = $(element);
this.check = function(){

  if (this.el.hasClass('el01')) {
      executeFunctionA($(this).data('x'));   
      console.log('el01'); 
  }

  if (this.el.hasClass('el02')) {
      showDivFunction();
      executeFunctionB(true);
      console.log('el02'); 
  }

  if (this.el.hasClass('el03')){       
      executeFunctionC($(this).data('x'), 300, false, function() {
      returnSomethingFromFunctionD();
      console.log('el03');
  }


 };
}


(function(){
   $('.el01, .el02, .el03, ....').on('click', function(){
   elemts = new ClkElmt(this);
   elemts.check();
  });
})();

Answer 2

简短的回答是：不，你不能。 [实际上你可以，但你不应该]

答案很长：您只能分解常见功能。你所拥有的并不常见，因为你为每个类使用不同的事件处理程序。

您可以做的最多就是使用“地图”减少您的输入量，例如：

var myEventHandlers = {
    '.el01': function() {
         executeFunctionA($(this).data('x'));
    },
    '.el02': function() {
        showDivFunction();
        executeFunctionB(true);
    },
    '.el03': function() {
        executeFunctionC($(this).data('x'), 300, false, function() {
            returnSomethingFromFunctionD();
        });
    }
};

然后添加一个事件处理程序，该处理程序委托给“mapping”对象：

$(document).on('click', Object.keys(myEventHandlers).join(","), function(e) {
    var classList = $(this).attr('class').split(" ");
    for(var i in classList) {
        myEventHandlers["." + i] && $.proxy(myEventHandlers["." + i], this, e);
    }
});

（可以使用额外的html属性消除for循环，例如data-event-handler如果您有选项;或者如果您保证每个元素只有一个类

这个重构将为每个事件处理程序保存一行（如果你有600个事件处理程序，那将是好的），但它不是特别可读，所以如果你确实选择了这些行确保坚持发表评论解释原因

第二个想法，你具体问的是这样的：

function __c(selector, handler) {
    $(document).on('click', selector, handler);
}
__c('.el01', function(event) { /*...*/ });

然而，这既容易出错又很难阅读。你应该不这样做只是为了节省几次击键 - 因为它不会让你获得任何其他东西。上面的方法至少可以很容易地看出哪个处理程序与哪个类相关 - 这种方式不会。

我可以减少许多.on语句的jQuery代码吗？

2 个答案: