Question

这是我用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（）中的

我在加载脚本时设置给定的标志。这是一个好方法吗？

Answer 1

不，这不是一个好方法。它将加载CPU，并可能有5毫秒的不必要的延迟。

更好的方法是向loadYoutubeapi（）和loadVimeoApi（）添加回调。一旦完成，他们必须调用你的新函数（例如moduleHasLoaded（）），它将计算加载的模块。全部加载后，您可以调用startController（）。

它将节省CPU并且根本没有不必要的延迟。

这样的事情：

myModule = {};
myModule.isYoutubeApiLoaded = false;
myModule.isVimeoApiLoaded = false;
myModule.loaded = false;
myModule.controller;

myModule.loadYoutubeapi = function() {

    /* Do your stuff. */

    myModule.isYoutubeApiLoaded = true;

    myModule.moduleHasLoaded();
}

myModule.loadVimeoApi = function() {

    /* Do your stuff. */

    myModule.isVimeoApiLoaded = true;

    myModule.moduleHasLoaded();
}

myModule.moduleHasLoaded = function() {

    if (!loaded && myModule.isYoutubeApiLoaded && myModule.isVimeoApiLoaded ) {
        loaded = true;
        myModule.buildGallery();
    }

}

myModule.init = function (){
    myModule.loadYoutubeapi();
    myModule.loadVimeoApi();
}

Answer 2

简单的解决方案是使用像lazyload这样的脚本加载器。它允许您指定要加载的脚本，并在实际加载时运行回调，即：

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

加载所有脚本时将调用该函数。需要注意的是，如果脚本无法加载，则不会出现错误回调。除了lazyload之外，还有其他脚本加载器。

更复杂的解决方案，但如果您正在使用中型到大型客户端应用程序，那就更好了：重构您的模块以使用require.js。

在JavaScript中加载外部脚本异步

2 个答案: