不使用script導入js文件的幾種方法
更新時間：2016年10月27日 22:18:04 投稿：mdxy-dxy
這篇文章主要介紹了不使用script導入js文件的方法,需要的朋友可以參考下
方法一:原生
adc.js內容如下：
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事件加載完響應，防止未加載完就調用出錯
console.log(hello);
})
setTimeout(function(){//或者使用定時器保證其載入完后調用（不安全，不如監(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"');//這個函數是在new.js里面的，當點擊click后運行這個函數
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
方法三：require.js
require.js分享2.1.1版本，注意是針對大項目使用，一邊情況下使用jquery即可。
index.html
<!--設置入口文件main 可以省略js-->
<script data-main="main" src="require.js"></script>
main.js
console.log("你好世界");
require(["js1","js2","js3"],function () {
// 是異步加載導入。js后綴可以省略
console.log("你們加載完了么？");
var total = num1+num2+num3;
console.log(total);
hello1();
hello2();
hello3();
})
使用requireJs可以很方便的導入js文件，但是要注意js文件中變量名方法名沖突的問題。 產生原因：瀏覽器js文件共用全局作用域，作用域中變量名方法名可能被覆蓋
相關文章
如何用js控制frame的隱藏或顯示的解決辦法，需要的朋友可以參考一下2013-03-03
JavaScript方法_動力節(jié)點Java學院整理
這篇文章主要介紹了JavaScript方法，詳細的介紹了JavaScript幾種函數定義方式及使用方法,感興趣的小伙伴們可以參考一下2017-06-06
JavaScript中this的用法及this在不同應用場景的作用解析
由于其運行期綁定的特性，JavaScript 中的 this 含義要豐富得多，它可以是全局對象、當前對象或者任意對象，這完全取決于函數的調用方式，這篇文章主要給大家介紹了JavaScript中this的用法及this在不同應用場景的作用解析，一起看看吧2017-04-04
小程序相信大家應該都很熟悉了,對于小程序的整個運營的方法,很多運營都比較關注,今天希望通過一個思維導圖,這篇文章主要給大家介紹了關于小程序中如何繪制思維導圖的相關資料,需要的朋友可以參考下2021-10-10
JavaScript類型系統(tǒng)之基本數據類型與包裝類型
javascript的數據類型可以分為兩種：原始類型和引用類型，在此文給大家提到。本文主要給大家介紹javascript類型系統(tǒng)之基本數據類型與包裝類型，涉及到js 基本類型 包裝類相關知識，本文介紹的詳細，具有參考借鑒價值，對本文感興趣的朋友一起學習吧2016-01-01
本文主要介紹了Webpack提取頁面公共資源的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
下面小編就為大家?guī)硪黄畔L動效果的實例講解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
iframe的onreadystatechange事件在firefox下的使用
firefox不支持iframe的onreadystatechange事件，不過有個方法可以實現同等的效果,需要的朋友可以參考下2014-04-04
js和jq的event對象大同小異，本文簡單對比下它們的'click'事件下的不同和應用，給有需要的小伙伴參考下2014-11-11
本文介紹了如何通過js實現表單提交后不重新刷新當前頁面的方法實例.既提交了FORM保存了數據,頁面也不會跳轉，很實用。需要的朋友可以參考下2016-11-11