使用 ES6 模块创建 JS

Question

我正在使用 createJS - preloadJS 和 ES6 以及 Babel 和 webpack。

const files = [{ src: 'characterSprite.png', id: 'characterSprite' }];

const Loader = new createjs.LoadQueue(false);
Loader.loadManifest(files, true, 'img/');

export default Loader;

我想实现的是在preload.js中加载所有图片，在其他文件中（例如hero.js ) 做类似的事情：

import Loader from './loader';
Loader.getResult('characterSprite');

问题是，当我在加载器上调用 .getResult() 时，加载器尚未完成预加载，所以它 returns undefined.

我可以使用以下方法检查加载程序何时完成：

Loader.addEventListener('complete', () => console.log('loader has finished');

我的问题是只有加载程序完成后才能导出模块吗？

有更好的方法吗？

Answer 1

我不熟悉 CreateJS，但这应该是普通的旧 ES6 (eh)，因此您可以通过包装 Loader 并在导入它之后启动它来解决这个问题：

class MyLoader {
    constructor(files) {
        this.files = files;
    }

    load() {
        // Using a promise is optional, but I would recommend it

        return new Promise((resolve) => {
             const Loader = new createjs.LoadQueue(false);
             Loader.loadManifest(files, true, 'img/');

             Loader.addEventListener('complete', () => { resolve(Loader) });
        });
    }
}

export default MyLoader;

通过这种方式，您可以像这样运行实例化它：

import MyLoader from './MyLoader';
const files = [{ src: 'characterSprite.png', id: 'characterSprite' }];

let myLoaderInstance = new MyLoader(files);
myLoaderInstance.load().then( (completedLoader) => {
    console.log('Loader has finished!', completedLoader.getResult('characterSprite') );
} );

这有意义吗？ :)

编辑：您可能还想查看 Webpack 的 file-loader，它允许您像使用 JS 模块一样 require 图像，以便它们与您的其余代码捆绑在一起。它与运行时间图像加载没有任何关系，但它仍然非常方便！

使用 ES6 模块创建 JS

CreateJS using ES6 modules

javascript

asynchronous

createjs

ecmascript-6