Javascript 동적 로드 스 크 립 트 와 스타일

하나.   동적 로드 js
동적 로드 js 의 필요 성:
1.    프로젝트 가 커 질 수록 대량으로 도 입 된 js 는 성능 문 제 를 초래 할 수 있다.
2.   실제 항목 을 만 날 수 있 습 니 다: 한 js 파일 에서 다른 js 파일 의 함 수 를 참조 해 야 하지만, 다른 함 수 는 페이지 에서 이 < script > 탭 을 통 해 불 러 올 수 없습니다.
인터넷 에서 몇 편의 블 로 그 를 보 았 는데 대략 세 가지 방식 이 있다.

1、  document.write

<script language="javascript">
    document.write("<script src='jiaxiangjun.js'></script>");
</script>

2、      script src  

<script src='' id="jxj"></script>
<script language="javascript">
    jxj.src="jiaxiangjun.js"
</script>

3、    script  

<script>
    var headTag = document.getElementsByTagName('HEAD').item(0);
    var myScript= document.createElement("script");
    myScript.type = "text/javascript";
    myScript.src="jiaxiangjun.js";
    headTag.appendChild(myScript);
</script>

기본 적 인 원 리 는 dom 동 태 를 이용 하여 js 를 목적 파일 에 도입 하 는 것 이다.
또 하나의 방법 은 공용 으로 script 라벨 을 삽입 하 는 방법 을 제공 하고 일반 js 코드 를 매개 변수 로 받 아들 이면 js 를 동적 으로 실행 할 수 있 는 효 과 를 얻 을 수 있다.

var myscript = document.createElement('script');
   myscript.type = 'text/javascript';
    var text =document.createTextNode("alert('jxj')");    //   script    ;IE   ;
   myscript.appendChild(text);
   document.getElementsByTagName('head')[0].appendChild(myscript);
 
    // IE     script     ,        ;
    //     ,    text     ;
    functionloadScriptString(code){
         varscript = document.createElement("script");
        script.type = "text/javascript";
        try
{
        // IE     script     ,        ;  ;
          script.appendChild(document.createTextNode(code));// W3C  ;
        }
catch(ex)
{
           script.text = code;//
         }
       document.body.appendChild(script);
     }
    //   ;
    loadScriptString("function sayHi(){alert('hi')}");

둘째. 동적 스타일
 일부 프로젝트 가 제시 한 특수 한 인 터 페 이 스 를 위해 우 리 는 몇 가지 피부 스타일 의 전환 을 실현 해 야 한다. 예 를 들 어 내 가 지금 하고 있 는 네트워크 관리 시스템, 플랫폼 두 가지 스타일, 구체 적 인 제품 과 자신의 스타일 등 이다.헤헤.이러한 기능 을 실현 하기 위해 서 우 리 는 동적 로드 스타일 을 실현 해 야 한다.
흔히 볼 수 있 는 스타일 은 두 가지 방식 으로 불 러 옵 니 다. 하 나 는 < link > 태그 이 고 하 나 는 < style > 태그 입 니 다.
1. 동적 링크 파일 도입

var flag =true;
      if(flag){
         loadStyles('basic.css');//       ,  css  ;
      }
      functionloadStyles(url){
          varlink = document.createElement('link');
         link.rel = 'stylesheet';
         link.type = 'text/css';
        link.href = url;
        document.getElementsByTagName('head')[0].appendChild(link);
     }

2. 동적 실행 스타일 코드     

var flag =true;
      if(flag)
      {
          varstyle = docuemnt.createElement('style');
         style.type = 'text/css';
         document.getElementsByTagName('head')[0].appendChild(style);
          insertRule(document.styleSheets[0],'#box','background:red',0);
      }
      
     functioninsertRule(sheet,selectorText,cssText,position)
     {
        if(sheet.insertRule) //     IE;
         {
            sheet.insertRule(selectorText+"{"+cssText+"}",position);
        
         }
         elseif(sheet.addRule) //    IE;
         {
            sheet.addRule(selectorText,cssText,position);
         }

 

     style2
      functionloadStyleString(css)
      {
        varstyle = document.createElement("style");
         style.type = "text/css";
          try
          {
          // IE   ;    <style>       ;
             style.appendChild(document.createTextNode(css));
          }
         catch(ex)
          {
          //   ,     StyleSheet  ,       cssText  ,    CSS  ;
            style.styleSheet.cssText = css;
         }
         varhead = document.getElementsByTagName("head")[0];
        head.appendChild(style);
     }
 
    loadStyleString("body {background-color:red}");

 
참고 블 로그:  http://www.cnblogs.com/yizihan/p/4386431.html?utm_source=tuicool
            http://www.cnblogs.com/lkf18/archive/2012/05/24/2515935.html
            http://www.iteye.com/topic/147810
            http://www.cnblogs.com/feng_013/articles/1807520.html