不使用script導(dǎo)入js文件的幾種方法
方法一:原生
adc.js內(nèi)容如下:
var hello = "H9";
html.html
<script> var s = document.createElement("script"); s.src = "abc.js"; document.head.appendChild(s); s.addEventListener("load",function(){ // 等待s的load事件加載完響應(yīng),防止未加載完就調(diào)用出錯(cuò) console.log(hello); }) setTimeout(function(){//或者使用定時(shí)器保證其載入完后調(diào)用(不安全,不如監(jiān)聽事件好) console.log(hello); },1000); // $.getScript("abc.js"); </script>
方法二:jquery.js
$.getScript("abc.js",function(){ alert("heheheh"); console.log(hello); });
<script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(function() { $('#loadButton').click(function(){ $.getScript('new.js',function(){ newFun('"Checking new script"');//這個(gè)函數(shù)是在new.js里面的,當(dāng)點(diǎn)擊click后運(yùn)行這個(gè)函數(shù) }); }); }); </script> </head> <body> <button type="button" id="loadButton">Load</button>
方法三:require.js
require.js分享2.1.1版本,注意是針對(duì)大項(xiàng)目使用,一邊情況下使用jquery即可。
index.html
<!--設(shè)置入口文件main 可以省略js-->
<script data-main="main" src="require.js"></script>
main.js
console.log("你好世界"); require(["js1","js2","js3"],function () { // 是異步加載導(dǎo)入。js后綴可以省略 console.log("你們加載完了么?"); var total = num1+num2+num3; console.log(total); hello1(); hello2(); hello3(); })
使用requireJs可以很方便的導(dǎo)入js文件,但是要注意js文件中變量名方法名沖突的問題。 產(chǎn)生原因:瀏覽器js文件共用全局作用域,作用域中變量名方法名可能被覆蓋
- 學(xué)習(xí)javascript文件加載優(yōu)化
- 理解Javascript文件動(dòng)態(tài)加載
- JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡(jiǎn)單方式
- JS加載器如何動(dòng)態(tài)加載外部js文件
- 動(dòng)態(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼
- 動(dòng)態(tài)加載js、css的實(shí)例代碼
- 動(dòng)態(tài)加載js文件簡(jiǎn)單示例
- jquery及js實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法
- 如何動(dòng)態(tài)加載外部Javascript文件
- js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法實(shí)例匯總
- 動(dòng)態(tài)加載JavaScript文件的3種方式
相關(guān)文章
JavaScript方法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript方法,詳細(xì)的介紹了JavaScript幾種函數(shù)定義方式及使用方法,感興趣的小伙伴們可以參考一下2017-06-06JavaScript中this的用法及this在不同應(yīng)用場(chǎng)景的作用解析
由于其運(yùn)行期綁定的特性,JavaScript 中的 this 含義要豐富得多,它可以是全局對(duì)象、當(dāng)前對(duì)象或者任意對(duì)象,這完全取決于函數(shù)的調(diào)用方式,這篇文章主要給大家介紹了JavaScript中this的用法及this在不同應(yīng)用場(chǎng)景的作用解析,一起看看吧2017-04-04JavaScript類型系統(tǒng)之基本數(shù)據(jù)類型與包裝類型
javascript的數(shù)據(jù)類型可以分為兩種:原始類型和引用類型,在此文給大家提到。本文主要給大家介紹javascript類型系統(tǒng)之基本數(shù)據(jù)類型與包裝類型,涉及到j(luò)s 基本類型 包裝類相關(guān)知識(shí),本文介紹的詳細(xì),具有參考借鑒價(jià)值,對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2016-01-01iframe的onreadystatechange事件在firefox下的使用
firefox不支持iframe的onreadystatechange事件,不過有個(gè)方法可以實(shí)現(xiàn)同等的效果,需要的朋友可以參考下2014-04-04js實(shí)現(xiàn)表單提交后不重新刷新當(dāng)前頁面
本文介紹了如何通過js實(shí)現(xiàn)表單提交后不重新刷新當(dāng)前頁面的方法實(shí)例.既提交了FORM保存了數(shù)據(jù),頁面也不會(huì)跳轉(zhuǎn),很實(shí)用。需要的朋友可以參考下2016-11-11