modul js mengimpor pemesanan dan mengeksekusi masalah

Saya menggunakan Vue dan baru-baru ini mendapat masalah.

jika saya memiliki dua file, fileA dan fileB dan di fileB saya menulis console.log('file B test')

ketika saya melakukannya

console.log('file A test') 
import B from '@/app/fileB'

-> the devTool shows file B's console.log first  

jadi apa masalahnya di sini? pemesanan impor? apakah dijamin dapat mengimpor dan mengeksekusi dari atas ke bawah? Jika seseorang mengetahui sesuatu tentang impor atau pelaksanaan pemesanan, terima kasih terlebih dahulu!!


person benson    schedule 13.05.2021    source sumber


Jawaban (1)


Pernyataan import selalu diangkat ke bagian paling atas modul. Sebuah modul yang berisi

// some non-import code
import foo from 'foo';
// some more non-import code 2
import bar from 'bar';
// some more non-import code 3

akan berjalan seolah-olah semua impor berada di posisi paling atas:

import foo from 'foo';
import bar from 'bar';

// some non-import code
// some more non-import code 2
// some more non-import code 3

Untuk apa yang sepertinya ingin Anda lakukan, Anda dapat meminta B memiliki metode init atau sesuatu yang Anda panggil untuk membuatnya melakukan tugasnya:

import B from '@/app/fileB'
console.log('file A test')
B.init();

Opsi lain yang saya sukai adalah selalu mengimpor dan mengekspor fungsi - Anda dapat memiliki modul makeB alih-alih B, lalu memanggilnya di A:

// b
export const makeB = () => {
  const b = {};
  console.log('creating B now');
  // other stuff
  return b;
};
// a
import { makeB } from './makeB';
console.log('file A test');
const b = makeB();
// do stuff with b
person CertainPerformance    schedule 13.05.2021
comment
hai @CertainPerformance, terima kasih atas balasan Anda. jadi Anda mengatakan pernyataan Impor selalu diangkat ke atas bagaimana jika saya memiliki banyak file impor, dan di dalam setiap file juga ada banyak impor? apakah semua impor sudah diangkat ke atas dulu? karena sekarang saya sedang menjalankan proyek dan menghadapi beberapa masalah pemesanan dan mencoba mencari tahu, tetapi kode eksekusi pemesanan berbeda dari pemikiran saya. :( - person benson; 13.05.2021
comment
Ya, semua impor untuk semua file akan diangkat ke atas - setiap file akan dimuat sebelum JavaScript benar-benar dijalankan. Solusi pilihan saya untuk masalah ini adalah selalu mengekspor fungsi, dan menghindari efek samping pada modul tingkat atas. stackoverflow.com/a/52827581 stackoverflow.com /a/59998121 stackoverflow.com/a/63529657 - person CertainPerformance; 13.05.2021