programing

노드용 파일을 포함합니다.JS(vue)

copyandpastes 2022. 7. 13. 21:22
반응형

노드용 파일을 포함합니다.JS(vue)

그래서 어떻게 하면 다른 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 = io("http://localhost:8081")
socket.connect()

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

export가 필요없다고 하셨고 인라인 코드를 원하시지만, 그렇게 하기는 어려울 것 같습니다만, 현재 vue js와 같이 bable과 es6를 사용하고 있다면 export와 Import를 할 수 있습니다.

하지만 당신이 생각하는 것처럼 복잡하지 않을 거라고 장담해요.{인라인으로 하면 훨씬 오버헤드가 커집니다.}(제 견해로는 어떤 이유로든 필요하실 수 있습니다:)

왜냐하면 마침내 모든 코드가 큰 안에 들어가게 될 것이기 때문이다.bundle.js

단순할 수도 있지만 메인 인스턴스와 바인드하는 하나의 큰 함수에 모든 것을 결합하면 코드 블록 전체가 메인 파일 안에 있는 것처럼 보이지만 다른 파일에 있는 것처럼 보입니다.

es6, bable, 그리고 Import에 이것이 필요할 것 같습니다.

예: 가정code.js그리고 나의main.js(main.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.code.code/code.code 파일로 쌓아 올릴 수도 있습니다.

설명하신 대로는 할 수 없습니다만, 다른 제안이 있습니다.당신의 모든 것을 담다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 파일을 모두 페이지에 로드하면 원하는 것을 얻을 수 있습니다.

당신은 아마 찾고 있을 것이다.export default. 함수 또는 개체를 내보낼 수 있습니다.

export default {
    // anything
}

자세한 예는, https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/47807032/include-a-file-for-node-js-vue

반응형