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

2

不，这不是一个好方法。它将加载 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();
}
于 2013-09-10T09:52:39.120 回答
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 回答