Chúng ta có thể gọi hàm được viết trong một tệp JS trong một tệp JS khác không? Bất cứ ai có thể giúp tôi làm thế nào để gọi hàm từ một tệp JS khác?
Chúng ta có thể gọi hàm được viết bằng một JavaScript trong một tệp JS khác không?
Câu trả lời:
Hàm có thể được gọi như thể nó nằm trong cùng một tệp JS miễn là tệp chứa định nghĩa của hàm đã được tải trước khi sử dụng hàm đầu tiên.
I E
File1.js
function alertNumber(number) {
alert(number);
}File2.js
function alertOne() {
alertNumber("one");
}HTML
<head>
....
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>Cách khác sẽ không làm việc.
Như Stuart Wakefield đã chỉ ra . Cách khác cũng sẽ làm việc.
HTML
<head>
....
<script src="File2.js" type="text/javascript"></script>
<script src="File1.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>Những gì sẽ không làm việc sẽ là:
HTML
<head>
....
<script src="File2.js" type="text/javascript"></script>
<script type="text/javascript">
alertOne();
</script>
<script src="File1.js" type="text/javascript"></script>
....
</head>
<body>
....
</body>Mặc dù alertOneđược định nghĩa khi gọi nó, nhưng bên trong nó sử dụng một hàm vẫn chưa được xác định ( alertNumber).
Có gì khác nhau giữa ví dụ của bạn bằng cách đưa tệp JS vào tệp Index.html sang cách tiếp cận khác nơi chúng tôi sử dụng phương thức nhập JS để nhập phương thức từ một tệp JS khác có phương thức xuất tập lệnh JS sang phương thức xuất.
—
Phil
Câu trả lời ở trên có một giả định không chính xác rằng thứ tự bao gồm các tệp có vấn đề. Vì hàm alertNumber không được gọi cho đến khi hàm alertOne được gọi. Miễn là cả hai tệp được bao gồm theo thời gian alertOne được gọi là thứ tự của các tệp không quan trọng:
[HTML]
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
alertOne( );
</script>[JS]
// File1.js
function alertNumber( n ) {
alert( n );
};
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// Inline
alertOne( ); // No errorsHoặc nó có thể được đặt hàng như sau:
[HTML]
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript">
alertOne( );
</script>[JS]
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// File1.js
function alertNumber( n ) {
alert( n );
};
// Inline
alertOne( ); // No errorsNhưng nếu bạn đã làm điều này:
[HTML]
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
alertOne( );
</script>
<script type="text/javascript" src="file1.js"></script>[JS]
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// Inline
alertOne( ); // Error: alertNumber is not defined
// File1.js
function alertNumber( n ) {
alert( n );
};Nó chỉ quan trọng về các biến và chức năng có sẵn tại thời điểm thực hiện. Khi một hàm được định nghĩa, nó không thực thi hoặc giải quyết bất kỳ biến nào được khai báo bên trong cho đến khi hàm đó được gọi sau đó.
Bao gồm các tệp tập lệnh khác nhau không khác với tập lệnh theo thứ tự đó trong cùng một tệp, ngoại trừ các tập lệnh bị trì hoãn:
<script type="text/javascript" src="myscript.js" defer="defer"></script>sau đó bạn cần phải cẩn thận
Tương tự như vậy với quá ít
—
Stuart Wakefield
Điều này có thể nghe có vẻ khó chịu nhưng sự bao gồm không hoàn toàn giống như các tập lệnh nối. Xem xét script1:
—
Mạnh
function myfunction() {và script2: alert();}Nó sẽ không hoạt động. Nó làm phiền tôi vì tôi đã cố gắng mô đun hóa một tệp js quá dài. Xem stackoverflow.com/questions/20311604/
Hàm này có chia sẻ
—
aks
thisngữ cảnh không, nếu một trong các hàm nằm trong một lớp?
thisbị ràng buộc tại điểm mà hàm được gọi (trừ khi bindđược gọi trước). Hai hàm trong hai tệp riêng biệt sẽ không thistự động chia sẻ bối cảnh, trong ví dụ trên không có thisngữ cảnh, nghĩa là windowkhông nghiêm ngặt hoặc undefinedở chế độ nghiêm ngặt. Bạn có thể làm cho hàm trong tập lệnh khác chia sẻ cùng một thisgiá trị bằng cách gán hàm là thành viên của đối tượng (tức là trong hàm tạo this.method = myOtherFunc) hoặc sử dụng liên kết. Vui lòng gửi câu hỏi SO với chi tiết hơn nếu bạn cần câu trả lời sâu hơn. Chúc mừng, Stuart
Nếu tất cả các tệp được bao gồm, bạn có thể gọi các thuộc tính từ tệp này sang tệp khác (như hàm, biến, đối tượng, v.v.)
Các hàm và biến js mà bạn viết trong một tệp .js - giả sử a.js sẽ có sẵn cho các tệp js khác - giả sử b.js miễn là cả a.js và b.js được bao gồm trong tệp bằng cách sử dụng bao gồm sau cơ chế (và theo cùng thứ tự nếu hàm trong b.js gọi hàm trong a.js).
<script language="javascript" src="a.js"> and
<script language="javascript" src="b.js">ES6: Thay vì bao gồm nhiều tệp js sử dụng <script>trong .html, bạn chỉ có thể bao gồm một tệp chính, ví dụ: script.jssử dụng thuộc tính type="module"( hỗ trợ ) và bên trong script.jsbạn có thể bao gồm các tệp khác:
<script type="module" src="script.js"></script>Và trong script.jstệp bao gồm một tệp khác như thế:
import { hello } from './module.js';
...
// alert(hello());Trong 'module.js', bạn phải xuất hàm / lớp mà bạn sẽ nhập
export function hello() {
return "Hello World";
}vâng bạn có thể bạn cần phải tham khảo cả JS fileđến .aspxtrang
<script language="javascript" type="text/javascript" src="JScript1.js">
</script>
<script language="javascript" type="text/javascript" src="JScript2.js">
</script>JScript1.js
function ani1() {
alert("1");
ani2();
}JScript2.js
function ani2() {
alert("2");
}Bạn có thể gọi hàm được tạo trong tệp js khác từ tệp bạn đang làm việc. Vì vậy, trước tiên, bạn cần thêm tệp js bên ngoài vào tài liệu html như-
<html>
<head>
<script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........Hàm được xác định trong tệp javascript bên ngoài -
$.fn.yourFunctionName = function(){
alert('function called succesfully for - ' + $(this).html() );
}Để gọi hàm này trong tệp hiện tại của bạn, chỉ cần gọi hàm là -
......
<script type="text/javascript">
$(function(){
$('#element').yourFunctionName();
});
</script>Nếu bạn muốn truyền tham số cho hàm, sau đó xác định hàm là-
$.fn.functionWithParameters = function(parameter1, parameter2){
alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}Và gọi hàm này trong tệp hiện tại của bạn là -
$('#element').functionWithParameters('some parameter', 'another parameter');
Xin đừng giả sử jQuery ở mọi nơi. Ngoài ra, gói
—
Bergi
$.fnbài tập trong một mệnh đề sẵn sàng tài liệu là vô nghĩa
được rồi tôi sẽ giữ nó trong lần tới :), nhưng bạn có thể giải thích tại sao việc gán $ .fn là vô nghĩa không?
—
Sheetal
Không phải sự phân công, sự bao bọc.
—
Bergi
sao để phương tiện khi tài liệu chưa sẵn sàng, chỉ sau đó $ .fn nên được sử dụng để tạo chức năng
—
Sheetal
Nhưng tại sao? Khai báo hàm không cần đợi DOM. Ngay cả khi cuộc gọi có thể (nhưng thường thì không đủ).
—
Bergi
Đây là một ví dụ mô tả rõ hơn với đoạn mã CodePen được đính kèm:
1.js
function fn1() {
document.getElementById("result").innerHTML += "fn1 gets called";
}2.js
function clickedTheButton() {
fn1();
} index.html
<html>
<head>
</head>
<body>
<button onclick="clickedTheButton()">Click me</button>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
</body>
</html>đầu ra
Hãy thử đoạn mã CodePen này: liên kết .
Đối với những người muốn làm điều này trong Node.js (chạy tập lệnh ở phía máy chủ), một tùy chọn khác là sử dụng requirevà module.exports. Dưới đây là một ví dụ ngắn về cách tạo mô-đun và xuất nó để sử dụng ở nơi khác:
file1.js
const print = (string) => {
console.log(string);
};
exports.print = print;file2.js
const file1 = require('./file1');
function printOne() {
file1.print("one");
};