barba js v2 重新初始化 main.js 脚本答案

【问题标题】：barba js v2 reinit main.js scriptbarba js v2 重新初始化 main.js 脚本
【发布时间】：2021-01-17 14:33:14
【问题描述】：

我正在努力使用 barba js v2。 ajaxtransition 后，我的 main.js 脚本停止工作。我想以某种方式重新启动这个脚本......

我有这样简单的 barba 过渡 ->

import barba from "@barba/core"

class Transition {
  constructor() {
    // console.log(barba)
    this.events()
  }

  events() {
    // console.log("events")
    barba.init({
      transitions: [
        {
          name: "default-transition",
          leave() {
            // create your stunning leave animation here
            console.log("leave")
          },
          enter() {
            console.log("enter")
            // create your amazing enter animation here
          }
        }
      ]
    })
  }
}

export default Transition

在 </body> 标签的 and 处我有

    <script src="js/main-dist.js"></script>
  </body>

在这个 main-dist.js 脚本中，还导入了几个其他脚本，例如显示当前日期的函数。

当我第一次进入该页面时，一切正常，但是当我进入另一个页面并返回应显示当前日期的页面时，由于脚本未初始化，日期未显示。它只在加载时初始化，而不是在 ajaxload 时初始化。

所以我的障碍是在 ajaxload 上以某种方式重新初始化这个脚本。

【问题讨论】：

标签： javascript ajax initialization barbajs

【解决方案1】：

我想通了。我们可以在转换脚本中使用 barba hook "after" :)

barba.hooks.after(() => {
const bottomDOM = document.getElementsByTagName("body")[0]
const newScript = document.createElement("script")
const oldScript = document.querySelector(".main-script")
newScript.src = "js/main-dist.js"
newScript.className = "main-script"
oldScript.remove()
bottomDOM.appendChild(newScript)
})

我在 DOM 末尾有一个<script class="main-script" src="js/main-dist.js"></script>，并使用 barba.hook 将其删除，然后再次添加它

【讨论】：