引言

当我们使用JavaScript写一个复杂界面的业务逻辑时，经常会把所有的函数写在同一个JS文件中。然而随着功能的不断增加，这个JS文件会变得又臭又长，所有的功能像一团乱麻一样交织在一起，自己都不想回头看。为了避免这种情况的发生，我们应该在开始编码的时候就对不同的功能进行封装（即：将不同的业务逻辑写在不同的JS文件中），进而降低代码的耦合性。

因此，就会出现不同JS文件之间函数的相互调用问题。

调用方法方法很简单：我们只需将不同的JS文件在同一个html文件中引用，即可在任一JS文件中调用其他JS文件中的封装的函数了。

根据调用函数位置的不同，我们可以将函数调用方式分为全局调用和局部调用两类。

需要注意的是：不同的调用方式，细节上稍有区别。

1、全局调用

所谓全局调用，就是在函数外部调用其他JS文件中封装的函数。

(1)被调用的JS文件先引用

例如：test.html文件

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <script src="a.js"></script>
    <script src="b.js"></script>
</body>
</html>

注：使用VS Code新建html文件，输入“html:5”，回车即可生成HTMl文件的框架。

a.js

1
2
3
4
function a()
{
    alert("a.js is loading");
}

b.js

1
2
3
4
5
a();
function b()
{
    alert("b.js is loading");
}

刷新界面，输出：“a.js is loading”，如下图所示。

成功

(2)被调用的JS文件后引用

例如：保持test.html文件不变：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <script src="a.js"></script>
    <script src="b.js"></script>
</body>
</html>

注：使用VS Code新建html文件，输入“html:5”，回车即可生成HTMl文件的框架。

a.js修改为：

1
2
3
4
5
b();
function a()
{
    alert("a.js is loading");
}

b.js修改为：

1
2
3
4
function b()
{
    alert("b.js is loading");
}

刷新界面，此时会报错b()函数未定义，如下图所示。

错误

因此，全局调用时，被调用的JS文件要先引用。

2、局部调用

所谓局部调用，就是在函数内部调用其他JS文件中封装的函数。

将test.html修改为：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <script src="a.js"></script>   
    <script src="b.js"></script>
    <input type="button" value="测试" onclick="a1()"/>
</body>
</html>

注：使用VS Code新建html文件，输入“html:5”，回车即可生成HTMl文件的框架。

a.js修改为：

1
2
3
4
5
6
7
8
9
10
function a1()
{
    alert("function a1 run success.");
    b();
}

function a2()
{
    alert("function a2 run success.");
}

b.js修改为：

1
2
3
4
5
function b()
{
    alert("function b run success.");
    a2();
}

点击“测试”按钮，此时会依次输出：“function a1 run success.”，“function b run success.”，“function a2 run success.”。

由此可见，局部调用时，引用不分先后，想在哪调就在哪调。

结论

若采用全局调用的方式，则被调用的JS文件要先引用；若采用局部调用的方式，则引用不分先后，想在哪调就在哪调。

阿汤笔迹微信公众平台

关注**“阿汤笔迹”** 微信公众号，获取更多学习笔记。
原文地址：http://www.atangbiji.com/2020/01/07/callFunctionBetweenDiffJS/
博主最新文章在个人博客 http://www.atangbiji.com/ 发布。