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函数，我有两个问题。

页面加载时会自动调用吗？在我想要的时候还有另一种方式来调用它吗？
每次加载页面时都会调用它，无论我在哪个页面？

Answer 1

页面加载后会自动调用吗？

每次加载页面时都会调用它，无论我在哪个页面？

一旦模块包含在页面中，代码就会被调用，假设您使用Brunch with Phoenix的默认配置，则只要执行到达{ {1}}由于凤凰城默认app.js中的这一行：

brunch-config.js

所以是的，它将在包含modules: { autoRequire: { "js/app.js": ["web/static/js/app"] } },的每个页面上调用，这是Phoenix的默认布局模板中的所有页面。

在我想要的时候还有另一种方式来调用它吗？

是的，您可以使用js/app.js从web/static/js/app.js内拨打电话（就像Video.init()已经在做的那样）。您可以通过导入web/static/js/app.js从另一个模块调用它，就像./video一样。你可以，例如将它附加到被触发的事件，例如，当一个元素具有id＆＃34; foo＆＃34;点击：

web/static/js/app.js

什么时候在凤凰城的static / js / app.js中的代码被调用？

1 个答案: