合并重复jQuery脚本后仍觉繁琐，求更优简化实现方案

架构老林

2026-5-15

优化重复jQuery代码的方案

嘿，你这段代码确实存在大量重复的逻辑，完全可以通过提取配置+循环处理的方式来简化，既提升可读性也方便后续维护。

方案一：通用配置数组（推荐）

这种方式把所有重复的对应关系整理成一个配置数组，不管后续类名规则有没有变化，都能轻松适配：

$(document).ready(function() {
  // 定义所有需要处理的配置项：wrap容器类、要添加的outer类、目标frame类
  const wrapConfigs = [
    { wrapClass: 'wrap-around1', outerClass: 'outer1', frameClass: 'frame-h' },
    { wrapClass: 'wrap-around2', outerClass: 'outer2', frameClass: 'frame-v' },
    { wrapClass: 'wrap-around3', outerClass: 'outer3', frameClass: 'frame-v' },
    { wrapClass: 'wrap-around4', outerClass: 'outer4', frameClass: 'frame-b' }
  ];

  // 循环处理每一项配置
  wrapConfigs.forEach(config => {
    $(`div.${config.wrapClass} *`).addClass(config.outerClass);
    $(`div.${config.outerClass}`).wrapAll(`<div class="${config.frameClass}" />`);
  });
});

方案二：利用固定命名规则简化

如果你的类名命名规则（wrap-aroundN对应outerN）是固定不变的，还可以进一步简化，省去重复写outer类名：

$(document).ready(function() {
  // 只需要定义每个wrap数字对应的frame类
  const frameMap = {
    1: 'frame-h',
    2: 'frame-v',
    3: 'frame-v',
    4: 'frame-b'
  };

  // 遍历映射关系，自动生成对应的类名
  Object.entries(frameMap).forEach(([num, frameClass]) => {
    const wrapClass = `wrap-around${num}`;
    const outerClass = `outer${num}`;
    $(`div.${wrapClass} *`).addClass(outerClass);
    $(`div.${outerClass}`).wrapAll(`<div class="${frameClass}" />`);
  });
});