呼叫通道從另一個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); 
    }); 
}