避免JavaScript中的多餘代碼（JQuery）

Question

我爲我的項目編寫了一個腳本，它允許用戶使用JS，PHP和MySql管理庫存。用戶可以選擇一個庫存位置並通過點擊按鈕來更新產品的數量。此過程使用AJAX調用來實時更新前端和後端。

我的代碼有效，但是，由於代碼冗餘的數量，我對執行不滿意。我有兩個添加和刪除AJAX功能，以更新顯示在網站上的第一個庫存位置。但爲了讓用戶在選擇新位置後繼續執行此操作，我必須重用嵌套在選定位置Ajax代碼中的這兩個函數的代碼。我的JS技能並不強，我想知道JQuery是否允許更好的代碼內聚。在PHP中，我將創建一個類並執行此任務以避免代碼重用。我可以在JQuery中實現類似的功能嗎？

// This script is used update and display changes to inventory displayed on cp.php 
 
$(document).ready(function() { 
 
    var this_item; 
 
    var itemid; 
 
    var count; 
 
    
 
    // Store the first table from the MySQL Database and display it to the page 
 
    var location = $('.location_select').attr('title'); 
 
    $('.default_location').empty(); 
 
    $('.default_location').append(location); 
 
    
 
    
 
    // Add to the inventory count of the selected product 
 
    $('.glyphicon-plus').click(function() { 
 
     event.preventDefault(); 
 
     // Store the selected product name and update its display count on the page 
 
     this_item = $(this).attr('title'); 
 
     itemid = this_item.substr(0, this_item.length - 1); 
 
     count = parseInt($('#'+itemid).text()); 
 
     count++; 
 
     
 
     // Send the inventory count to modifyproduct.php and update new count to MySQL 
 
     $.ajax ({ 
 
      url: 'modifyproduct.php', 
 
      type: 'GET', 
 
      data: { 
 
       location: location, 
 
       itemid: itemid, 
 
       count: count, 
 
      }, 
 
       
 
      success: function(serverResponse) { 
 
        $('#'+itemid).hide(); 
 
        $('#'+itemid).html(count).delay(170); 
 
        $('#'+itemid).fadeIn(); 
 
      } 
 
       
 
     }); 
 
    }); 
 
    
 
    // Remove from the select inventory count 
 
    $('.glyphicon-minus').click(function() { 
 
     event.preventDefault(); 
 
     // Store the selected product name and update its display count on the page 
 
     this_item = $(this).attr('title'); 
 
     itemid = this_item.substr(0, this_item.length - 1); 
 
     count = parseInt($('#'+itemid).text()); 
 
     count--; 
 
     
 
     // Send the inventory count to modifyproduct.php and update new count to MySQL 
 
     $.ajax ({ 
 
      url: 'modifyproduct.php', 
 
      type: 'GET', 
 
      data: { 
 
       location: location, 
 
       itemid: itemid, 
 
       count: count, 
 
      }, 
 
       
 
      success: function(serverResponse) { 
 
        $('#'+itemid).hide(); 
 
        $('#'+itemid).html(count).delay(170); 
 
        $('#'+itemid).fadeIn(); 
 
      } 
 
       
 
     }); 
 
    }); 
 
    
 
    // Select inventory location to be displayed from .location_select menu 
 
    $('.location_select').click(function(){ 
 
     location = $(this).attr('title'); 
 
     $('.default_location').empty(); 
 
     $('.default_location').append(location); 
 
     $.ajax ({ 
 
      url: 'display.php', 
 
      type: 'GET', 
 
      data: { 
 
       location: location, 
 
      }, 
 
      
 
      success: function(serverResponse) { 
 
       $('#display_inventory').fadeOut('slow'); 
 
       $('#display_inventory').empty(); 
 
       $('#display_inventory').hide(); 
 
       $('#display_inventory').append(serverResponse); 
 
       $('#display_inventory').fadeIn('slow'); 
 
    
 
       $('.glyphicon-plus').click(function() { 
 
        event.preventDefault(); 
 
        this_item = $(this).attr('title'); 
 
        itemid = this_item.substr(0, this_item.length - 1); 
 
        count = parseInt($('#'+itemid).text()); 
 
        count++; 
 
        
 
        $.ajax ({ 
 
         url: 'modifyproduct.php', 
 
         type: 'GET', 
 
         data: { 
 
          location: location, 
 
          itemid: itemid, 
 
          count: count, 
 
         }, 
 
          
 
         success: function(serverResponse) { 
 
           $('#'+itemid).hide(); 
 
           $('#'+itemid).html(count).delay(170); 
 
           $('#'+itemid).fadeIn(); 
 
         } 
 
          
 
        }); 
 
       }); 
 
       
 
       $('.glyphicon-minus').click(function() { 
 
        event.preventDefault(); 
 
        this_item = $(this).attr('title'); 
 
        itemid = this_item.substr(0, this_item.length - 1); 
 
        count = parseInt($('#'+itemid).text()); 
 
        count--; 
 
        
 
        $.ajax ({ 
 
         url: 'modifyproduct.php', 
 
         type: 'GET', 
 
         data: { 
 
          location: location, 
 
          itemid: itemid, 
 
          count: count, 
 
         }, 
 
          
 
         success: function(serverResponse) { 
 
           $('#'+itemid).hide(); 
 
           $('#'+itemid).html(count).delay(170); 
 
           $('#'+itemid).fadeIn(); 
 
         } 
 
          
 
        }); 
 
       }); 
 
       
 
      } 
 
     }) 
 
    }); 
 
});

Answer 1

函數是first class citizens在JS因此

var fn = function() { ... } 

在你的代碼中，我看到，唯一改變的事情是我做的count

值以下

var modifyItem = function(quantity) { 
    return function() { 
    event.preventDefault(); 
    this_item = $(this).attr('title'); 
    itemid = this_item.substr(0, this_item.length - 1); 
    count = parseInt($('#' + itemid).text()); 
    // note that quantity is added here 
    count += quantity 
    $.ajax({ 
     url: 'modifyproduct.php', 
     type: 'GET', 
     data: { 
     location: location, 
     itemid: itemid, 
     count: count, 
     }, 
     success: function(serverResponse) { 
     $('#' + itemid).hide(); 
     $('#' + itemid).html(count).delay(170); 
     $('#' + itemid).fadeIn(); 
     } 
    }); 
    } 
} 

然後使用返回值（函數），就需要做

$('.glyphicon-plus').click(modifyItem(+1)) 
$('.glyphicon-minus').click(modifyItem(-1)) 

Answer 2

動作你不必對「.glyphicon加和」你的事件處理程序的第二個副本.glyphicon減;你只需要改變你如何附加處理程序。

使用「on」而不是「click」，並綁定到始終存在的父元素，例如表格，div，無論是否包裝頁面的該部分。

「開」需要一個選擇：http://api.jquery.com/on/

$(".product-table").on("click", ".glyphicon-plus", function() { 
    //your function body 
}); 

這樣做的事件處理程序，你可以通過在任何時候DOM創建任何.glyphicon加活躍的額外好處。對於進行大量客戶端更新的頁面非常方便。