从另一个 js 文件调用通道连接函数

Question

我在 phoenix 中有以下文件夹结构：

web/
  static/
    js/
      app.js
      script.js
      socket.js

---

app.js 有...

import socket from "./socket"

import script from "./script"

---

brunch-config.js 有...

files: {
    javascripts: {
      joinTo: "js/app.js"
    }
    // ...
}

---

script.js 有...

$('#some-button').on('click', function() {
    connectToChannel(data);
});

---

socket.js 有...

import {Socket} from "phoenix"

let socket = new Socket("ws://example.com/updates", {params: {"auth-token": "AUTH-TOKEN"}})

function connectToChannel(data) {
    socket.connect()

    let channel = socket.channel("updates:new", {})
    channel.join()
      .receive("ok", resp => { console.log("Joined successfully", resp) })
      .receive("error", resp => { console.log("Unable to join", resp) })

    channel.on("update", payload => {
        console.log(payload);
    })
}

export default socket

...然而，当我单击 some-button 时，我在浏览器的控制台中收到以下错误：

Uncaught ReferenceError: connectToChannel is not defined

如果我将socket.js 的内容放入script.js 中，则连接成功，但我想将它们分开。

Answer 1

connectToChannel 函数在它所定义的文件中是本地的。api.js 和 script.js 都看不到它。

您可以做的是从socket.js 导出它并将其传递给app.js，如下所示：

// socket.js

import {Socket} from "phoenix"

let socket = new Socket("ws://example.com/updates", {params: {"auth-token": "AUTH-TOKEN"}})

function connectToChannel(data) {
    socket.connect()

    let channel = socket.channel("updates:new", {})
    channel.join()
      .receive("ok", resp => { console.log("Joined successfully", resp) })
      .receive("error", resp => { console.log("Unable to join", resp) })

    channel.on("update", payload => {
        console.log(payload);
    })
}
// export the function too
export {socket, connectToChannel}


// app.js
import {socket, connectToChannel} from "./socket"

import script from "./script"

// pass the fn explicitly
script(connectToChannel);

最后将script.js 包装在一个接收connectToChannel 的函数中：

export default function(connectToChannel) {
  $('#some-button').on('click', function() {
    connectToChannel(data);
  });
}