jQuery extend函数中维持ListBox类作用域 多实例下数组作用域丢失问题

问题根源 #

你遇到的作用域问题本质是每次实例化ListBox都会全局覆盖jQuery的$.fn.lbMove扩展方法：

• jQuery的原型对象$.fn是全局共享的，你在构造函数内重复定义lbMove，会导致前几次实例化定义的方法被完全覆盖
• 最后一次定义的lbMove闭包只会绑定最后一个ListBox实例的arItems变量，所以所有实例调用该方法时，操作的都是最后一个实例的数组
• DOM操作没有问题是因为DOM逻辑基于当前触发事件的元素动态查找上下文，和闭包绑定的变量无关

解决方案 #

1. 调整jQuery扩展的定义位置 #

全局只定义一次lbMove方法，通过DOM元素的data属性关联对应实例的内部数组，不需要把内部变量挂载到实例上暴露出去：

// 全局仅定义一次，不要放在ListBox构造函数内部
$.fn.lbMove = function(bUp){
  let $item = (bUp ? this.prev() : this.next());
  // 从当前元素所属的列表容器上取绑定的内部数组
  let arItems = this.closest('.list-group').data('_internal_items');
  
  // 交换数组项
  arItems[this.index()] = arItems.splice($item.index(), 1, arItems[this.index()])[0];
  
  // 原有DOM操作逻辑
  if(bUp)
      $item.before(this)
  else
      $item.after(this)
  this.click();
}

然后在ListBox构造函数内给当前列表容器绑定内部数组：

const ListBox = function(){
  let $lbContainer = $('<div class="lb-container"></div');
  // 注意不要写死id，多实例会出现id重复冲突，改用class标识
  let $lb = $('<div class="lb-col1 list-group"></div>');
  let arItems = [1,2,3,4];
  
  // 将内部数组绑定到当前列表的data属性上，使用偏门的key名避免外部意外访问
  $lb.data('_internal_items', arItems);
  
  // 剩余原有初始化逻辑...
}

2. 只读属性实现 #

JavaScript完全可以实现只读的列表访问接口，通过Object.defineProperty定义getter返回数组浅拷贝即可，外部修改返回值不会影响内部数组：

const ListBox = function(){
  let arItems = [1,2,3,4];
  
  // 定义只读属性items
  Object.defineProperty(this, 'items', {
    get: () => [...arItems], // 返回浅拷贝
    enumerable: true,
    writable: false,
    configurable: false
  });

  // 也可以用方法形式
  this.getItems = () => [...arItems];
}

如果需要完全禁止外部修改内部数组，还可以对内部数组本身执行Object.freeze(arItems)，不过要注意冻结后你自己的内部逻辑也不能修改数组元素了，需要修改时要生成新数组替换。

额外注意点 #

原代码中列表容器写死了id="lb-container"、id="lb-col1"，多实例场景下会出现DOM ID重复的问题，建议全部改用class标识，需要唯一标识的场景可以动态生成随机ID。

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