凤凰中的静态/js/app.js中的代码什么时候被调用？

Question

以下是编程凤凰书教程中的一些示例代码。

在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

加载页面时会自动调用它吗？ 是否每次加载页面时都会调用它，而不管我在哪个页面？

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

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

因此，是的，它将在每个包含js/app.js的页面上调用，这是菲尼克斯默认布局模板中的所有页面。

如果我想的话还有别的办法叫它吗？

是的，您可以在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(...)
});