鞏固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監聽器

回答

相關問題