如何在Node.js模块间调用？附HTML与JS代码场景示例

嘿，我来帮你搞定这个问题～要实现这个调用，核心要注意脚本加载顺序和修正一处小代码错误，下面一步步拆解：

1. 先加载test_foo.js，再加载test_bar.js #

JavaScript是按脚本在页面中出现的顺序执行的，如果test_bar.js先加载，那当BAR.init执行时，FOO对象还没被定义，肯定会报错。所以在你的HTML里，必须把test_foo.js放在test_bar.js前面引入：

<!DOCTYPE html>
<html>
<head>
<title>你的页面标题</title>
<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 然后是test_foo.js -->
<script src="test_foo.js"></script>
<!-- 最后是test_bar.js -->
<script src="test_bar.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

2. 修正test_foo.js里的大小写错误 #

我注意到你在test_foo.js的初始化代码里写了Foo.init()，但你的对象是大写的FOO，这会导致FOO的init方法根本没被执行（虽然hello方法不依赖init，但这个小错误可能会埋下隐患），赶紧改成：

/* test_foo.js */
FOO = { 
  init: function() { console.log("FOOO LOADED"); }, 
  hello: function(){ console.log("hello I'm FOO"); } 
};
$(function() { 
  $(window).load(function() { 
    FOO.init(); // 这里把Foo改成大写的FOO
  }); 
});

3. 在BAR.init里直接调用FOO.hello() #

现在脚本顺序正确，FOO已经在BAR之前被定义好了，你可以直接在BAR.init里调用FOO.hello()：

/* test_bar.js */
BAR = { 
  init: function() { 
    console.log("BAR LOADED!"); 
    FOO.hello(); // 直接调用就行啦
  } 
};
$(function() { 
  $(window).load(function() { 
    BAR.init(); 
  }); 
});

额外小优化：简化jQuery的事件嵌套 #

你现在用了$(function() { $(window).load(...) })，其实$(window).load()本身就是等待页面所有资源加载完成，外层的$(function())是等待DOM就绪，这俩嵌套完全没必要，可以简化成：

test_foo.js里改成：

$(window).load(function() { 
  FOO.init(); 
});

test_bar.js里改成：

$(window).load(function() { 
  BAR.init(); 
});

这样代码更清爽，功能一点没变～

内容的提问来源于stack exchange，提问作者hellohihihi