解决Vendor页面jQuery冲突 实现jQuery向导代码转原生JS

调整类名、ID无法解决问题，因为故障本质不是命名冲突：

• 绝大多数Vendor接入页都会调用jQuery.noConflict()释放$全局变量控制权，部分页面甚至会做JS沙箱隔离，直接抹除全局jQuery对象，你写的依赖$的逻辑从初始化阶段就没有正常执行
• 部分Vendor页配置了严格的内容安全策略（CSP），不在白名单内的jQuery资源根本无法加载，依赖jQuery的交互逻辑自然全部失效
  最稳妥的适配方案就是改写为无任何第三方依赖的原生JavaScript，不用适配页面的jQuery环境、冲突策略，所有运行环境都能正常生效。

直接替换你原有jQuery逻辑即可，HTML结构、CSS样式不需要做任何修改：

const base = {
  productFilterSetup() {
    document.querySelectorAll('.productFilter').forEach(filterEl => {
      const tmp = new base.filterGroup_uni(filterEl);
      tmp.setup();
    })
  },
  filterGroup_uni(targetEl) {
    const me = this;
    me.target_element = targetEl;
    me.active_element_index = 0;

    me.setup = function() {
      const radioList = targetEl.querySelectorAll('input.option, input.sub-option');
      radioList.forEach(radio => {
        radio.addEventListener('click', function() {
          me.update(this);
        })
      })
    }

    me.update = function(activeRadio) {
      const fieldsets = me.target_element.querySelectorAll('.fieldset');
      const len = fieldsets.length;
      let i = 0, j = 0;
      let radios, radioLen;
      const options = [];
      let optionsBuffer = '';
      let numOfSteps = 0;

      // 计算向导总步骤数
      for (i = 1; i <= numOfSteps + 1; i++) {
        if (me.target_element.querySelector(`.fieldset.step${i}`)) {
          numOfSteps += 1;
        }
      }

      // 重置当前步骤之后所有选项的选中状态
      for (i = 0; i < numOfSteps; i++) {
        if (activeRadio.closest(`.fieldset.step${i+1}`)) {
          for (j = i; j < numOfSteps; j++) {
            const resetRadios = me.target_element.querySelectorAll(`.fieldset.step${j+2} input.option, .fieldset.step${j+2} input.sub-option`);
            resetRadios.forEach(radio => radio.checked = false);
          }
        }
      }

      // 收集已选中的选项路径
      for (i = 0; i < len; i++) {
        radios = fieldsets[i].querySelectorAll('input.option, input.sub-option');
        radioLen = radios.length;
        for (j = 0; j < radioLen; j++) {
          if (radios[j].checked) {
            options.push(j + 1);
          }
        }
      }

      // 切换显示对应步骤的内容
      fieldsets.forEach(fs => fs.classList.add('hide-uni'));
      me.target_element.querySelector('.fieldset.option0').classList.remove('hide-uni');
      for (i = 0; i < options.length; i++) {
        optionsBuffer += options[i];
        const targetFs = me.target_element.querySelector(`.fieldset.option${optionsBuffer}`);
        if (targetFs) targetFs.classList.remove('hide-uni');
      }
    }
  }
}

// 兼容不同脚本加载时机，DOM就绪后自动初始化
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    base.productFilterSetup();
  })
} else {
  base.productFilterSetup();
}

• 改写后的代码和原jQuery版本交互逻辑完全一致，没有功能偏差
• 所有DOM查询都限定在当前组件根节点范围内，就算页面其他位置存在同名类元素也不会产生冲突，不需要额外调整类名、ID的命名规则
• 移除了全部jQuery依赖，不需要加载任何第三方库，不受Vendor页的jQuery冲突、变量释放、沙箱隔离等问题影响

如果替换代码后交互仍未生效，直接打开浏览器控制台查看报错按对应场景处理：

• 出现CSP相关报错：页面安全策略拦截了脚本执行，需要将你的脚本地址加入页面允许的脚本白名单
• 出现找不到DOM元素的报错：脚本执行时机早于DOM渲染，将脚本挪到页面底部，或增加DOM加载完成判断后再执行初始化
• 无任何报错但点击无响应：检查页面是否存在全局事件拦截逻辑阻止了点击事件冒泡，可给单选框绑定测试点击事件打印日志确认

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