眾多編程語言都有類似import、include、using等關鍵字實現引入其它源碼文件的功能,但是Javascript卻不沒有這樣的關鍵字,但是我們可以自己來實現import方法:
var JCore = {//構造核心對象 version:1.0, $import:function(importFile){ var file = importFile.toString(); var IsRelativePath = (file.indexOf("$")==0 ||file.indexOf("/")==-1);//相對路徑(相對於JCore) var path=file; if(IsRelativePath){//計算路徑,$開頭表示使用當前腳本路徑,/開頭則是完整路徑 if(file.indexOf("$")==0) file = file.substr(1); path = JCore.$dir+file; } var newElement=null,i=0; var ext = path.substr(path.lastIndexOf(".")+1); if(ext.toLowerCase()=="js"){ var scriptTags = document.getElementsByTagName("script"); for(var i=0;ilength;i++) { if(scriptTags[i].src && scriptTags[i].src.indexOf(path)!=-1) return; } newElement=document.createElement("script"); newElement.type="text/javascript"; newElement.src=path; } else if(ext.toLowerCase()=="css"){ var linkTags = document.getElementsByTagName("link"); for(var i=0;ilength;i++) { if(linkTags[i].href && linkTags[i].href.indexOf(path)!=-1) return; } newElement=document.createElement("link"); newElement.type="text/css"; newElement.rel="Stylesheet"; newElement.href=path; } else return; var head=document.getElementsByTagName("head")[0]; head.appendChild(newElement); }, $dir : function(){ var scriptTags = document.getElementsByTagName("script"); for(var i=0;ilength;i++) { if(scriptTags[i].src && scriptTags[i].src.match(/JCore/.js$/)) { path = scriptTags[i].src.replace(/JCore/.js$/,""); return path; } } return ""; }() }
其中$dir表示當前腳本文件的路徑,通過當前文件的文件名查找路徑;$import方法可以導入js腳本或css樣式表文件,如果以$開頭則使用當前腳本文件的路徑導入文件,如果以/開頭則表示是完整的腳本路徑!
$import("/Script/myfile.js"); $import("/Script/mystyle.css"); $import("$myfile.js");
為html動態添加script節點元素或style節點元素只是動態導入腳本的一種腳本,除此之外,還可以通過Ajax異步請求js腳本文件,然后通過eval方法把獲取的腳本文本轉換為腳本代碼實現動態導入功能!但是css樣式表文件無法通過這種方式導入!不過CSS樣式表本身即有@import關鍵字,可以實現文件引用包含!
轉載:http://www.cnblogs.com/chamblee/archive/2012/05/21/2512016.html