Ý tưởng của tôi là hãy để hai chức năng cuộc gọi JavaScript thông qua DOM.
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ừ //github.com/milochen0418/javascript-ipc-demo)
git clone //github.com/milochen0418/javascript-ipc-demo cd javascript-ipc-demo git checkout 5f75d44530b4145ca2b06105c6aac28b764f066eBấ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="//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