调用其他js文件中的方法,js文件调用另一个js文件 |
您所在的位置:网站首页 › html怎么调用js文件 › 调用其他js文件中的方法,js文件调用另一个js文件 |
引言
当我们使用JavaScript写一个复杂界面的业务逻辑时,经常会把所有的函数写在同一个JS文件中。然而随着功能的不断增加,这个JS文件会变得又臭又长,所有的功能像一团乱麻一样交织在一起,自己都不想回头看Deepl降重。为了避免这种情况的发生,我们应该在开始编码的时候就对不同的功能进行封装(即:将不同的业务逻辑写在不同的JS文件中),进而降低代码的耦合性。 因此,就会出现不同JS文件之间函数的相互调用问题。 调用方法方法很简单:我们只需将不同的JS文件在同一个html文件中引用,即可在任一JS文件中调用其他JS文件中的封装的函数了。 根据调用函数位置的不同,我们可以将函数调用方式分为全局调用和局部调用两类。 需要注意的是:不同的调用方式,细节上稍有区别。 1、全局调用所谓全局调用,就是在函数外部调用其他JS文件中封装的函数。 (1)被调用的JS文件先引用例如:test.html文件 test < src="a.js"> < src="b.js">注:使用VS Code新建html文件,输入“html:5”,回车即可生成HTMl文件的框架。 a.js function a() { alert("a.js is loading"); }b.js a(); function b() { alert("b.js is loading"); }刷新界面,输出:“a.js is loading”,如下图所示。 例如:保持test.html文件不变: test < src="a.js"> < src="b.js">注:使用VS Code新建html文件,输入“html:5”,回车即可生成HTMl文件的框架。 a.js修改为: b(); function a() { alert("a.js is loading"); }b.js修改为: function b() { alert("b.js is loading"); }刷新界面,此时会报错b()函数未定义,如下图所示。 因此,全局调用时,被调用的JS文件要先引用。 2、局部调用所谓局部调用,就是在函数内部调用其他JS文件中封装的函数。 将test.html修改为: test < src="a.js"> < src="b.js">注:使用VS Code新建html文件,输入“html:5”,回车即可生成HTMl文件的框架。 a.js修改为: function a1() { alert("function a1 run success."); b(); } function a2() { alert("function a2 run success."); }b.js修改为: 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/ 发布。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |