Javascript實現import動態導入文件方法


眾多編程語言都有類似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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM