呼叫通道从另一个JS连接功能文件

Question

我有以下凤凰文件夹结构：

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.jsconnectToChannel：

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