如何获取由其他JS代码初始化的Flickity实例？

以下是几种能获取由第三方不可访问JS初始化的Flickity实例的方法，按优先级从高到低排列：

• 直接读取元素的私有实例属性
  很多版本的Flickity会把实例直接挂载到目标滑块元素的_flickity私有属性上，直接读取即可：

  const sliderEl = document.querySelector('.slider');
  const flickityInstance = sliderEl._flickity;
  

  注意：部分新版本Flickity可能改用了其他属性名，比如__flickity，如果_flickity返回undefined可以试试这个。

• 通过全局实例集合匹配
  Flickity默认会在Flickity.instances数组中存储所有已创建的实例，你可以遍历这个数组，匹配对应的DOM元素：

  const sliderEl = document.querySelector('.slider');
  const targetInstance = Flickity.instances.find(inst => inst.element === sliderEl);
  

• 监听初始化事件捕获实例
  如果滑块还未完成初始化（比如你可以在第三方JS执行前运行代码），可以监听flickityReady事件，在实例创建完成时直接获取：

  const sliderEl = document.querySelector('.slider');
  sliderEl.addEventListener('flickityReady', (e) => {
    const flickityInstance = e.detail.flickity;
    // 在这里使用实例
  });
  

• 重写Flickity构造函数兜底
  如果以上方法都失效，可以提前重写Flickity的构造函数，记录所有新创建的实例：

  // 保存原始构造函数
  const OriginalFlickity = window.Flickity;
  const allInstances = [];
  
  // 重写构造函数
  window.Flickity = function(el, opts) {
    const inst = new OriginalFlickity(el, opts);
    allInstances.push(inst);
    return inst;
  };
  
  // 复制原始构造函数的静态属性和方法
  Object.assign(window.Flickity, OriginalFlickity);
  
  // 之后需要时从allInstances中筛选目标实例
  const sliderEl = document.querySelector('.slider');
  const targetInstance = allInstances.find(inst => inst.element === sliderEl);
  

这些方法的有效性取决于Flickity的版本和第三方JS的实现方式，如果对方刻意隐藏了实例（比如用闭包完全隔离），可能无法获取，但绝大多数场景下以上方案都能生效。

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