Javascript flickyty&；Swup-破坏性的灵活性

我试图在使用Swup进行页面转换时销毁并重新加载我的Flickity幻灯片，但我运气不太好。这是我的js文件：

import Swup from 'swup';

var Flickity = require('flickity');

function init() {
  if (document.querySelector('.testimonials-slideshow')) {
    var flkty = new Flickity('.testimonials-slideshow', {
      wrapAround: true,
      pageDots: false,
      autoPlay: true,
      arrowShape: 'M68.374,83.866L31.902,50L68.374,16.134L64.814,12.3L24.214,50L64.814,87.7L68.374,83.866Z'
    });
  }
}

function unload() {
  flkty.destroy();
}

init();

const swup = new Swup();

swup.on('contentReplaced', init);

swup.on('willReplaceContent', unload);

但当我尝试此操作时，我得到的错误是未定义flkty。有人能给我一些建议吗？

变量范围 正如CBroe所提到的，您的

var

未定义，因为您在哪里定义它。它在函数中定义，但应在“顶层”定义

此外，如果您使用的是任何类型的模块捆绑器，有时它仍然会丢失，所以您可以考虑做一些类似的事情：

window.flkty = new Flickity('.testimonials-slideshow', ...

并且总是以这种方式引用它，即

window.flkty.destroy();

仅销毁存在的实例 这就是你的变量定义。下一个潜在错误是，当查询选择器匹配时，您仅初始化

flkty

：

if (document.querySelector('.testimonials-slideshow')) {

但是你每

willReplaceContent

一次就把它销毁一次，所以你真的可以检查一下“它是初始化的，这个页面加载了吗？”。在本例中，您可以执行如下检查：

// Init the var as false:
var flkty = false

function init() {
  if (document.querySelector('.testimonials-slideshow')) {
    flkty = new Flickity('.testimonials-slideshow', ...);
  }
}

function unload() {
  if(flkty){
    flkty.destroy();
    // Make sure the flkty var is set to false at the end:
    flkty = false;
  }
}

整理你的代码 这一切都有点失控，所以我们开始做的是创建模块。下面是我们使用的转盘模块的框架：

// modules/Carousel.js
import Swiper from "swiper";

export default {
  carouselEl: null,
  carouselSwiper: null,
  setup() {
    this.carouselEl = document.getElementById("header-carousel");
    if (!this.carouselEl) {
      // Just stop if there is no carousel on this page
      return;
    }
    this.carouselSwiper = new Swiper(this.carouselEl, { ... });
    this.carouselSwiper.on("slideChange", () => { ... });
  },
  destroy() {
    // If we already have one:
    if (this.carouselSwiper) {
      this.carouselSwiper.destroy();
    }
    // Make sure we are reset, ready for next time:
    this.carouselSwiper = null;
  },
};

然后，在main.js中，我们做了一些类似于您所做的事情：

import Carousel from "./modules/Carousel.js";

function init(){
  Carousel.setup();
  // Add more here as the project grows...
}
function unload(){
  Carousel.unload();
}

swup = new Swup();
swup.on("contentReplaced", init);
swup.on("willReplaceContent", unload);
init();

所有模块都有

设置

和

卸载

功能，如果元素不存在，这些功能不会中断，因此我们可以在每个页面上调用所有这些加载和卸载功能

我喜欢swup，但也有亲身经历过初始化和销毁东西的噩梦，因此如果需要进一步帮助，请告诉我。

变量范围 正如CBroe所提到的，您的

var

未定义，因为您在哪里定义它。它在函数中定义，但应在“顶层”定义

此外，如果您使用的是任何类型的模块捆绑器，有时它仍然会丢失，所以您可以考虑做一些类似的事情：

window.flkty = new Flickity('.testimonials-slideshow', ...

并且总是以这种方式引用它，即

window.flkty.destroy();

仅销毁存在的实例 这就是你的变量定义。下一个潜在错误是，当查询选择器匹配时，您仅初始化

flkty

：

if (document.querySelector('.testimonials-slideshow')) {

但是你每

willReplaceContent

一次就把它销毁一次，所以你真的可以检查一下“它是初始化的，这个页面加载了吗？”。在本例中，您可以执行如下检查：

// Init the var as false:
var flkty = false

function init() {
  if (document.querySelector('.testimonials-slideshow')) {
    flkty = new Flickity('.testimonials-slideshow', ...);
  }
}

function unload() {
  if(flkty){
    flkty.destroy();
    // Make sure the flkty var is set to false at the end:
    flkty = false;
  }
}

整理你的代码 这一切都有点失控，所以我们开始做的是创建模块。下面是我们使用的转盘模块的框架：

// modules/Carousel.js
import Swiper from "swiper";

export default {
  carouselEl: null,
  carouselSwiper: null,
  setup() {
    this.carouselEl = document.getElementById("header-carousel");
    if (!this.carouselEl) {
      // Just stop if there is no carousel on this page
      return;
    }
    this.carouselSwiper = new Swiper(this.carouselEl, { ... });
    this.carouselSwiper.on("slideChange", () => { ... });
  },
  destroy() {
    // If we already have one:
    if (this.carouselSwiper) {
      this.carouselSwiper.destroy();
    }
    // Make sure we are reset, ready for next time:
    this.carouselSwiper = null;
  },
};

然后，在main.js中，我们做了一些类似于您所做的事情：

import Carousel from "./modules/Carousel.js";

function init(){
  Carousel.setup();
  // Add more here as the project grows...
}
function unload(){
  Carousel.unload();
}

swup = new Swup();
swup.on("contentReplaced", init);
swup.on("willReplaceContent", unload);
init();

所有模块都有

设置

和

卸载

功能，如果元素不存在，这些功能不会中断，因此我们可以在每个页面上调用所有这些加载和卸载功能

---

我喜欢swup，但也有初始化和销毁东西的噩梦经历，因此如果需要进一步帮助，请告诉我。

关键字

var

使

flkty

成为

init

函数范围内的局部变量。

var

关键字使

flkty

成为范围内的局部变量你的

init

函数。嗨，迈克，也许可以用你的新代码更新你的问题，或者问一个新问题，我可以看看是否可以看一看。这很有效，谢谢你-我遇到了一个问题，与另一个脚本冲突，这让我很失望，但通过你的示例，所有这些工作都如预期的那样。非常感谢。啊，太棒了，我太高兴了！嗨，迈克，也许用你的新代码更新你的问题，或者问一个新问题，我可以看看我是否可以看一看。谢谢你，我遇到了一个问题，与另一个脚本冲突，这让我很失望，但是通过你的示例，一切都如预期的那样工作。非常感谢。啊，太棒了，我太高兴了！