使用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 ）执行以下操作：< / p>

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

问题是，当我在加载器上调用.getResult()时，加载器尚未完成预加载，因此返回undefined。

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

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

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

有更好的方法吗？

Answer 1

我不熟悉CreateJS，但这应该是普通的旧ES6（呃），所以你可以通过包装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图像，以便它们与其他人捆绑在一起码。它与运行时图像加载没有任何关系，但它仍然非常方便！