众多编程语言都有类似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