包含 Node.JS (vue) 的文件

Question

所以我想知道如何按原样包含另一个 JavaScript 文件。很像 PHP 的 include 函数/关键字。我不是在寻找 export 函数，因为它只允许您使用其他文件中的变量。

我正在使用vue init webpack my-project。

这是我基本上拥有的（Vue）：

mounted () {
    socket = io("http://localhost:8081")
    socket.connect()

    // ensure server has actually put us in a room
    socket.on("find game", () => {
        this.gameSearch = "finding"
    })
    ...
}

所以基本上我有一大堆socket.on 我想移到另一个文件中。我想知道我如何才能按原样包含它们，这样它们就可以像代码已经插入那里一样工作（如PHP的include）

---

最后会是什么样子：

mounted () {
    <socket.js file>
}

socket.js

socket = io("http://localhost:8081")
socket.connect()

// ensure server has actually put us in a room
socket.on("find game", () => {
    this.gameSearch = "finding"
})
...

Answer 1

您可能正在寻找export default。它将允许您导出函数或对象。

export default {
    // anything
}

在此处查看更多示例：https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Answer 2

你不能完全按照你描述的方式做，但是我有另一个建议。 将你所有的socket.ons 放在一个单独文件中的函数中，例如

sockets.js

  function attachSockets($socket, $this){ // note the added $ in var names, you can actually pass an array here will all objects you need

    $socket.on("find game", () => {
        $this.gameSearch = "finding"
    });
    ...
    ...
    ...
  }

然后修改你的原始文件

socket.js

socket = io("http://localhost:8081")
socket.connect()
attachSockets(socket, this)

将两个 js 文件加载到您的页面，它应该会给您想要的东西..

Answer 3

我知道你提到你不需要导出，并且你想要内联代码，但我认为你不能轻易实现，但如果你正在使用 bable 和 es6，就像现在的 vue js 一样，你可以导出和导入。

但我向您保证，它不会像您想象的那样复杂。 {宁可让它内联会更多开销}（这只是我的观点，你可能出于某种充分的理由想要它:)）

因为最后所有的代码都会在 bundle.js 里面

也许它可以很简单，你只需将你所有的 coed 包装到一个大函数中，将它与主实例绑定，现在整个代码块看起来就像它在你的主文件中，但仍然在另一个文件中。

我假设你在 es6、bable 和 import 中需要这个

例如：假设 code.js 和我的 main.js 处于同一级别，并且 (main.js) 的某些代码部分像事件侦听器等一样巨大，因此我可以在 code.js 中移动它

code.js / 就像你的socket.js

const code = function() {

    // this whole space is your's

    console.log(this);

    console.log(this.socket);

    const test = () => {
        console.log(this);
    }

    test()
}
export default code

现在是我的 main.js / 就像你的主要 vue 应用程序

import socketCode from './code';

const main = {
    socket: 'test',
    init() {
        console.log(this);
        let socketCodebinded = socketCode.bind(this); // magical this binding
        socketCodebinded(); // this will do all event-binding things 
        //and good thing is that it will have "this" as context so no breaking of references

        ... continue other code or add another lib ;) like above
    }
}

main.init();

您还可以检查参考/范围，所有事情都在完美运行 并且您可以将所有代码堆叠在 code.js/socket.js 文件中，就像它在 main.js 中一样。