快捷導(dǎo)航

JS實(shí)現(xiàn)完美include加載功能代碼

更新時(shí)間：2010年10月20日 20:39:27 作者：

在寫這個(gè)之前在網(wǎng)上搜索了些資料，發(fā)現(xiàn)以前寫的include都存在2個(gè)問題，這也是include需要解決的比較重要的2個(gè)問題。

js為什么需要include？讓我們想想這樣1個(gè)場景，a.js 需要用到1個(gè)公用的common.js，當(dāng)然你可以在用到a.js的頁面使用<script src="common.js">，但假設(shè)有5個(gè)頁面用到了a.js，你是不是要寫5遍<script。而且要是以后a.js 又需要引用common2.js，你是不是又的修改5個(gè)頁面了？

已有js include的一些問題
　　在寫這個(gè)之前在網(wǎng)上搜索了些資料，發(fā)現(xiàn)以前寫的include都存在2個(gè)問題，這也是include需要解決的比較重要的2個(gè)問題。
　　1、相對(duì)路徑的問題：在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è)問題，還需要加一些js變量，不方便。
　　2、引用的問題。網(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è)問題，就可以實(shí)現(xiàn)js include。
　　第1個(gè)問題，我的方法是先獲取到a.js在html中的絕對(duì)路徑(如果是相對(duì)路徑，就轉(zhuǎn)為絕對(duì)路徑)，然后再把common.js的路徑轉(zhuǎn)為絕對(duì)路徑。
　　第2個(gè)問題，采用同步的ajax來請(qǐng)求common.js，這樣就不會(huì)出現(xiàn)引用問題。

　　實(shí)現(xiàn)代碼如下：

復(fù)制代碼代碼如下:

 
// 根據(jù)相對(duì)路徑獲取絕對(duì)路徑 
function getPath(relativePath,absolutePath){ 
var reg = new RegExp("\\.\\./","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，用|隔開 
for(var i=0;i<jssrcs.length;i++){ 
// 使用juqery的同步ajax加載js. 
// 使用document.write 動(dòng)態(tài)添加的js會(huì)在當(dāng)前js的后面，可能會(huì)有js引用問題 
// 動(dòng)態(tài)創(chuàng)建script腳本，是非阻塞下載，也會(huì)出現(xiàn)引用問題 
$.ajax({type:'GET',url:getPath(jssrc,src),async:false,dataType:'script'}); 
} 
} 

在a.js中直接使用 include("../js/common.js");

多請(qǐng)求的問題
　　使用上面的include看上去挺爽的，不過卻帶來另外1個(gè)嚴(yán)重的問題，就是多發(fā)送了1個(gè)ajax的請(qǐng)求。
　　我們常常為了WEB性能，而合并js，減少請(qǐng)求。但使用include后卻偏偏多了請(qǐng)求。如果這個(gè)問題不解決，相信很多人都不會(huì)在正式產(chǎn)品中使用include的了，除非是局域網(wǎng)產(chǎn)品。

　　如何解決這個(gè)多請(qǐng)求的問題，我也思考很久，最后覺的單單使用客戶端js是沒辦法解決了。所以就想到了使用服務(wù)端代碼來解決
　　還記的我之前有文章介紹 "js、css的合并、壓縮、緩存管理"的時(shí)候，就通過服務(wù)器端代碼在程序啟動(dòng)時(shí)候去合并js。

　　所以我把include多請(qǐng)求的解決方案也加到里面去。就是在程序啟動(dòng)的時(shí)候去查找所有的js，發(fā)現(xiàn)有使用include的就把include中common.js的源代碼替換該include函數(shù)。這樣a.js中在運(yùn)行的時(shí)候就沒有include函數(shù)，而是真真包含了common.js的內(nèi)容的js文件

后語
　　丫的。說到最后，怎么又把所有的include都替換掉了，哪之前說的那么多不白說了。

　　個(gè)人覺得，每個(gè)產(chǎn)品都應(yīng)該要區(qū)分開發(fā)環(huán)境和產(chǎn)品環(huán)境(一般通過配置文件進(jìn)行區(qū)分)，在開發(fā)環(huán)境應(yīng)該以開發(fā)效率為首要，而產(chǎn)品環(huán)境則以性能為首。所以這里的inlcude就應(yīng)該要區(qū)分對(duì)待，在開發(fā)環(huán)境中使用js include來提高開發(fā)和維護(hù)效率，而在產(chǎn)品環(huán)境中則自動(dòng)把所有include替換成真真的js文件的內(nèi)容。

　　都說完了，歡迎大家拍磚討論。
[作者]：BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/

您可能感興趣的文章: