CSS 및 JS 파일을 동적으로 로드하기 위해 JavaScript를 구현하는 방법_javascript 기술

프로젝트에는 CSS 파일의 동적 로딩이 필요합니다. 이를 정리하고 JS를 객체에 동적으로 로딩하는 기능을 통합했습니다.

var dynamicLoading = {
  css: function(path){
 if(!path || path.length === 0){
  throw new Error('argument "path" is required !');
 }
 var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.href = path;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    head.appendChild(link);
  },
  js: function(path){
 if(!path || path.length === 0){
  throw new Error('argument "path" is required !');
 }
 var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    head.appendChild(script);
  }
}

객체에는 CSS 파일과 JS 파일을 각각 로드하는 데 사용되는 완전히 독립적인 두 가지 메서드가 포함되어 있습니다. 원리는 매우 간단합니다. 로드된 파일 유형에 따라 서로 다른 노드를 만든 다음 해당 속성을 추가하고 마지막으로 head 태그에 넣습니다. 테스트 결과 이 ​​방법은 모든 브라우저와 호환되고 안전하고 독성이 없으며 환경 친화적이며 웹 개발자가 작업하는 일반적인 코드입니다.
다음은 매우 간단한 호출 코드입니다.

//动态加载 CSS 文件
dynamicLoading.css("test.css");

//动态加载 JS 文件
dynamicLoading.js("test.js");

위 내용은 JavaScript에서 CSS와 JS 파일을 동적으로 로드하는 방법을 알려드린 내용이므로 학습에 도움이 되길 바랍니다.