In javascript/es6
module programming for browser
env(with webpack
), I want to optimize my process of resources loading
say, in a module, we export a class
// in a js module
export default class MyClass {
constructor(){
new Promise(resolve => {
// this async IO always return unchanged remote resources
new AsyncIOLoader.load(remoteResources, resolve)
}).then(rawData =>
// a slow non-IO computation is needed
this.data = SlowTransform(rawData)
)
}
show() {
return this.data
}
}
if client code intends to use for
loop to create many instances of my class.
that SlowTranform
would be repeated many times, with SAME input and output.
And now I want to optimize it by lifting it into module scope(global scope).
for normal variable(that doesn't need async IO), it's easy:
// in a js module
//SlowTransform is still slow, but we only execute it once
const data = SlowTransform(rawData)
export default class MyClass {
constructor(){
this.data = data
}
show() {
return this.data
}
}
But How do we achieve this in facing of rawData
that should be retrieved by Async IO ?
I think a normal Promise/then
in module scope would not guarantee the availability of data
when client calls new MyClass()