Confirmed users
401
edits
No edit summary |
|||
Line 39: | Line 39: | ||
1. Lazy load the module in the parent module's start function and return a promise including the promise of the lazy loader | 1. Lazy load the module in the parent module's start function and return a promise including the promise of the lazy loader | ||
2. If the new module is only serving some on demand request, consider to lazy load the new module in the parent module's event handler and start it. | 2. If the new module is only serving some on demand request, consider to lazy load the new module in the parent module's event handler and start it. | ||
== Samples == | |||
In the following sample, assume Core is an existing module who blocks the first view | |||
and you decide to implement a new child module under Core. | |||
=== Sample for the module which does block the first view === | |||
// ftu_loader.js | |||
var FtuLoader = function() {}; | |||
BaseModule.create(FtuLoader, { | |||
name: 'FtuLoader', | |||
_start: function() { | |||
return LazyLoader.load('shared/js/test.js').then(() => { | |||
// Do something... | |||
}); | |||
} | |||
}); | |||
// core.js | |||
Core.SUB_MODULES = ['FtuLoader']; | |||
=== Sample for the module which does not block the first view === | |||
// side_tester.js | |||
var SideTester = function() {}; | |||
BaseModule.create(SideTest, { | |||
name: 'SideTester', | |||
_start: function() { | |||
return LazyLoader.load('shared/js/async.js').then(() => { | |||
// Do something... | |||
}); | |||
} | |||
}); | |||
// core.js | |||
Core.prototype._start = function() { | |||
return this.loadWhenIdle(['SideTester']); | |||
}; | |||
=== Sample for the new module which does not block the first view and the parent is not a baseModule === | |||
// side_tester.js | |||
var ChildModule = function() {}; | |||
ChildModule.prototype.start = function() {}; | |||
// parent.js | |||
ParentModule.prototype.start = function() { | |||
return Service.request('schedule', () => { | |||
return LazyLoader.load('child_module.js'); | |||
}).then(() => { | |||
this.child = new ChildModule(); | |||
return this.child.start(); | |||
}); | |||
}; |