定义辅助函数的最优方式探讨：以jQuery插件开发为例

Great question—let’s break down your three options, compare nested vs. external function patterns, and land on the best choice for your plugin.

Let’s Analyze Each Option First #

1. Define createMessage Inside .each() #

• Pros: You get direct access to hasMax, maxVal, etc., without passing any parameters. The code feels intuitive because the function lives right where it’s used.
• Cons: Every iteration of .each() creates a brand new instance of createMessage. For small sets of elements, this is negligible, but if your plugin runs on dozens/hundreds of elements, you’re wasting memory and forcing the JS engine to do unnecessary work. It also makes the function impossible to reuse elsewhere in the plugin.

2. Define createMessage Inside the Plugin Function, Pass Parameters #

• Pros: The function is created only once when the plugin is initialized, not on every element iteration. You still keep it encapsulated within the plugin’s scope, and passing parameters makes the function’s dependencies explicit.
• Cons: You have to manually pass the four variables each time you call it, but this is a tiny tradeoff for the performance gain and cleaner structure.

3. Define createMessage Outside the Plugin Function (Within UMD Wrapper) #

• Pros: This is the most performant and reusable option. The function is created once when the UMD module loads, and since it’s inside the UMD wrapper, it never pollutes the global scope. If you later add more features to your plugin that need message generation, you can call this same helper everywhere.
• Cons: You have to pass all required parameters (no implicit access to plugin-internal variables), but this makes the function’s purpose and inputs crystal clear—great for maintainability.

Nested Functions vs. External Parameterized Functions: General Tradeoffs #

Let’s generalize beyond your specific plugin to help you make decisions in future projects:

• Nested Functions (like option 1 or 2’s plugin-internal definition):
  • Best for small, single-use helpers where the function relies heavily on surrounding scope variables, and passing all those parameters would make the code clunky. They’re quick to write and keep related logic close together.
  • Avoid when the function runs multiple times (like in loops) or needs to be reused elsewhere—duplicate function instances add unnecessary overhead.
• External Parameterized Functions (like option 3):
  • Best for reusable, logic-independent helpers that don’t rely on implicit scope. They’re easier to test, maintain, and repurpose across different parts of your codebase.
  • The only downside is the extra typing to pass parameters, but this clarity pays off long-term, especially as your plugin grows.

The Optimal Choice for Your Scenario #

If createMessage is only used within the .each() loop and your plugin typically runs on a small number of elements, option 2 strikes the best balance—it’s performant, keeps the function encapsulated, and avoids unnecessary repetition.

If you anticipate needing this message-generation logic elsewhere in your plugin (e.g., in error handling, form validation feedback, etc.), option 3 is the way to go. It’s the most scalable and clean approach, with zero global scope pollution thanks to your UMD wrapper.

Option 1 should be avoided unless you’re dealing with an extremely simple, one-off use case where the performance hit is completely irrelevant.

Quick Code Example for Option 2 #

(function ($, window, document, undefined) {
  $.fn.myValidationPlugin = function (options) {
    // Define helper once inside plugin scope
    function createMessage(hasMax, maxVal, hasMin, minVal) {
      let message = '';
      if (hasMax) message += `Maximum allowed value: ${maxVal}. `;
      if (hasMin) message += `Minimum allowed value: ${minVal}.`;
      return message.trim();
    }

    return this.each(function () {
      // Get element-specific values
      const $el = $(this);
      const hasMax = $el.data('has-max') === true;
      const maxVal = $el.data('max-val');
      const hasMin = $el.data('has-min') === true;
      const minVal = $el.data('min-val');

      // Call helper with explicit parameters
      const validationMessage = createMessage(hasMax, maxVal, hasMin, minVal);
      $el.siblings('.validation-feedback').text(validationMessage);
    });
  };
}(jQuery, window, document));

Quick Code Example for Option 3 #

(function ($, window, document, undefined) {
  // Helper defined once in UMD wrapper (no global pollution)
  function createMessage(hasMax, maxVal, hasMin, minVal) {
    let message = '';
    if (hasMax) message += `Maximum allowed value: ${maxVal}. `;
    if (hasMin) message += `Minimum allowed value: ${minVal}.`;
    return message.trim();
  }

  $.fn.myValidationPlugin = function (options) {
    return this.each(function () {
      const $el = $(this);
      const hasMax = $el.data('has-max') === true;
      const maxVal = $el.data('max-val');
      const hasMin = $el.data('has-min') === true;
      const minVal = $el.data('min-val');

      const validationMessage = createMessage(hasMax, maxVal, hasMin, minVal);
      $el.siblings('.validation-feedback').text(validationMessage);
    });
  };

  // Later, if you add a new method to the plugin...
  $.fn.myValidationPlugin.showGlobalMessage = function(hasMax, maxVal) {
    $('body').append(`<div class="global-alert">${createMessage(hasMax, maxVal, false, null)}</div>`);
  };
}(jQuery, window, document));

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