Javascript实现import动态导入文件方法

标签： importjavascript脚本pathstylesheetfile

2009-05-13 21:03 11555人阅读 评论(1) 收藏 举报

 分类：

 

UI技术（10） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

      众多编程语言都有类似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关键字，可以实现文件引用包含！