兩個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)。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了ES6 系列之 WeakMap的使用示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
bootstrap里bootstrap動態(tài)加載下拉框的實例講解
今天小編就為大家分享一篇bootstrap里bootstrap動態(tài)加載下拉框的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關(guān)于ES6入門教程之變量的解構(gòu)賦值的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用ES6具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
antd designable平臺的組件拖拽功能實現(xiàn)代碼
這篇文章主要介紹了antd designable平臺的組件拖拽功能實現(xiàn)代碼,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
js常用方法及字符串的常用判斷方法都是在工作中經(jīng)常用到的，在本文整理了一些，感興趣的朋友可以參考下2013-10-10
js 方法實現(xiàn)返回多個數(shù)據(jù)的代碼
2009-04-04
這篇文章主要介紹了如何使用javscript實現(xiàn)滾動條滾動到頁面底部自動加載增加頁面內(nèi)容,需要的朋友可以參考下2014-05-05
Bootstrap每天必學之折疊，本文向大家講解了Bootstrap折疊操作，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了微信小程序HTTP接口請求封裝的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
深入理解JavaScript系列（34）：設(shè)計模式之命令模式詳解
這篇文章主要介紹了深入理解JavaScript系列（34）：設(shè)計模式之命令模式詳解,命令模式(Command)的定義是：用于將一個請求封裝成一個對象,從而使你可用不同的請求對客戶進行參數(shù)化,對請求排隊或者記錄請求日志,以及執(zhí)行可撤銷的操作,需要的朋友可以參考下2015-03-03