JavaScript 中实现 a.js调用 b.js函数教程
以下是 JavaScript 中实现a.js调用b.js函数的5 种主流方法，涵盖不同场景和最佳实践：
一、全局函数暴露（基础方案）
1. 实现步骤
b.js（定义全局函数）：
// 定义全局可访问的函数 window.sharedFunction = function() { console.log("Function from b.js"); };a.js（调用全局函数）：
// 直接调用全局函数 sharedFunction(); // 输出: "Function from b.js"HTML（引入顺序关键）：
<script src="b.js"></script> <script src="a.js"></script>注意：必须先引入
b.js，否则a.js调用时会报undefined错误
二、ES6 模块化（推荐方案）
1. 使用export/import
b.js（导出函数）：
// 导出单个函数 export function calculate() { return Math.random() * 100; } // 导出多个函数 export const version = "1.0.0";a.js（导入函数）：
// 导入单个函数 import { calculate } from './b.js'; console.log(calculate()); // 输出随机数 // 导入多个导出项 import * as utils from './b.js'; console.log(utils.version); // 输出: "1.0.0"HTML（需启用模块化）：
<script type="module" src="a.js"></script>优势：避免全局污染，支持静态分析
三、动态脚本加载（按需加载）
1. 原生动态加载
a.js（动态加载并调用）：
function loadAndExecute() { const script = document.createElement('script'); script.src = 'b.js'; script.onload = () => { // 确保 b.js 已加载完成 if (typeof bFunction === 'function') { bFunction(); } }; document.head.appendChild(script); } // 触发加载 document.getElementById('loadBtn').addEventListener('click', loadAndExecute);b.js（定义可调用函数）：
window.bFunction = function() { alert("Dynamic script loaded!"); };四、命名空间封装（模块化进阶）
1. 使用 IIFE 创建命名空间
b.js：
const MyApp = (function() { // 私有函数 function privateFunc() { console.log("Private function"); } // 暴露公共接口 return { publicFunc: function() { privateFunc(); console.log("Public function"); } }; })();a.js：
// 调用命名空间中的函数 MyApp.publicFunc(); // 输出: // "Private function" // "Public function"五、AMD/RequireJS 方案（浏览器模块化）
1. 配置 RequireJS
HTML：
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <script> requirejs.config({ baseUrl: 'js', paths: { 'b': 'b' // 映射模块名到文件路径 } }); </script>b.js（AMD 模块）：
define(function() { return { getData: function() { return [1,2,3]; } }; });a.js（依赖加载）：
requirejs(['b'], function(bModule) { console.log(bModule.getData()); // 输出: [1,2,3] });六、最佳实践对比
方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
全局函数 | 实现简单 | 命名冲突风险 | 小型项目/快速原型 |
ES6 模块 | 类型安全/静态分析 | 需构建工具/浏览器兼容性 | 现代 Web 应用 |
动态加载 | 按需加载/性能优化 | 回调地狱/错误处理复杂 | 插件系统/按需功能 |
命名空间 | 结构化代码 | 需手动管理作用域 | 中型项目模块化 |
AMD/RequireJS | 异步加载/依赖管理 | 配置复杂/学习成本高 | 复杂单页应用 |
七、错误处理建议
加载顺序监控：
// 在 a.js 中检测 b.js 是否加载成功 window.addEventListener('error', (e) => { if (e.filename.includes('b.js')) { console.error('Failed to load b.js'); } });函数存在性检查：
// 安全调用方式 if (typeof bModule.calculate === 'function') { bModule.calculate(); } else { console.error('Function not found in b.js'); }八、工程化方案推荐
Webpack 配置（模块打包）：
// webpack.config.js module.exports = { entry: './a.js', output: { filename: 'bundle.js' }, mode: 'development' };TypeScript 类型声明（增强可维护性）：
// b.d.ts export declare function calculate(): number; // a.ts import { calculate } from './b'; console.log(calculate());九、跨域脚本调用
若b.js存在跨域问题，需服务器配置 CORS：
# Nginx 配置示例 location /js/ { add_header 'Access-Control-Allow-Origin' '*'; }十、性能优化技巧
预加载提示：
<link rel="preload" href="b.js" as="script">代码分割（Webpack）：
// a.js import(/* webpackChunkName: "b-module" */ './b.js').then(module => { module.default(); });通过合理选择方案，可有效实现模块间解耦和代码复用。建议优先采用 ES6 模块化方案，兼顾现代浏览器支持和代码可维护性。对于旧项目维护，可逐步引入模块打包工具进行重构。