jQuery优化：合并each与on事件中的重复函数实现

完全理解你的痛点——重复写相同的核心逻辑不仅冗余，后续维护时还要改两处，很容易出漏子！其实只需要把这段重复的核心逻辑抽成独立的函数，然后在页面加载和输入事件两个场景里复用它就可以了，既简洁又便于后续编辑。

具体实现步骤 #

• 抽离核心处理函数：把原来两段代码里相同的逻辑封装成一个可复用的函数，接收目标textarea的jQuery对象作为参数，精准处理单个元素。
• 页面加载时初始化：在DOM就绪后，遍历所有目标textarea，调用这个函数完成初始值的计算。
• 绑定事件触发函数：给textarea绑定input（实时输入）和change（比如右键粘贴、拖拽文本后失去焦点的场景）事件，触发核心函数实现动态更新。

优化后的代码示例 #

假设你原来的核心逻辑是计算textarea字符数并更新计数器，优化后代码如下：

// 定义核心处理函数——后续修改只需要改这里！
function updateCharCount($textarea) {
  // 这里放你原来的核心逻辑，比如计算字符长度、更新显示等
  const charLength = $textarea.val().length;
  // 示例：更新相邻的计数器元素
  $textarea.siblings('.char-count-display').text(charLength);
}

// DOM就绪后执行初始化和事件绑定
$(function() {
  // 页面加载时：批量初始化所有目标textarea
  $('textarea.charcount').each(function() {
    updateCharCount($(this));
  });

  // 输入/内容变化时：触发核心函数更新
  $('textarea.charcount').on('input change', function() {
    updateCharCount($(this));
  });
});

额外优势 #

• 可维护性：核心逻辑只定义一次，后续要调整计算规则（比如排除空格、支持多字节字符），只需要修改updateCharCount函数即可，不用两处都改。
• 场景覆盖更全：同时绑定input和change事件，能覆盖手动输入、粘贴、拖拽文本等所有内容变化的场景，避免遗漏。
• 扩展性强：如果之后需要给函数加额外逻辑（比如超过最大长度时高亮提示），直接在核心函数里加就行，所有调用场景都会自动生效。

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