구성 files_javascript 기술에 따라 js 종속 모듈 로드

요구사항:

아래 구성 파일에 따르면

코드 복사 코드는 다음과 같습니다.

모듈=[
{'이름':'jquery','src':'/js/lib/jquery-1.8.3.js'},
{'name':'swfobject','src':'/js/utils/swfobject.js'},
{'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
{'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
{'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
{'name':'register','src':'/js/page/reg.js','require':['jqform']},
{'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
{'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','uploadify']}
]

함수 작성

def getfiles(이름)

특정 이름으로 지정된 페이지, 로드할 js 파일 목록, 종속성이 있는 파일을 먼저 로드하려면 돌아가기

스낵 솔루션

이 질문은 언뜻 보면 간단해 보이지만 그렇지 않습니다.

종속 모듈의 로딩 타이밍에 어려움이 있습니다. A-B&C, B-C, 모듈 A는 모듈 B와 모듈 C에 종속되고, 모듈 B는 모듈 C에 종속되는 종속 관계가 있는 경우 C를 두 번 로드할 수 없습니다.

샤오차이가 제시한 해결책은 그냥 아이디어일 뿐입니다. 샤오차이는 이진 트리 같은 알고리즘으로 해결할 수 있을 거라 생각하지만, 샤오차이는 방법을 모릅니다~~~

이 알고리즘은 순환 종속성을 고려하지 않습니다.

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/**
* 순환 종속성을 고려하지 않습니다
* @type {함수}
​*/
var loadModule = (함수(){
/**
* 비즈니스 로직 캡슐화
* @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, 로드: 로드, findModule: findModule}}
​​*/
var 논리 = {
체인헤드: {}, // 링크
         chainCurrent: {}, //연결된 목록의 현재 노드
           srcCache: {},         //모듈 src 캐시
           /**
* 외부 인터페이스
* @param 모듈 구성 객체
* @param name 모듈 이름
* @returns {Array} 로드된 순서대로 정렬된 종속 모듈 목록
                       */
            주요: 기능(모듈, 이름){
            var nameArray = [], //모듈 이름 목록
Srcarray = [], // 의존 모듈 목록
Namestr = "", // 모듈 이름 문자열 집합
~ > 🎜> 나는 = 0;
//모든 종속 모듈을 대략적으로 로드
This.load(모듈, 이름)
//모듈 이름 문자열 세트 구성
This.chainCurrent = this.chainHead;
             동안(this.chainCurrent.next){
nameArray.push(this.chainCurrent.name);
This.chainCurrent = this.chainCurrent.next;
            }
                  nameStr = nameArray.join(" ") " " // 표준 통일, 끝에 공백 추가
                            // 종속 모듈 중복 제거
​​​​​​while(repeatRegex.exec(nameStr)){
nameStr = nameStr.replace(repeatRegex, function(g0, g1, g2){
                           return g0.substring(0, (g0.length - g2.length));
                  });
            }
                 nameStr = nameStr.substring(0, (nameStr.length - 1)) //추가 공백 제거
//종속 모듈 이름을 모듈 경로로 변환
nameArray = nameStr.split(" ");
for(i = 0; i                   srcArray.push(this.srcCache[nameArray[i]]);
            }
                 srcArray를 반환합니다.
         },
          /**
* 모듈을 재귀적으로 로드
* @param 모듈 구성 객체
* @param name 모듈 이름
           */
로드: 함수(모듈, 이름){
            var 노드 = {},
                       모듈 = this.findModule.call(모듈, "이름", 이름),
나는 = 0;
//모듈이 존재하는지 확인
If(!모듈){
throw Error("종속 모듈 " name "을 찾을 수 없습니다.");
            }
//모듈 종속성 목록 구성
                 node.name = 이름;
// node.src = module.src;
This.srcCache[이름] = module.src;
Node.next = this.chainHead;
This.chainHead = 노드;
//재귀적 의존성
If(module.require && module.require.length){
for(i = 0;i This.load(modules, module.require[i]);
                 }
            }
         },
           /**
* 지정된 속성명과 속성값을 기준으로 모듈을 검색합니다
* @param name 속성 이름
* @param value 속성값
* @returns {*}
                       */
           findModule: 함수(이름, 값){
            var 배열 = 이,
항목 = {},
나는 = 0;
//트래버스 모듈
for(i = 0; i 항목 = 배열[i];
//지정된 모듈을 가져옵니다
If(항목 && 항목[이름] === 값){
                            반품 상품;
                 }
            }
//찾을 수 없으며 null을 반환합니다
              null을 반환합니다.
         }
};
//외부 인터페이스 노출
반환함수(){
             return logics.main.apply(논리, 인수);
};
}());
 /**
  * 테스트 사용 사례
  * @type {*[]}
 */
 var 모듈=[
     {'이름':'jquery','src':'/js/lib/jquery-1.8.3.js'},
     {'name':'swfobject','src':'/js/utils/swfobject.js'},
     {'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
     {'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
     {'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
     {'name':'register','src':'/js/page/reg.js','require':['jqform']},
     {'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
     {'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','login','uploadify']}
 ];
 console.log(loadModule(modules, "업로드"));