JS實(shí)現(xiàn)完美include加載功能代碼
2024-09-06 12:41:25
供稿：網(wǎng)友
js為什么需要include？讓我們想想這樣1個(gè)場(chǎng)景，a.js 需要用到1個(gè)公用的common.js，當(dāng)然你可以在用到a.js的頁(yè)面使用<script src="common.js">，但假設(shè)有5個(gè)頁(yè)面用到了a.js，你是不是要寫5遍<script。而且要是以后a.js 又需要引用common2.js，你是不是又的修改5個(gè)頁(yè)面了？
已有js include的一些問(wèn)題
在寫這個(gè)之前在網(wǎng)上搜索了些資料，發(fā)現(xiàn)以前寫的include都存在2個(gè)問(wèn)題，這也是include需要解決的比較重要的2個(gè)問(wèn)題。
1、相對(duì)路徑的問(wèn)題： 在a.js中使用include("../js/common.js"); include 函數(shù)中肯定是使用相對(duì)路徑，是相對(duì)a.js的路徑。而a.js在html中使用<script>嵌入有可能是相對(duì)路徑，有可能是絕對(duì)路徑。 include函數(shù)如何才能真正確定common.js的絕對(duì)路徑，或者是相對(duì)html的相對(duì)路徑。網(wǎng)上一些為了解決這個(gè)問(wèn)題，還需要加一些js變量，不方便。
2、引用的問(wèn)題。 網(wǎng)上include函數(shù)的實(shí)現(xiàn)幾乎都是使用下面2種方式插入common.js
document.write("<script src='" + .. + "></script>")
或者
var s = document.createElement("script");
s.src = ...;
head.insertAfter(s,...);
document.write 輸出的腳本會(huì)在a.js后面加載，而createElement("script")創(chuàng)建的腳本是非阻塞加載。 所以如果在common.js加載完畢之前，a.js中調(diào)用了common.js的函數(shù)就會(huì)報(bào)錯(cuò)。
實(shí)現(xiàn)
解決上面2個(gè)問(wèn)題，就可以實(shí)現(xiàn)js include。
第1個(gè)問(wèn)題，我的方法是先獲取到a.js在html中的絕對(duì)路徑(如果是相對(duì)路徑，就轉(zhuǎn)為絕對(duì)路徑)，然后再把common.js的路徑轉(zhuǎn)為絕對(duì)路徑。
第2個(gè)問(wèn)題，采用同步的ajax來(lái)請(qǐng)求common.js，這樣就不會(huì)出現(xiàn)引用問(wèn)題。
實(shí)現(xiàn)代碼如下：
代碼如下:
// 根據(jù)相對(duì)路徑獲取絕對(duì)路徑
function getPath(relativePath,absolutePath){
var reg = new RegExp("http://.//./","g");
var uplayCount = 0; // 相對(duì)路徑中返回上層的次數(shù)。
var m = relativePath.match(reg);
if(m) uplayCount = m.length;
var lastIndex = absolutePath.length-1;
for(var i=0;i<=uplayCount;i++){
lastIndex = absolutePath.lastIndexOf("/",lastIndex);
}
return absolutePath.substr(0,lastIndex+1) + relativePath.replace(reg,"");
}
function include(jssrc){
// 先獲取當(dāng)前a.js的src。a.js中調(diào)用include,直接獲取最后1個(gè)script標(biāo)簽就是a.js的引用。
var scripts = document.getElementsByTagName("script");
var lastScript = scripts[scripts.length-1];
var src = lastScript.src;
if(src.indexOf("http://")!=0 && src.indexOf("/") !=0){
// a.js使用相對(duì)路徑,先替換成絕對(duì)路徑
var url = location.href;
var index = url.indexOf("?");
if(index != -1){
url = url.substring(0, index-1);
}
src = getPath(src,url);
}
var jssrcs = jssrc.split("|"); // 可以include多個(gè)js，用|隔開(kāi)
