巩固jQuery监听器

最近我一直在研究一个需要我对Symfony后端进行大量AJAX调用的项目。由于每个AJAX调用都是由不同的URI构成的，所以我最终得到了一个很长的脚本，但有很多.on（'event'，function（）{...}）代码块，如下所示：巩固jQuery监听器

$(document).ready(function(){ 
    $('.class').on('click', function(e){ 
     e.preventDefault(); 
     //AJAX call

这基本上是一遍又一遍地重复，但由于选择器和要接收的数据类型的细微变化，我一直重复写同一代码块。

我一直在考虑使用构建器模式（它甚至可能在JS中？）来修剪代码。我不是很擅长JavaScript，所以任何帮助将非常感激。

UPDATE：

/** 
* AJAX prototype 
* 
* @param options 
* @constructor 
*/ 

//set TestProtObj properties in the constructor 
var AjaxProt = function (options) { 
    this.ajaxCallType = options.ajaxCallType; 
    this.targetEl = options.targetEl; 
    this.event = options.event; 
    this.method = options.method; 
    this.htmlFactory = options.htmlFactory; 
}; 

//add methods to the object prototype 
AjaxProt.prototype = { 

    init: function() { 
     var targetEl = this.targetEl; 
     targetEl.on(this.event, function(e) { 
      e.preventDefault(); 
      this.ajaxCall(); 
     }) 
    }, 

    modalCallback: function(successData) { 
     var modal = this.htmlFactory.createHtml({ 
      title: 'Bet: Detailed View', 
      id: '#bet-detailed-model', 
      htmlType: 'modal' 
     }); 

     if (successData.success = true) { 
      $('#content').prepend(modal); 
      $('#bet-detailed-model').modal({show: 
       true 
      }); 
     } else { 
      $('#content').prepend(modal); 
      $('#bet-detailed-model').modal({ 
       show: true 
      }); 
      $('.modal-body').append(alert); 
     } 
    }, 

    ajaxCall: function() { 
     var url = this.targetEl.attr('href'), 
      method = this.method, 
      ajaxCallType = this.ajaxCallType; 

     switch (ajaxCallType) { 
      case 'modalGet': 
       var callback = this.modalCallback(); 
       break; 
     } 

     $.ajax({ 
      url: url, 
      type: method, 
      success: function(data) { 
       callback(data) 
      } 
     }); 
    } 
}; 

//initialize client code 
$(document).ready(function() { 
    // initialize new AjaxPro 
    var AjaxBetDetailed = new AjaxProt ({ 
     ajaxCallType: 'modalGet', 
     targetEl: $('.ajax-ticket-view'), 
     event: 'click', 
     method: 'GET', 
     htmlFactory: new HtmlFactory() 
    }); 

    //initialize concrete object 
    AjaxBetDetailed.init(); 
});

遗憾的是，似乎我的事件处理程序没有约束力，使得e.preventDefault不工作 - 它是所有跟随的链接。我真的不习惯以这种方式编写类，所以任何帮助将不胜感激。

更新2：

我也写在的jsfiddle概念类试图复制我想要实现的行为的证据。它也没有绑定事件处理程序 - 所以这一定是问题。我似乎无法解决它。

的jsfiddle：Click Me Please!

来源

2015-03-03 natnai

你能告诉我们一整块（或两个）来更好地展示它们之间的区别吗？ – 2015-03-03 02:02:04

需要看到一个模式，以提供任何建议 – charlietfl 2015-03-03 02:04:26

好吧，我最终得到了我懒惰的屁股编码这种模式，因为我懒得保持复制/粘贴我糟糕的意大利面代码。 – natnai 2015-03-05 15:27:52

你可以重用你的 “细微变化” 作为参数相同的功能：

function registerClick(className, url, param) { 
    $('.' + className).on('click', function(e) { 
    // Ajax call using url and param, for instance 
    }); 
}

，然后使用它：

registerClick('class', '/api/foo', 'bar'); 
registerClick('toto', '/api/foo', 'buzz');

这不是专门针对JS但任何类型的编程/脚本语言：将所有可重用的代码放入一个函数中（或者如果您希望面向对象的对象，或者如果您希望面向对象的原型， rototype等，但这个想法是相同的）。

来源

2015-03-03 02:06:21 floribon

巩固jQuery监听器

回答

相关问题