0

現在、いくつかのカスタム ファイル形式 (構成ファイルを編集するためのインターフェイスを提供する小さなエディター) を編集するための Web アプリケーションを開発しています。このアプリの重要な要素は、検出された構成ファイルの種類に応じて適切なインターフェイスをトリガーするラッパーである「FileReader」と呼ばれるオブジェクトです。このようにして、新しい FileReader( src ) を生成するだけです。 src は URL または BLOB であり、クリーンなままです。

構成ファイルのタイプが取得されると、ラッパーはそれに関連付けられたインターフェースがあるかどうかを確認し、単純にそれを使用します。各インターフェース (異なる構成タイプごと) は、個別の JS ファイルで定義されます。ラッパーが完全に読み込まれると、すべてのイベントがフックされ、アプリの実行が開始されます。

関連する要素で使用した HTML スケルトンを次に示します。

<!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>

さて、アプリが成長したので、自分のアプリを requirejs を使用するように変換することにしました。私の問題は主に、これらのモジュールを処理するための「最良の組織」に関するものです。なぜなら、すべてのファイルタイプモジュールがロードされたら FileReader を使用する準備ができているとしか考えられないからです。タイプを登録します。

私が思いつくことができる最良の構造は次のとおりです。

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 オブジェクトを要求すると、登録済みの適切なインターフェイスが既に含まれています。私が達成したいのは、コア/アプリファイルのメインファイル「./fileReader」で「./core/app」のみを要求し、最初のロード中にロードできれば問題ないことです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 スクリプト リストを使用すると、正しい順序で読み込まれ、モジュール リストに簡単にアクセスできました。アプリを開始する前に、すべての準備が整っていることを確認したいと思います。

4

2 に答える 2

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;
});

getFileTypeImplementationInterface型名に基づいて実装 (以前に登録されたもの) を取得します。

于 2014-04-01T00:45:26.173 に答える