随笔-Javascript实现import动态导入文件方法及其切换

//============================动态导入js或css文件===================================
    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;i<scriptTags.length;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;i<linkTags.length;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;i<scriptTags.length;i++) {   if(scriptTags[i].src && scriptTags[i].src.match(/JCore/.js$/)) {   path = scriptTags[i].src.replace(/JCore/.js$/,"");  return path;   } }
    return ""; }()
    }

//=============================动态导入js或css文件结束=============================

//=============================动态生成切换样式及脚本控件=============================
function dynamicChangeJsAndCss()
{
  //-------------------动态创建漂浮层-------------
   var div = document.createElement("dynamicChangeJsAndCss");//添加新的div 
    div.className = "dynamicChangeJsAndCss";
    div.id = 'dynamicChangeJsAndCss';
    div.style.position="absolute";
    div.style.left="80%";
    div.style.top="10%";
   
    window.document.body.appendChild(div);
   
  //div中的子控件
  var div_Code="";
  div_Code+="<table style='width:100%;height:100%; border='0' cellpadding='0' cellspacing='0'><tr><td><div id='changeJsAddCss' class='changeJsAddCss' onclick='Btn_changeJsAddCssClick()' >自定义样式</div></td></tr><tr><td><div id='changeJsAddCssExample'  style='height:50px;width:200px;'></div></td></tr></table>";
  div.innerHTML=div_Code;
}
function Btn_changeJsAddCssClick()
{
  if($("changeJsAddCssExample").innerHTML ==null || $("changeJsAddCssExample").innerHTML =="")
  {
      var div_Code="";
      div_Code+="<table style='width:100%;height:100%;background-Color:white; ' border='0' cellpadding='0' cellspacing='0'><tr><td><div class='changeJsAddCssExample'  onclick='ChangeSelectCss(/"style_Ft09_Login.css/");' >默认样式</div></td></tr>";
      div_Code+="<tr><td><div class='changeJsAddCssExample' onclick='ChangeSelectCss(/"changeStyle_ceshi.css/")' >底比斯之水</div></td></tr></table>";
      $("changeJsAddCssExample").innerHTML=div_Code;
  }
  else
  {
    $("changeJsAddCssExample").innerHTML="";
  }
 
}
//切换样式,当选中一种样式时,选中的要添加，没有选中的如果存在则要删除
function ChangeSelectCss(CssName)
{
 var linkTags = document.getElementsByTagName("link");
 //这里找到所有切换的样式文件，如果这些样式文件已添加到页面中,则删除该导入样式
 for(var i=0;i<linkTags.length;i++)
 {  
  if(linkTags[i].href && linkTags[i].href.indexOf("changeStyle")!=-1)
  {
    var head=document.getElementsByTagName("head")[0]; 
    head.removeChild(linkTags[i]);
  }
 }   
 JCore.$import("$../../resources/CommonCss/"+CssName);
 
}

//=============================动态生成切换样式及脚本控件结束===============================