JavaScript nhập nhiều tệp

Thư mục để nhập các mô-đun từ. Trừ khi bạn đã đặt tùy chọn fileExtensions, điều đó có nghĩa là mọi tệp .js, .json, .node, theo thứ tự đó. Không tái phát. Bỏ qua tệp người gọi và các tệp bắt đầu bằng . hoặc

.
└── directory
    ├── foo-bar.js
    └── baz-faz.js

0

Sự kỳ diệu của các thành phần nằm ở khả năng tái sử dụng của chúng. bạn có thể tạo các thành phần bao gồm các thành phần khác. Nhưng khi bạn lồng ngày càng nhiều thành phần, bạn nên bắt đầu chia chúng thành các tệp khác nhau. Điều này cho phép bạn giữ các tệp của mình dễ quét và tái sử dụng các thành phần ở nhiều nơi hơn

Bạn sẽ học

• Tệp thành phần gốc là gì
• Cách nhập và xuất một thành phần
• Khi nào nên sử dụng nhập và xuất mặc định và được đặt tên
• Cách nhập và xuất nhiều thành phần từ một tệp
• Cách chia thành phần thành nhiều tệp

Tệp thành phần gốc

Trong Thành phần đầu tiên của bạn, bạn đã tạo một thành phần Profile và một thành phần Gallery để hiển thị nó

Ứng dụng. js

Ứng dụng. js

Đặt lại Ngã ba

function Profile[] {
  return [
    
  ];
}

export default function Gallery[] {
  return [
    
      Amazing scientists
      
      
      
    
  ];
}

Cho xem nhiều hơn

Chúng hiện đang nằm trong tệp thành phần gốc, có tên là

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

0 trong ví dụ này. Trong Tạo ứng dụng phản ứng, ứng dụng của bạn tồn tại trong

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

1. Tuy nhiên, tùy thuộc vào thiết lập của bạn, thành phần gốc của bạn có thể nằm trong một tệp khác. Nếu bạn sử dụng một khung với định tuyến dựa trên tệp, chẳng hạn như Tiếp theo. js, thành phần gốc của bạn sẽ khác nhau đối với mỗi trang

Xuất và nhập một thành phần

Điều gì sẽ xảy ra nếu bạn muốn thay đổi màn hình đích trong tương lai và đặt một danh sách sách khoa học ở đó? . Điều này sẽ làm cho chúng trở nên mô đun hơn và có thể tái sử dụng trong các tệp khác. Bạn có thể di chuyển một thành phần trong ba bước

1. Tạo một tệp JS mới để đặt các thành phần vào
2. Xuất thành phần chức năng của bạn từ tệp đó [sử dụng hoặc xuất]
3. Nhập nó vào tệp mà bạn sẽ sử dụng thành phần đó [sử dụng kỹ thuật tương ứng để nhập hoặc xuất]

Ở đây cả Profile và Gallery đã được chuyển ra khỏi

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

0 vào một tệp mới có tên là

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

7. Bây giờ bạn có thể thay đổi

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

0 để nhập Gallery từ

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

7

Ứng dụng. jsGallery. js

Ứng dụng. js

Đặt lại Ngã ba

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

Lưu ý cách ví dụ này được chia thành hai tệp thành phần bây giờ

1. import Gallery from './Gallery.js';
   
   export default function App[] {
     return [
       
     ];
   }
   
   

   7
   • Xác định thành phần Profile chỉ được sử dụng trong cùng một tệp và không được xuất
   • Xuất thành phần Gallery dưới dạng xuất mặc định

2. import Gallery from './Gallery.js';
   
   export default function App[] {
     return [
       
     ];
   }
   
   

   0
   • Nhập khẩu Gallery dưới dạng nhập khẩu mặc định từ

     import Gallery from './Gallery.js';
     
     export default function App[] {
       return [
         
       ];
     }
     
     

     7
   • Xuất thành phần gốc

     import Gallery from './Gallery';

     7 dưới dạng xuất mặc định

Ghi chú

Bạn có thể gặp các tệp bỏ phần mở rộng tệp

import Gallery from './Gallery';

8 như vậy

import Gallery from './Gallery';

import Gallery from './Gallery';

9 hoặc

export function Profile[] {
  // ...
}

0 sẽ hoạt động với React, mặc dù cái trước gần giống với cách thức hoạt động của các Mô-đun ES gốc hơn

Lặn sâu

Xuất mặc định so với xuất có tên

Hiển thị chi tiết

Có hai cách chính để xuất giá trị bằng JavaScript. xuất khẩu mặc định và xuất khẩu được đặt tên. Cho đến nay, các ví dụ của chúng tôi chỉ sử dụng xuất khẩu mặc định. Nhưng bạn có thể sử dụng một hoặc cả hai trong cùng một tệp. Một tệp không thể có nhiều hơn một lần xuất mặc định, nhưng nó có thể có bao nhiêu lần xuất được đặt tên tùy thích

Cách bạn xuất thành phần của mình chỉ ra cách bạn phải nhập nó. Bạn sẽ gặp lỗi nếu cố gắng nhập một bản xuất mặc định giống như cách bạn thực hiện một bản xuất có tên. Biểu đồ này có thể giúp bạn theo dõi

SyntaxExport statementImport statementDefault

export function Profile[] {
  // ...
}

1

export function Profile[] {
  // ...
}

2Named

export function Profile[] {
  // ...
}

3

export function Profile[] {
  // ...
}

4

Khi bạn viết nhập khẩu mặc định, bạn có thể đặt bất kỳ tên nào bạn muốn sau

export function Profile[] {
  // ...

  

}

5. Ví dụ: thay vào đó, bạn có thể viết

export function Profile[] {
  // ...
}

6 và nó vẫn cung cấp cho bạn cùng một bản xuất mặc định. Ngược lại, với cách nhập có tên, tên phải khớp cả hai bên. Đó là lý do tại sao chúng được gọi là nhập khẩu có tên

Mọi người thường sử dụng xuất mặc định nếu tệp chỉ xuất một thành phần và sử dụng xuất có tên nếu tệp xuất nhiều thành phần và giá trị. Bất kể bạn thích phong cách mã hóa nào, hãy luôn đặt tên có ý nghĩa cho các chức năng thành phần của bạn và các tệp chứa chúng. Các thành phần không có tên, chẳng hạn như

export function Profile[] {
  // ...
}

7, không được khuyến khích vì chúng khiến việc gỡ lỗi trở nên khó khăn hơn

Xuất và nhập nhiều thành phần từ cùng một tệp

Điều gì sẽ xảy ra nếu bạn chỉ muốn hiển thị một ________ 56 _______ thay vì một bộ sưu tập? . Nhưng

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

7 đã có một lần xuất mặc định và bạn không thể có hai lần xuất mặc định. Bạn có thể tạo một tệp mới có xuất mặc định hoặc bạn có thể thêm xuất có tên cho Profile. Một tệp chỉ có thể có một lần xuất mặc định nhưng có thể có nhiều lần xuất được đặt tên

Để giảm khả năng nhầm lẫn giữa xuất mặc định và xuất có tên, một số nhóm chọn chỉ sử dụng một kiểu [mặc định hoặc có tên] hoặc tránh trộn chúng trong một tệp. Đó là vấn đề sở thích. Hãy làm những gì tốt nhất cho bạn

Đầu tiên, xuất Profile từ

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

7 bằng cách sử dụng xuất có tên [không có từ khóa

import { Profile } from './Gallery.js';

4]

export function Profile[] {
  // ...
}

Sau đó, nhập Profile từ

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

7 đến

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

0 bằng cách nhập có tên [có dấu ngoặc nhọn]

import { Profile } from './Gallery.js';

Cuối cùng, kết xuất

import { Profile } from './Gallery.js';

8 từ thành phần

import Gallery from './Gallery';

7

export default function App[] {
  return ;
}

Bây giờ

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

7 chứa hai lần xuất. xuất khẩu Gallery mặc định và xuất khẩu Profile có tên.

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

0 nhập cả hai. Hãy thử chỉnh sửa

import { Profile } from './Gallery.js';

8 thành

export default function App[] {

  

  return ;
}

5 và quay lại ví dụ này

Ứng dụng. jsGallery. js

Ứng dụng. js

Đặt lại Ngã ba

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

Bây giờ bạn đang sử dụng kết hợp xuất mặc định và xuất có tên

• import Gallery from './Gallery.js';
  
  export default function App[] {
    return [
      
    ];
  }
  
  

  7
  • Xuất thành phần Profile dưới dạng xuất có tên gọi là Profile
  • Xuất thành phần Gallery dưới dạng xuất mặc định

• import Gallery from './Gallery.js';
  
  export default function App[] {
    return [
      
    ];
  }
  
  

  0
  • Nhập khẩu Profile dưới dạng nhập khẩu có tên gọi là Profile từ

    import Gallery from './Gallery.js';
    
    export default function App[] {
      return [
        
      ];
    }
    
    

    7
  • Nhập khẩu Gallery dưới dạng nhập khẩu mặc định từ

    import Gallery from './Gallery.js';
    
    export default function App[] {
      return [
        
      ];
    }
    
    

    7
  • Xuất thành phần gốc

    import Gallery from './Gallery';

    7 dưới dạng xuất mặc định

Tóm tắt lại

Trên trang này bạn đã học

• Tệp thành phần gốc là gì
• Cách nhập và xuất một thành phần
• Thời điểm và cách sử dụng nhập và xuất mặc định và được đặt tên
• Cách xuất nhiều thành phần từ cùng một tệp

Hãy thử một số thử thách

Thử thách 1/1 .

Tách các thành phần hơn nữa

Hiện tại,

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

7 xuất cả Profile và Gallery, điều này hơi khó hiểu

Di chuyển thành phần Profile thành thành phần

// Move me to Profile.js!
export function Profile[] {
  return [
    
  ];
}

export default function Gallery[] {
  return [
    
      Amazing scientists
      
      
      
    
  ];
}

1 của chính nó, sau đó thay đổi thành phần

import Gallery from './Gallery';

7 để lần lượt hiển thị cả hai thành phần

import { Profile } from './Gallery.js';

8 và

export default function App[] {
  return ;
}

5

Bạn có thể sử dụng xuất mặc định hoặc xuất có tên cho Profile, nhưng đảm bảo rằng bạn sử dụng cú pháp nhập tương ứng trong cả

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

0 và

import Gallery from './Gallery.js';

export default function App[] {
  return [
    
  ];
}

7. Bạn có thể tham khảo bảng từ tìm hiểu sâu bên trên

Làm cách nào để nhập mọi thứ từ một tệp trong JavaScript?

Làm cách nào để kết nối hai tệp JavaScript?

Làm cách nào để nhập tệp từ cùng một thư mục trong JavaScript?

Làm cách nào để nhập thư viện trong JavaScript?