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