如何解决JavaScript模块化拆分交互逻辑时出现的循环引用报错问题

错误根因 #

1. 最初拆分后的Common.js中，initA内部直接引用了未定义的b变量，initB内部直接引用了未定义的a变量，模块化后两个函数没有对应外部变量的访问权限，自然抛出引用错误。
2. 调整为传参写法时，执行const a = initA(b)语句的阶段，b还未完成初始化，值为undefined，相当于给initA传入了无效值，因此仍然报错。

解决方案 #

方案1：封装为联动初始化函数（推荐） #

因为下拉框和输入框本身是绑定联动的成对组件，直接将二者的逻辑封装为同一个初始化函数，从根源上避免循环引用问题，同时复用性更强，支持自定义选择器适配不同场景：

// Common.js
export function initSelectInputLinkage(selectSelector = 'select.a', inputSelector = 'input.b') {
  const selectEl = document.querySelector(selectSelector);
  const inputEl = document.querySelector(inputSelector);

  // 下拉框值变更同步到输入框
  selectEl.addEventListener('change', function() {
    inputEl.value = this.value;
  })

  // 输入框内容校验
  inputEl.addEventListener('keyup', function (){
    if (!this.value.startsWith(selectEl.value)) {
      this.value = selectEl.value;
    }
  })

  // 对外暴露公共方法按需调用
  return {
    getSelectValue: () => selectEl.value,
    setInputValue: (val) => { inputEl.value = val }
  }
}

业务侧调用方式：

// A.js
import { initSelectInputLinkage } from './Common.js'
// 直接初始化联动组件对，自定义选择器可传参
const linkage = initSelectInputLinkage();

方案2：延迟获取实例（适合必须拆分初始化的场景） #

如果业务逻辑要求必须拆分两个组件的初始化逻辑，可以通过传入实例获取函数的方式，利用事件回调的延迟执行特性规避循环引用：

// Common.js
export function initA(getBInstance) {
  const a = document.querySelector('select.a');
  a.addEventListener('change', function() {
    // 事件触发时才调用函数获取b实例，此时已完成初始化
    getBInstance().setValue(this.value);
  })
  return {
    value: () => a.value
  }
}

export function initB(getAInstance) {
  const b = document.querySelector('input.b');
  b.addEventListener('keyup', function (){
    // 事件触发时才调用函数获取a实例，此时已完成初始化
    const aVal = getAInstance().value();
    if (!this.value.startsWith(aVal)) {
      this.value = aVal;
    }
  })
  return {
    setValue: (val) => { b.value = val }
  }
}

业务侧调用方式：

// A.js
import { initA, initB } from './Common.js'
// 先声明变量占位
let a = null;
let b = null;
// 传入的是获取实例的函数，调用时才会读取变量值
a = initA(() => b);
b = initB(() => a);

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