Hướng dẫn can i use a javascript function from another file? - Tôi có thể sử dụng một hàm javascript từ một tệp khác không?

Question

Ý tưởng của tôi là hãy để hai chức năng cuộc gọi JavaScript thông qua DOM.

Nội dung chính Show

Trả lời: Sử dụng câu lệnh export và <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="js_ipc" style="display:none;"></div> <div id="test_btn" class="btn"> <a><p>click to test</p></a> </div> </body> <script src="js/callee.js"></script> <script src="js/caller.js"></script> </html> 0
Câu hỏi thường gặp liên quan
Bạn có thể gọi một chức năng từ một tệp JavaScript khác không?
Làm thế nào để bạn truy cập một hàm trong tệp .js khác?
Làm cách nào để tham khảo một tệp JavaScript từ một tệp khác?
JavaScript có thể ở trong một tệp riêng biệt không?

Cách để làm điều đó rất đơn giản ... chúng ta chỉ cần xác định thẻ HIDDEN JS_IPC HTML. Sau khi thanh ghi callee nhấp vào thẻ hidden js_ipc, thì người gọi có thể gửi sự kiện nhấp chuột để kích hoạt callee. Và đối số được lưu trong trường hợp bạn muốn vượt qua.

Khi chúng ta cần sử dụng trên đường?

Thỉnh thoảng, hai mã JavaScript rất phức tạp để tích hợp và rất nhiều mã Async ở đó. Và mã khác nhau sử dụng khung khác nhau nhưng bạn vẫn cần có một cách đơn giản để tích hợp chúng với nhau.

Vì vậy, trong trường hợp đó, không dễ để làm điều đó.

Trong việc thực hiện dự án của tôi, tôi gặp trường hợp này và nó rất phức tạp để tích hợp. Và cuối cùng tôi phát hiện ra rằng chúng ta có thể để hai JavaScript gọi nhau thông qua DOM.

Tôi chứng minh theo cách này trong mã git này. Bạn có thể có được nó thông qua theo cách này. (Hoặc đọc nó từ https://github.com/milochen0418/javascript-ipc-demo)

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

Bất cứ nơi nào, ở đây, tôi cố gắng giải thích bằng trường hợp đơn giản sau đây. Tôi hy vọng rằng theo cách này có thể giúp bạn tích hợp hai mã JavaScript khác nhau dễ dàng hơn trước khi không có bất kỳ thư viện JavaScript nào để hỗ trợ giao tiếp giữa hai tệp JavaScript được tạo bởi các nhóm khác nhau.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

Và mã CSS/style.css

.btn {
    background-color:grey;
    cursor:pointer;
    display:inline-block;
}

js/caller.js

function caller_add_of_ipc(num1, num2) {
    var e = new Event("click");
    e.arguments = arguments;
    document.getElementById("js_ipc").dispatchEvent(e);
}
document.getElementById("test_btn").addEventListener('click', function(e) {
    console.log("click to invoke caller of IPC");
    caller_add_of_ipc(33, 22);      
});

js/callee.js

document.getElementById("js_ipc").addEventListener('click', (e)=>{
    callee_add_of_ipc(e.arguments);
});    
function callee_add_of_ipc(arguments) {
    let num1 = arguments[0];
    let num2 = arguments[1];
    console.log("This is callee of IPC -- inner-communication process");
    console.log( "num1 + num2 = " + (num1 + num2));
}

Chủ đề: JavaScript / JQueryPrev | Tiếp theoPrev|Next

Trả lời: Sử dụng câu lệnh export và <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="js_ipc" style="display:none;"></div> <div id="test_btn" class="btn"> <a><p>click to test</p></a> </div> </body> <script src="js/callee.js"></script> <script src="js/caller.js"></script> </html> 0

Vì ECMAScript 6 (hoặc ES6), bạn có thể sử dụng câu lệnh export hoặc

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

0 trong tệp JavaScript để xuất hoặc nhập các biến, chức năng, lớp hoặc bất kỳ thực thể nào khác đến/từ các tệp JS khác.

Ví dụ: giả sử bạn có hai tệp javascript có tên là "main.js" và "app.js" và bạn muốn xuất một số biến và hàm từ "main.js" sang "app.js". Sau đó, trong tệp "main.js", bạn cần viết câu lệnh export (dòng số không 9) như trong ví dụ sau:

let msg = "Hello World!";
const PI = 3.14; 
 
function addNumbers(a, b){
    return a + b;
}
 
// Exporting variables and functions
export { msg, PI, addNumbers };

Và trong tệp "App.js", bạn cần viết câu lệnh

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

0 (dòng số 1) như được hiển thị ở đây:

import { msg, PI, addNumbers } from './main.js';
 
console.log(msg); // Prints: Hello World!
console.log(PI); // Prints: 3.14
console.log(addNumbers(5, 16)); // Prints: 21

Ngoài ra, bạn có thể sử dụng phương thức jQuery

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

5 để tải tệp JS từ máy chủ, sau đó thực thi nó bằng một dòng mã Sigle. Giả sử bạn có tệp JS "test.js" với mã sau.

// Defining variables
var str = "Hi there!";
var num = 15;
 
// Defining a function
function multiplyNumbers(a, b){
    return a * b;
}

Bây giờ bạn có thể tải tệp "test.js" này trong tập lệnh của mình bằng phương thức

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

5, như thế này:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Load JS File Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
    var url = "test.js";
    
    $.getScript(url, function(){
        $(document).ready(function(){
            console.log(str); // Prints: Hi there!
            console.log(num); // Prints: 15
            console.log(multiplyNumbers(4, 25)); // Prints: 100
        });
    });
    </script> 
</body>
</html>

Xem hướng dẫn về các tính năng JavaScript ES6 để tìm hiểu về các tính năng mới được giới thiệu trong ES6.

Câu hỏi thường gặp liên quan

Dưới đây là một số Câu hỏi thường gặp liên quan đến chủ đề này:

Cách kiểm tra xem một biến có tồn tại hoặc được xác định trong JavaScript không
Cách trả về nhiều giá trị từ một hàm trong JavaScript
Cách xác định một chức năng trong jQuery

Bạn có thể gọi một chức năng từ một tệp JavaScript khác không?

Gọi một chức năng bằng tệp JavaScript bên ngoài, chúng tôi cũng có thể gọi các hàm JavaScript bằng cách sử dụng tệp JavaScript bên ngoài được gắn vào tài liệu HTML của chúng tôi.We can also call JavaScript functions using an external JavaScript file attached to our HTML document.

Làm thế nào để bạn truy cập một hàm trong tệp .js khác?

Sử dụng "var" trong khi tạo một hàm, sau đó bạn có thể truy cập nó từ một tệp khác., then you can access that from another file.

Làm cách nào để tham khảo một tệp JavaScript từ một tệp khác?

Chúng tôi có thể bao gồm một tệp JavaScript trong một tệp JavaScript khác bằng hệ thống mô -đun ES6 gốc.Điều này cho phép chúng tôi chia sẻ mã giữa các tệp JavaScript khác nhau và đạt được mô -đun trong mã.Có nhiều cách khác để bao gồm một tệp JS như Node JS yêu cầu, hàm getcript của JQuery và tải nạp.using the native ES6 module system. This allows us to share code between different JavaScript files and achieve modularity in the code. There are other ways to include a JS file like Node JS require, jQuery's getScript function, and Fetch Loading.

JavaScript có thể ở trong một tệp riêng biệt không?

Bạn có thể giữ mã JavaScript trong một tệp bên ngoài riêng biệt và sau đó trỏ đến tệp đó từ tài liệu HTML của bạn. and then point to that file from your HTML document.

programming javascript Call function JavaScript Require file js