2012-08-25 3 views
1

동 기적으로로드하는 단일 파일로 최적화 된 requirejs 프로젝트가 있습니다. 코드는 예상대로로드되지만 모듈은 여전히 ​​비동기 적으로로드됩니다 (로드 프로세스가 끝나기 전까지는 사용할 수 없습니다). 일부 레거시 코드에서 문제가 발생합니다.동 기적으로 requirejs 사용

아래 코드를 입력하면 legacy_code.js이로드되기 전에로드 직후 main-build의 메소드를 사용할 수있는 방법이 있습니까? 최악의 최악에 오면

<script type="text/javascript" src="/scripts/vendor/require.js"></script> 
<script type="text/javascript" src="/scripts/main-build.js"></script> 

<!-- At this point, the code is set up and it will be invoked later --> 
<!-- ...but the next file requires to access methods in the modules.--> 

<script type="text/javascript" src="/script/legacy_code.js"></script> 

, 나는 define()require() 내 자신의 버전 (또한 할 필요가있는 모든 때문에 대역폭을 많이 확보 할 카탈로그하고 모듈을 호출) 쓸 수 있지만 이 일을 할 수있는 기본 방법이 있기를 바란다.

답변

1

여기에 내 질문에 답하십시오. 오래 동안 둘러 본 후에는 Requirejs 코드를 동 기적으로로드하거나로드 직후에 모듈을 호출하는 방법을 볼 수 없습니다. 그래서 나는 requiredeclare 메소드를 일시적으로 덮어 쓰는 코드를 작성했다. 내 유스 케이스에서는 작동하지만 다른 사람이 필요하면 변경해야 할 수도 있습니다. 지금보다 더 최적화 될 수있을 것이라고 확신하지만 작동합니다.

내가 유지하려고하는 on GitHub 코드를 찾을 수 있습니다.

(function() { 
    var self = {}, 
     originalDefine = window.define, 
     originalRequire = window.require, 
     modules = []; 

    var define = function (id, deps, fn) { 
     if (id !== 'requireLib' && id !== 'text') { 
      modules.push({"id": id, "deps": deps, "fn": fn}); 
     } 
    }; 



    var require = function (deps, fn) { 
     var sortedModules = [], 
      unsortedModules = [], 
      resolvedDeps = {}, 
      maxAttempts = 1000, 
      module, 
      dep, 
      depList, 
      canAdd, 
      i, 
      j; 

     unsortedModules = ([]).concat(modules); 
     while (unsortedModules.length > 0 && --maxAttempts > 0) { 

      for (i = unsortedModules.length - 1; i >= 0; i--) { 
       canAdd = true; 
       module = unsortedModules[i]; 

       for (j = 0; j < module.deps.length; j++) { 
        dep = module.deps[j]; 
        if (resolvedDeps[dep] === undefined) { 
         canAdd = false; 
         break; 
        } 
       } 
       if (canAdd) { 
        resolvedDeps[module.id] = module; 
        sortedModules.push(unsortedModules.splice(i,1)[0]); 
       } 
      } 
     } 

     for (i = 0; i < sortedModules.length; i++) { 
      module = sortedModules[i]; 
      depList = []; 
      for (j = 0; j < module.deps.length; j++) { 
       depList.push(resolvedDeps[module.deps[j]]); 
      } 
      resolvedDeps[module.id] = module.fn.apply(this, depList); 
     } 

     depList = []; 
     for (i = 0; i < deps.length; i++) { 
      depList.push(resolvedDeps[deps[i]]); 
     } 

     fn.apply(this, depList); 

     window.define = originalDefine || function() {}; 
     window.require = originalRequire || function() {}; 
    }; 

    window.define = define; 
    window.require = require; 
    window.require.config = function() {}; 

    return self; 
}()); 
+0

너무 좋지 않아서 예상대로 작동하지 않습니다. http://plnkr.co/edit/ErIS1MCgS9vcxEnw9AKt?p=preview –

+0

Common.js 구문이 아닌 모듈로드에 AMD 구문을 사용해야합니다. 사용법은 [the docs] (http://requirejs.org/docs/api.html)를 참조하십시오. AMD 프로젝트로 작업하지 않는다면, 사용을 권장하지 않습니다 : common.js가 모듈 전쟁에서 거의 승리했습니다. – Andrew

+0

commonjs를 사용하여 모듈을로드 할 수있는 라이브러리를 알고 있습니까? (!) Synchrnously? –

-3

jQuery.ajax() 함수를 사용하여 Jquery 및 일부 서버 측 함수를 사용하는 경우 기본값은 비동기입니다.

http://api.jquery.com/jQuery.ajax/

당신은 비동기 설정할 수 있습니다 거짓 jQuery.ajax에서() 함수를.

희망이 도움이 될 것입니다.

+0

감사 :

이 시점에서 코드는 다음과 같습니다. jQuery를 사용하고 있지만 아약스/요청 메소드는 사용하지 않습니다. – Andrew

0

define()require()를 오버라이드 (override) 할 필요없이,이 작업을 수행하는 가장 쉬운 방법은, 확실히 단지 wrap your legacy code in an AMD로하고 종속성로 main-build.js 모듈 정의를 지정합니다.

기술적으로 '동기식'이 아니라는 것을 알고 있지만, 찾고있는 것을 달성해야합니다. 레거시 코드는 필수 모듈이로드 된 후에 만 ​​호출됩니다.

+0

이 경우 불가능합니다. 'legacy_code.js '는 실제로 수십 페이지에 있으며 각 페이지마다 고유합니다. 지금 내가하고있는 일은 오래된 레거시 코드를 복제하고 나중에 모듈이로드 될 때 실행될 수 있도록 호출을 기록하는 일종의 Facade 패턴을 설정하는 것입니다. 모듈은 분명히 이미 존재하며'main-build.js'가 로딩 되 자마자 접근 할 수 있어야합니다. – Andrew

관련 문제