1

これは私が JS で書いている最初のモジュールであり、正しく実行していることを確認したいと考えています。シンプルなギャラリーモジュールになりますが、youtubeやvimeoの動画も表示できるようにしたいです。私のモジュールには、init() という関数があります。最初にギャラリーを表示する前に、youtube iframe api や vimeo js api など、必要なすべてのライブラリを追加します。それらがロードされた後にのみ、ギャラリーを表示したい。したがって、私のモジュールは次のようになります。

myModule = {};
myModule.isYoutubeApiLoaded = false;
myModule.isVimeoApiLoaded = false;
myModule.controller;
myModule.init = function (){
   myModule.loadYoutubeapi();
   myModule.loadVimeoApi();
   myModule.startController();
}

startController 関数は次のようになります。

myModule.startController  = function (){
   myModule.controller = setInterval(function(
       if (myModule.isYoutubeApiLoaded && myModule.isVimeoApiLoaded ) {
             myModule.buildGallery();
             clearInterval(myModule.controller);
        }
   ), 5);
}

loadYoutubeapi() と loadVimeoApi() では、スクリプトが読み込まれるときに指定されたフラグを設定しています。それは良いアプローチですか？

4

2 に答える 2

1

簡単な解決策は、 lazyloadのようなスクリプト ローダーを使用することです。ロードするスクリプトを指定し、実際にロードされたときにコールバックを実行できます。つまり、次のようになります。

LazyLoad.js([
        "http://www.youtube.com/apiplayer?enablejsapi=1&version=3",
        "...vimeo script...",
        "...other scripts..."
    ],
    function() {
        myModule.buildGallery();
    }
);

この関数は、すべてのスクリプトがロードされたときに呼び出されます。注意点は、エラー コールバックが得られないことです。つまり、スクリプトの読み込みに失敗した場合です。lazyload 以外のスクリプト ローダーもあります。

より複雑なソリューションですが、中規模から大規模のクライアント側アプリケーションで作業している場合はより適切です: モジュールをリファクタリングして、require.jsを使用します。

于 2013-09-10T09:57:37.827 に答える