如何在使用Swup的网站中集成AlpineJS并解决轮播重复初始化问题

具体修复方案 #

1. 修改HTML代码 #

把轮播容器改用x-ref绑定，避免全局类选择器冲突：

<div class="container p-4 mx-auto" x-data="carousel">
  <div x-ref="carousel" class="carousel1">
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 1</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 2</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 3</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 4</div>
  </div>
</div>

2. 重写_carousel.js组件逻辑 #

使用Alpine的生命周期钩子控制Siema的初始化和销毁：

import Siema from 'siema';

export default () => ({
  carousel: null,
  init() {
    // 组件挂载完成后再初始化轮播，用$refs获取当前组件内的轮播容器
    this.carousel = new Siema({
      selector: this.$refs.carousel
    })
  },
  destroy() {
    // 组件卸载时销毁轮播实例，还原DOM结构
    if (this.carousel) {
      this.carousel.destroy(true); // 传true表示还原Siema修改的DOM
      this.carousel = null;
    }
  }
})

3. 修改scripts.js，打通Swup和Alpine的初始化逻辑 #

Swup替换页面内容后，需要通知Alpine扫描新的DOM节点：

import Swup from 'swup';
import ScrollReveal from 'scrollreveal';
import Alpine from 'alpinejs'
 
window.Alpine = Alpine

import carousel from './modules/_carousel.js';
Alpine.data('carousel', carousel);
Alpine.start();


function init() {
  // 扫描新页面的DOM，初始化新增的Alpine组件
  Alpine.initTree(document.documentElement);
  ScrollReveal().reveal('.headline', { duration: 1000, delay:500, viewFactor: 1 });
}

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

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

init();

Swup站点接入Alpine组件通用规则 #

后续开发下拉菜单、模态框等其他组件时，遵循以下规则即可避免同类问题：

• 组件内部的DOM元素都通过x-ref获取，禁止使用全局类名、ID选择器，避免命中旧页面残留的元素
• 第三方库的初始化逻辑统一放在组件的init()钩子中执行，不要直接在x-data的属性定义阶段初始化
• 所有用到第三方库的组件必须编写destroy()钩子，在钩子中完成第三方实例销毁、事件解绑、DOM修改还原等清理操作，Alpine会在组件对应的DOM被Swup移除时自动调用该钩子
• 全局只需要在Swup的contentReplaced事件中调用一次Alpine.initTree()，不需要手动单独初始化各个组件

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