Javascript import 동적 가 져 오기 파일 방법 구현

많은 프로 그래 밍 언어 는 import, include, using 등 키워드 와 유사 하여 다른 소스 파일 을 도입 하 는 기능 을 가지 고 있 지만 자바 script 에는 이러한 키워드 가 없 지 않 습 니 다. 그러나 우 리 는 스스로 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 키워드 가 있어 파일 참조 포함 을 실현 할 수 있 습 니 다!