javascript - Phoenix 中static/js/app.js 中的代码什么时候被调用？

Question

这些是 Programming Phoenix 书中教程中的一些示例代码。

在 web/static/js/video.js 中:

/***
 * Excerpted from "Programming Phoenix",
 * published by The Pragmatic Bookshelf.
 * Copyrights apply to this code. It may not be used to create training material,
 * courses, books, articles, and the like. Contact us if you are in doubt.
 * We make no guarantees that this code is fit for any purpose.
 * Visit http://www.pragmaticprogrammer.com/titles/phoenix for more book information.
***/
let Video = {

  init(socket, element){ if(!element){ return }
    let playerId = element.getAttribute("data-player-id")
    let videoId  = element.getAttribute("data-id")
    socket.connect()
    Player.init(element.id, playerId, () => {
      this.onReady(videoId, socket)
    })
  }
}
export default Video

在 web/static/js/app.js 中:

import "phoenix_html"
import Video from "./video"

Video.init(socket, document.getElementById("video"))

video.js 定义了一个Video对象(我应该这样调用它吗？)，它被引入到app.js中，然后 app.js 运行 Video.init。如果没有带有 #video 的 DOM，该函数将什么都不返回。

关于何时调用 Video.init 函数，我有两个问题。

1. 它会在页面加载时自动调用吗？有没有其他方法可以在我需要时调用它？
2. 无论我在哪个页面，每次加载页面时都会调用它吗？

Answer 1

Is it automatically called when a page gets loaded?

Is it called every time a page is loaded, regardless of which page I'm in?

一旦模块包含在页面中，代码就会被调用，假设您使用的是 Brunch 和 Phoenix 的默认配置，一旦执行到 app.js 由于 Phoenix 默认的 brunch-config.js 中的这一行:

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

是的，它会在包含 js/app.js 的每个页面上调用，这是 Phoenix 默认布局模板中的所有页面。

Is there another way to call it when I want to?

是的，您可以在 web/static/js/app.js 中使用 Video.init() 调用它(如 web/static/js/app.js 已经在做)。您可以通过导入 ./video 从另一个模块调用它，就像 web/static/js/app.js 一样。你可以例如将其附加到正在触发的事件，例如，当单击具有 id“foo”的元素时:

document.querySelector("#foo").addEventListener(function() {
  Video.init(...)
});