基于事件驱动的简易jQuery插件设计模式及多元素点击回调实现

Great question! Turning this reusable delete functionality into a jQuery plugin is a smart move—it makes your code more modular, easier to reuse across different parts of your app, and cleaner to maintain. Let's walk through a refactor using a simple event-driven jQuery plugin pattern that keeps your core logic encapsulated while adding flexibility.

We'll build a plugin that encapsulates the delete logic, supports configurable options, and emits custom events for extensibility:

(function($) {
  // Define the plugin
  $.fn.recordDeleter = function(options) {
    // Default configuration (overridable by users)
    const defaults = {
      confirmPrompt: function(recordType) {
        return `Are you sure you wish to delete this ${recordType}?`;
      },
      successAlert: null, // Optional custom success message
      errorAlert: function(xhr) {
        return `Error: ${xhr.responseJSON.message}`;
      }
    };

    // Merge user options with defaults
    const config = $.extend({}, defaults, options);

    // Bind functionality to each matched element
    return this.each(function() {
      const $trigger = $(this);

      // Use event namespacing for safe cleanup later
      $trigger.on('click.recordDeleter', function(e) {
        e.preventDefault(); // Prevent default action if using <a> tags
        
        const deleteUrl = $trigger.data('url');
        const recordType = $trigger.data('type');

        // Show confirmation prompt
        if (confirm(config.confirmPrompt(recordType))) {
          $.ajax({
            type: 'DELETE',
            url: deleteUrl,
            dataType: 'json',
            success: function(response) {
              // Remove the associated table row
              $trigger.closest('tr').remove();
              
              // Emit custom success event for external listeners
              $trigger.trigger('recordDeleteSuccess', [response]);
              
              // Show success alert if configured
              if (config.successAlert) {
                alert(config.successAlert);
              }
            },
            error: function(xhr) {
              // Show error alert
              alert(config.errorAlert(xhr));
              
              // Emit custom error event for external listeners
              $trigger.trigger('recordDeleteError', [xhr]);
            }
          });
        }
      });
    });
  };

  // Optional: Add a destroy method to clean up event bindings
  $.fn.destroyRecordDeleter = function() {
    return this.each(function() {
      $(this).off('click.recordDeleter');
    });
  };
})(jQuery);

This is much cleaner than your original implementation—you can initialize it on any delete trigger in one line:

// Basic initialization (uses default prompts)
$("#manual-list img.delete").recordDeleter();

// Customized initialization (override defaults)
$("#other-list .delete-button").recordDeleter({
  confirmPrompt: function(type) {
    return `Confirm deletion of this ${type} record?`;
  },
  successAlert: "Record deleted successfully!"
});

// Listen to custom events for extra logic (optional)
$("#manual-list img.delete").on('recordDeleteSuccess', function(e, response) {
  console.log('Delete succeeded with response:', response);
  // Example: Update a counter or refresh a list
  $('#record-count').text(parseInt($('#record-count').text()) - 1);
});

• Modularity: The delete logic is encapsulated in a plugin, so you can reuse it on any element with data-url and data-type attributes without repeating code.
• Configurable: You can override prompts, alerts, and behavior per use case without modifying the core plugin code.
• Event-Driven Extensibility: Custom events (recordDeleteSuccess/recordDeleteError) let you add extra functionality (like updating UI counters) without messing with the plugin's internal logic.
• Safe Cleanup: The destroyRecordDeleter method uses event namespacing to remove only the plugin's click bindings, avoiding unintended side effects.
• Chainable: Like all jQuery plugins, it supports method chaining (e.g., $('.delete').recordDeleter().addClass('active')).

内容的提问来源于stack exchange，提问作者user1032531