兩個JS之間的函數(shù)互相調(diào)用方式
兩個JS之間的函數(shù)互相調(diào)用
這個問題是我在工作中用到的一個方法 因為要做封裝
所以想到能不能在一個js中引用另一個js中的function
這樣的話能大大的減少代碼量
話不多說 先上代碼
首先要在html頁面引入兩個js文件
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<script src="1.js"></script>
<script src="2.js"></script>
<body>
</body>
</html>1.js
function a(){
alert(1);
}2.js
a();
這樣2.js就可以直接調(diào)用1.js中的a函數(shù)了
當然這樣只是很簡單的方法 下面寫一個閉包中的方法(當然也很簡單啦~~)
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<script src="1.js"></script>
<script src="2.js"></script>
<body>
</body>
</html>1.js
var dianji;
(function(){
dianji = {
a:function(){
alert(1);
}
}
})()這里的1.js是一個對象函數(shù)而且還是閉包的形式，所以我們要把dianji這個變量提升到全局。這樣在2.js中才能調(diào)用這個a函數(shù) 不然回報變量未定義的錯誤。
想要js之間互相調(diào)用function，那么函數(shù)就必須是全局的
2.js
dianji.a();
不同JS文件之間函數(shù)的相互調(diào)用
當我們使用JavaScript寫一個復雜界面的業(yè)務邏輯時，經(jīng)常會把所有的函數(shù)寫在同一個JS文件中。然而隨著功能的不斷增加，這個JS文件會變得又臭又長，所有的功能像一團亂麻一樣交織在一起，自己都不想回頭看。為了避免這種情況的發(fā)生，我們應該在開始編碼的時候就對不同的功能進行封裝（即：將不同的業(yè)務邏輯寫在不同的JS文件中），進而降低代碼的耦合性。
因此，就會出現(xiàn)不同JS文件之間函數(shù)的相互調(diào)用問題。
調(diào)用方法方法很簡單：我們只需將不同的JS文件在同一個html文件中引用，即可在任一JS文件中調(diào)用其他JS文件中的封裝的函數(shù)了。
根據(jù)調(diào)用函數(shù)位置的不同，我們可以將函數(shù)調(diào)用方式分為全局調(diào)用和局部調(diào)用兩類。
需要注意的是：不同的調(diào)用方式，細節(jié)上稍有區(qū)別。
1、全局調(diào)用
所謂全局調(diào)用，就是在函數(shù)外部調(diào)用其他JS文件中封裝的函數(shù)。
(1)被調(diào)用的JS文件先引用
例如：test.html文件
<!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
function a()
{
alert("a.js is loading");
}
- b.js
a();
function b()
{
alert("b.js is loading");
}
刷新界面，輸出：“a.js is loading”，如下圖所示。
(2)被調(diào)用的JS文件后引用
例如：保持test.html文件不變：
<!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修改為：
b();
function a()
{
alert("a.js is loading");
}
- b.js修改為：
function b()
{
alert("b.js is loading");
}
刷新界面，此時會報錯b()函數(shù)未定義，如下圖所示。
因此，全局調(diào)用時，被調(diào)用的JS文件要先引用。
2、局部調(diào)用
所謂局部調(diào)用，就是在函數(shù)內(nèi)部調(diào)用其他JS文件中封裝的函數(shù)。
將test.html修改為：
<!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修改為：
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.”。
由此可見，局部調(diào)用時，引用不分先后，想在哪調(diào)就在哪調(diào)。
心得
若采用全局調(diào)用的方式，則被調(diào)用的JS文件要先引用；若采用局部調(diào)用的方式，則引用不分先后，想在哪調(diào)就在哪調(diào)。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
javascript中的new是一個語法糖,new的過程實際上是創(chuàng)建一個新對象,把新象的原型設置為構造器函數(shù)的原型,這篇文章主要給大家介紹了關于JavaScript中new操作符原理的相關資料,需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細介紹了JS實現(xiàn)密碼框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點擊導航條切換頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
weui中的picker使用js進行動態(tài)綁定數(shù)據(jù)問題
這篇文章主要介紹了weui中的picker使用js進行動態(tài)綁定數(shù)據(jù)問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
JS如何設置cookie有效期為當天24點并彈出歡迎登陸界面
這篇文章主要介紹了JS如何設置cookie有效期為當天24點并彈出歡迎登陸界面的代碼，代碼比較簡單，好理解，需要的朋友可以參考下2016-08-08
JS獲取字符串型數(shù)組下標的數(shù)組長度的代碼
JS獲取字符串型數(shù)組下標的數(shù)組長度的代碼，需要的朋友可以參考下2013-03-03
這篇文章主要給大家介紹了關于ES6的異步終極解決方案，文中通過示例代碼介紹的非常詳細，對大家學習或者使用ES6具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼
本文主要介紹了微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
?樹形圖可視化廣泛用于分層數(shù)據(jù)分析。如果你沒有經(jīng)驗還想創(chuàng)建一個，那將會有些復雜。下面是一個詳細教程，教你如何使用JavaScript創(chuàng)建交互式樹形圖2022-06-06
我們可能很少在編程中用位運算,如果沒深入學習,可能也很難理解,下面這篇文章主要給大家介紹了關于js位運算在實際中使用的相關資料,需要的朋友可以參考下2022-03-03