如何让js 调用js
2021-06-18 07:23:00
JavaScript 调用另一个 JavaScript 的方法主要包括以下几种：通过 <script> 标签直接调用、通过全局对象（如 window）间接调用、使用回调函数、通过事件监听器触发，以及利用 AJAX 异步加载并执行脚本。
通过 <script> 标签直接调用在 HTML 中，可通过多个 <script> 标签定义函数，并在后续脚本中直接调用。例如：
<script> function myFunction1() { alert("调用了 myFunction1"); }</script><script> function myFunction2() { alert("调用了 myFunction2"); } myFunction1(); // 直接调用 myFunction1</script>原理：<script> 标签按顺序执行，后续脚本可访问前面定义的函数。
通过全局对象间接调用
挂载到 window 对象：将函数赋值为 window 的属性，实现全局访问。window.myFunction = function() { alert("调用了 myFunction");};window.myFunction(); // 通过 window 调用
挂载到自定义对象：将函数组织到自定义对象中，避免污染全局命名空间。const myObject = { myFunction: function() { alert("调用了 myFunction"); }};myObject.myFunction(); // 通过对象调用
优势：适合模块化开发，减少全局变量冲突。
使用回调函数将函数作为参数传递给另一个函数，在特定时机执行。例如：
function callMyFunction(callback) { callback(); // 执行传入的回调}callMyFunction(function() { alert("调用了回调函数");});应用场景：异步操作（如定时器、API 请求）完成后触发回调。
通过事件监听器触发事件监听器是特殊的回调函数，用于响应特定事件（如点击、键盘输入）。
document.addEventListener("click", function() { alert("点击了页面");});特点：事件驱动模式，适合交互式应用。
利用 AJAX 异步加载脚本通过 XMLHttpRequest 动态加载外部 JS 文件并执行。
const xhr = new XMLHttpRequest();xhr.open("GET", "myScript.js");xhr.onload = function() { eval(xhr.responseText); // 执行加载的代码（需谨慎使用 eval）};xhr.send();注意事项：
eval 可能带来安全风险，建议使用 Function 构造函数或模块化方案（如 ES6 Modules）。
现代开发中更推荐使用 fetch API 替代 XMLHttpRequest。
总结：
- 直接调用适合简单场景，全局对象挂载适合模块化，回调/事件监听适合异步逻辑，AJAX适合动态加载。
- 根据需求选择合适的方式，优先考虑安全性和可维护性。
热门标签
