實作JavaScript檔案同步與非同步載入的方法講解
- 巴扎黑原創
- 2017-08-21 09:38:152187瀏覽
本篇文章主要介紹了JavaScript檔案的同步和非同步載入的實作程式碼，具有一定的參考價值，有興趣的可以了解一下
對於JS檔案的引用，儘管目前有不少框架和工具（如webpack，commonjs，requiresjs等）都做了很好的處理。但拋開這些框架，了解原生的載入方式還是不無裨益。本文簡述一些js檔案的同步和非同步載入方式。
同步載入
可在html檔案裡以3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤插入，這是初學時最基本的方式。
準備兩個js檔案如下：
calc1.js
console.log('calc1 loading begin')
function add(...args) {
return args.reduce((currentTotal, i) => currentTotal + i, 0);
}
console.log('calc1 loading end')calc2.js
console.log('calc2 loading begin') console.log(add(1,2,3)) console.log('calc2 loading end')
calc2.js 是依賴calc1.js的。
html檔案如下：
<body> <script src="calc1.js"> </script> <script src="calc2.js"> </script> </body>
這種方式下，檔案載入是同步的。即calc1.js載入完成後，才載入calc2.js，所以保證了calc2.js總是能正確地呼叫calc1裡的add函數。在Chrome裡的調試結果如下：
但同步載入的缺點也明顯，如果有多個檔案的時候，全部載入時間會很長，而且阻塞使用者介面響應。
透過Script Element非同步載入
#非同步載入的優點是，能夠同時載入多個js文件，而且由於是異步，不會阻塞使用者介面，使用者體驗好。當然缺點是，不能保證有依賴關係的文件的載入順序。
html 程式碼
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var script1 = document.createElement('script');
script1.src='calc1.js';
script1.type='text/javascript';
var script2 = document.createElement('script');
script2.src='calc2.js';
script2.type='text/javascript';
document.getElementsByTagName('head')[0].appendChild(script1).appendChild(script2);
</script>
</head>在Chrome裡的偵錯結果有時候能正確的輸出如下：
但有時候由於clac1.js沒有被先加載，calc2.js執行時會報錯。
那我們就得需要解決載入順序問題，並保證calc1.js先載入。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function loadScript(file, callbackFn) {
var script = document.createElement('script');
script.src= file;
script.type='text/javascript';
// 监听onload时间，当前js文件加载完成后，再加载下一个
script.onload = callbackFn;
document.getElementsByTagName('head')[0].appendChild(script)
}
loadScript('calc1.js', function () {
loadScript('calc2.js');
} );
</script>
</head>這樣就能永遠輸出正確結果了。
透過 AJAX 載入JS檔案
<script>
function loadScript(file, callbackFn) {
var xhr = new XMLHttpRequest();
xhr.open('get', file, true);
// for IE
if (xhr.onreadystatechange) {
xhr.onreadystatechange = function () {
console.log(xhr.readyState, xhr.status);
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
insertScriptText(xhr.responseText);
if (callbackFn) {
callbackFn();
}
}
}
}
} else {
xhr.onload = function () {
insertScriptText(xhr.responseText);
if (callbackFn) {
callbackFn();
}
}
}
xhr.send(null);
}
function insertScriptText(scriptText) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = scriptText;
document.body.appendChild(script);
}
loadScript('calc1.js', function () {
loadScript('calc2.js');
});
</script>也能正確的輸出結果。
總結
如果如果是單一或少數js文件，可以在html body的最後插入script標籤，以同步方式載入。 Webpack其實也是把多個js檔案合併稱一個，然後在body插入script引用。
如果是多個js文件，建議非同步加載，以避免阻塞介面渲染，也縮短整體載入時間。本文介紹了script element和Ajax兩種方式，對於有依賴關係的檔案載入順序，也做了實例。
以上是實作JavaScript檔案同步與非同步載入的方法講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！