Tôi có thể làm điều này một chút khác nhau. Tôi không chắc tại sao tôi sử dụng cú pháp này, đã sao chép nó từ một số cuốn sách từ lâu. Nhưng mỗi tệp JS của tôi xác định một biến. Tệp đầu tiên, không có lý do nào, được gọi là r:
var R =
{
somevar: 0,
othervar: -1,
init: function[] {
...
} // end init function
somefunction: function[somearg] {
...
} // end somefunction
...
}; // end variable R definition
$[ window ].load[function[] {
R.init[];
}]
Và sau đó nếu tôi có một đoạn mã lớn mà tôi muốn tách biệt, tôi đặt nó vào một tệp riêng và một tên biến khác, nhưng tôi vẫn có thể tham chiếu các biến và hàm R. Tôi đã gọi cho một TD mới mà không có lý do chính đáng nào cả:
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
Bạn có thể thấy rằng nơi trong TD 'Sepfunction' Tôi gọi là R.Somefunction. Tôi nhận ra điều này không cung cấp bất kỳ hiệu quả thời gian chạy nào vì cả hai tập lệnh cần tải, nhưng nó giúp tôi giữ mã của mình được tổ chức.
Nhập các biến từ một tệp khác bằng JavaScript #
Để nhập một biến từ một tệp khác trong JavaScript:
- Xuất biến từ Tệp
A, ví dụ:
0.var TD = { xvar: 0, yvar: -1, init: function[] { ... } // end init function sepfunction: function[] { ... R.somefunction[xvar]; ... } // end somefunction ... }; // end variable TD definition $[ window ].load[function[] { TD.init[]; }] - Nhập biến trong tệp
1 làvar TD = { xvar: 0, yvar: -1, init: function[] { ... } // end init function sepfunction: function[] { ... R.somefunction[xvar]; ... } // end somefunction ... }; // end variable TD definition $[ window ].load[function[] { TD.init[]; }]
2.var TD = { xvar: 0, yvar: -1, init: function[] { ... } // end init function sepfunction: function[] { ... R.somefunction[xvar]; ... } // end somefunction ... }; // end variable TD definition $[ window ].load[function[] { TD.init[]; }]
Dưới đây là một ví dụ về xuất hai biến từ một tệp gọi là
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
Copied!
// 👇️ named export export const str = 'Hello world'; // 👇️ named export export const str2 = 'one two three';
Đây là cách chúng tôi sẽ nhập các biến trong một tệp có tên
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
Copied!
// 👇️ named import import {str, str2} from './another-file.js'; console.log[str]; // 👉️ "Hello world" console.log[str2]; // 👉️ "one two three"
Đảm bảo sửa đường dẫn chỉ vào mô -đun
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
Ví dụ: nếu
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
Chúng tôi kết thúc tên của biến trong niềng răng xoăn khi nhập nó. Điều này được gọi là nhập khẩu được đặt tên.
Cú pháp chúng tôi đang sử dụng để xuất và nhập biến được gọi là mô -đun JavaScript.
Để có thể nhập một biến từ một tệp khác, nó phải được xuất bằng cách sử dụng xuất khẩu hoặc xuất mặc định.
Ví dụ trên sử dụng xuất khẩu được đặt tên và nhập được đặt tên.
Sự khác biệt chính giữa xuất khẩu và nhập mặc định và nhập khẩu là bạn có thể có nhiều lần xuất được đặt tên cho mỗi tệp, nhưng bạn chỉ có thể có một lần xuất mặc định duy nhất.
Chúng ta hãy xem một ví dụ về cách chúng ta sẽ nhập một biến được xuất bằng cách sử dụng xuất khẩu mặc định.
Dưới đây là nội dung của
var TD =
{
xvar: 0,
yvar: -1,
init: function[] {
...
} // end init function
sepfunction: function[] {
...
R.somefunction[xvar];
...
} // end somefunction
...
}; // end variable TD definition
$[ window ].load[function[] {
TD.init[];
}]
Copied!
const str = 'Hello world'; // 👇️ default export export default str;
Và đây là cách chúng tôi nhập biến bằng cách sử dụng nhập mặc định.
Copied!
// 👇️ default import import str from './another-file.js'; console.log[str]; // 👉️ "Hello world"
Lưu ý rằng chúng tôi đã không bọc nhập khẩu trong niềng răng xoăn.
Chúng tôi cũng có thể đã sử dụng một tên khác khi nhập biến, ví dụ:
1.Copied!
// 👇️ named export export const str = 'Hello world'; // 👇️ named export export const str2 = 'one two three';
Copied!
// 👇️ default import import fooBar from './another-file.js'; console.log[fooBar]; // 👉️ "Hello world"
Điều này hoạt động, nhưng khó hiểu và nên tránh.
Nếu bạn đang xuất một biến [hoặc hàm mũi tên] dưới dạng xuất mặc định, bạn phải khai báo nó trên 1 dòng và xuất nó vào tiếp theo. Bạn không thể khai báo và xuất khẩu mặc định một biến trên cùng một dòng.
Theo kinh nghiệm của tôi, hầu hết các loại mã thế giới thực thực sử dụng được đặt tên là xuất khẩu và nhập khẩu, bởi vì chúng giúp tận dụng IDE của bạn dễ dàng hơn để tự động hoàn thành và tự động. .
You also don't have to think about which members are exported with a default or named export.
Bạn cũng có thể trộn và kết hợp. Dưới đây là một ví dụ về một tệp sử dụng cả xuất khẩu mặc định và được đặt tên.
Copied!
const str = 'Hello world'; // 👇️ default export export default str; // 👇️ named export export const num = 100;
Và đây là cách bạn sẽ nhập hai biến.
Copied!
// 👇️ default and named imports import str, { num } from './another-file.js'; console.log[str]; // 👉️ "Hello world" console.log[num]; // 👉️ 100
Chúng tôi đã sử dụng nhập mặc định để nhập biến
2 và nhập được đặt tên để nhập biếnCopied!
// 👇️ named export export const str = 'Hello world'; // 👇️ named export export const str2 = 'one two three';
3.Copied!
// 👇️ named export export const str = 'Hello world'; // 👇️ named export export const str2 = 'one two three';
Lưu ý rằng bạn chỉ có thể có một lần xuất mặc định cho mỗi tệp, nhưng bạn có thể có nhiều xuất khẩu được đặt tên khi cần thiết.