0

현재 일부 맞춤 파일 형식 (구성 파일을 편집 할 수있는 인터페이스를 제공하는 작은 편집기)을 편집하기 위해 웹 응용 프로그램을 개발 중입니다. 이 응용 프로그램의 핵심 요소는 감지 된 구성 파일 유형에 따라 올바른 인터페이스를 트리거하는 래퍼 인 "FileReader"라는 개체입니다. 이 방법은 그냥 새로운 FileReader (src)를 생성합니다. - src는 url 또는 blob이므로 깨끗하게 유지합니다.요구 사항 및 비동기 및 순환 종속성

일단 구성 파일의 유형이 검색되면 래퍼는 연관된 인터페이스가 있는지 확인하고 간단하게 사용합니다. 각 인터페이스 (각 다른 구성 유형에 대한)는 별도의 JS 파일에 정의됩니다. 래퍼가 완전히로드되면 모든 이벤트를 연결하고 앱 실행이 시작됩니다. 내가 requirejs 이용할 수 있도록 응용 프로그램을 변환하기로 결정

<!doctype html> 
<html><head></head> 
<body> 
    <div id="UI"></div> 
    <script src="js/fileReader/fileReader.js" >App.FileReader = function(){ ... }</script> 
    <script src="js/fileReader/configType1.js" >App.FileReader.registerFileType("config1",object)</script> 
    <script src="js/fileReader/configType2.js" >App.FileReader.registerFileType("config2",object)</script> 
    <script src="js/fileReader/configType3.js" >App.FileReader.registerFileType("config3",object)</script> 
    <script src="js/main.js" >App.run();</script> 
</body> 
</html> 

지금 앱이 자라 :

다음은 HTML의 I는 관련 요소와 함께 사용 골격이다. 내 문제는 대부분 파일 형식 모듈이로드 된 후에 FileReader를 사용할 준비가되었지만 먼저 파일 형식 모듈을로드 할 수 없다는 점만 고려하면 "가장 좋은 조직은 무엇인가"에 관한 것입니다. mainWrapper를 사용하여 유형을 등록하십시오. 내가 가지고 올 수

최선의 구조는 다음과 같습니다

main.js :

require(['require','FileReader','./fileReader/config1','./fileReader/config2','./fileReader/config3'], 
    function(require) { 
     require(['require','./core/app'], function(require , App) { 
      App.run(window) ; 
     }); 
    }); 
}); 

fileReader.js :

define(function() { 

    ... 

    return FileReader ; 

}); 

config1.js :

define(['FileReader'], function (FileReader) { 

    var Interface = ... ; 

    ... 

    App.FileReader.registerFileType("config1",Interface) 

    return FileReader ; 

}); 

app.js :

define(['FileReader'], function (FileReader) { 

    var App = function(){} ; 

    App.run = function(){ FileReader.openFile(...) ; ... } ; 

    return App ; 

}); 

내 문제는 무엇입니까? FileReader 객체에 올바른 Interface 객체가 포함되도록하려면 requirejs를 수동으로 강제로 모든 FileReader 관련 파일을로드 한 다음 주 앱 파일을로드해야합니다. 이렇게하면 App 객체가 FileReader 객체를 요청하면 이미 올바른 인터페이스가 등록되어 있습니다. 내가 달성하고 싶은 것은 "./core/app"메인 파일 "./fileReader"에 코어/앱 파일 에 요청한 다음 처음로드하는 동안 괜찮을 것입니다. fileReader 파일에서 config-type 모듈을로드 할 수 있으면 모든 항목을 등록한 다음 대답 만 반환합니다.

이었다 내가 시도 : (을 FileReader에서)

fileReader.js :

define(["require"],function (require) { 

    ... 

    require(["config1","config2","config3"], 
    function(){ 
     //occurs asynchronously, after the App.run() is triggered because of the synchronous return 
     callback(FileReader) ; //unfortunately I did not find any callback of this sort 
           //if it existed I could asynchronously find the list of the modules in the directory, load the them, and only then fire this fictive "ready" event 
    } 

    return FileReader ; //the first return occurs synchronously, so before the the fileReader is ready : modules are missing 

}); 

그래서 사이 순환 종속성 일종의 (모듈의 종류를로드하는 가장 좋은 방법은 무엇입니까 구성 유형 파일과 주 FileReader)? 내가 config-type 디렉토리에서 사용할 수있는 것을 읽을 수 있도록 강제로 비동기식으로 만들고 싶습니다. 간단한 HTML 스크립트 목록으로 올바른 순서로로드되었고 모듈 목록에 쉽게 액세스 할 수있게되었습니다. 이제 앱이 시작되기 전에 모든 것이 준비되었는지 확인하고 싶습니다.

답변

0

루이 (Louis)의 대답은 흥미 롭지 만 새로운 모듈을 만드는 데 문제가 생겼고 종속성을 올바른 컨텍스트에 두었더라도로드하는 것이 아니라 실제 비동기 모듈 정의를 검색하려고했습니다.

필자가 예상 한 동작을 추가하기 위해 require.js 소스 파일을 편집하는 것이 가장 좋습니다. 나는 새로운 핸들러를 등록 모듈 정의에 대한 콜백 함수를 제공 "지연"라는 ("수출" "필요"또는 같은 특별한 종속 동작) :

define(["delay"], function (delay) { 

    var Module = ... ; 

    setTimeout(function(){ //Some asynchronous actions 
     delay(Module) ; //This does actually returns the Module's value and triggers the "defined" event. 
         //It's actually transparent so the other modules just "feel" that the network's load time was a bit longer. 
    },1000); 

    return Module ; //This does not do anything because delay is active 

}); 
: 기본적으로

이이 방식으로 작동합니다

이 비동기 정의 덕분에 이제 디렉터리 (비동기 요청)를 검사 한 다음 모든 모듈을 투명하게로드 할 수 있습니다. https://github.com/jrburke/requirejs/pull/1078/files

을 분명히 그것은 비동기 수출에 대한 첫 번째 요청은 아니지만 그래서 난 그냥 개인 프로젝트를 위해 이것을 사용 논쟁에 여전히 : 누군가가 관심이 있다면, 내가 거기에 게시 있도록 수정 사항은 약 10 줄을 나타냅니다.

0

새로운 모듈에 어떤 파일 형식이 사용 가능한지 기록하는 기능을 제공 할 수 있습니다. 아마도 FileTypeRegistry이라고 할 수 있습니다. 따라서 설정 파일은 다음과 같을 수 있습니다 :

define(['FileTypeRegistry'], function (FileTypeRegistry) { 

    var Interface = ... ; 

    ... 

    FileTypeRegistry.registerFileType("config1", Interface);  
}); 

이 모듈은 값을 반환 할 필요가 없습니다. registerFileType은 레지스트리에 유형을 등록하기 만합니다.

FileReader.js가 포함될 수 :

define(["FileTypeRegistry", "config1", "config2", "config3"], function (FileTypeRegistry) { 

    var FileReader = {}; 

    var FileReader.openFile = function (...) { 
     var impl = FileTypeRegister.getFileTypeImplementation(...); 
    }; 

    return FileReader; 
}); 

getFileTypeImplementation은 형명에 기초하여 구현 (이전에 등록 된 Interface)를 검색한다.

+0

필자는 필자가 필요로하는 것을 더 잘 지원하기 위해 requirejs 소스 코드를 편집 할 수있었습니다. 이제는 괜찮습니다. 응답 주셔서 감사합니다 :) – Demurgos