Question

我为我的项目编写了一个脚本，允许用户使用JS，PHP和MySql管理库存。用户可以选择库存位置并通过单击按钮来更新产品的计数。此过程使用AJAX调用以实时更新前端和后端。

我的代码工作正常，但由于代码冗余量的原因，我对执行不满意。我有两个添加和删除AJAX功能，以更新显示到网站的第一个库存位置。但是为了让用户在选择新位置后继续执行此操作，我必须重用嵌套在选择位置Ajax代码中的这两个函数的代码。我的JS技能不是那么强大，我想知道JQuery是否允许更好的代码凝聚力。在PHP中，我将创建一个类和函数来执行此任务以避免代码重用。我可以在JQuery中实现类似的东西吗？

＆＃13;

// 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();
                        }
                            
                    });
                });
                
            }
        })
    });
});

＆＃13;

Answer 1

JS中的函数是first class citizens

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

您不必将事件处理程序的第二份副本放在＆＃39; .glyphicon-plus＆＃39;和＆＃39; .glyphicon-minus＆＃39 ;;你只需要改变你如何连接处理程序。

使用＆＃34; on＆＃34;而不是＆＃34;单击＆＃34;，并绑定到始终存在的父元素，例如表格，div，无论你的页面部分是什么。

＆＃34;在＆＃34;采用选择器：http://api.jquery.com/on/

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

这有一个额外的好处，即事件处理程序可以在任何时候通过DOM创建的任何.glyphicon-plus处于活动状态。对于进行大量客户端更新的页面非常方便。

在Javascript（JQuery）中避免冗余代码

2 个答案: