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