Require

Archetype File Loader

Archetype provide a very powerful file loader. It handles lots of problematics:

• script loaded callback : getting a callback when the script is ready is different on each browser, Archetype handle compatibility and provide the right callback on each browser.
• dependency managment : with the modules configuration you can specify dependencies between your scripts. The loader will manages to load all files in the right order.
• different type of files : loader can load JavaScript files but also templates and css files
• duplicates loading : the loader detects and handles files already loaded.

Archetype.require

You can use the file loader threw the public method Archetype.requre. It uses two parameters:

• Files to load : It can be a String with the module name of the file or an Array of module names.
• Options : There is 3 options which can be set:
  • evaluation: choose "js", "html" or "css". Default value is "js".
  • callback: function launch when the files and all there dependencies have been loaded.
  • [Deprecated] asynchronous: allow to use the require method synchronously (by setting false to this parameter). Many JavaScript developements brings us to admit that there is no good reason to use require synchronously, that's why this option is deprecated.

By using components and there dependency management, user has not to use the require method himself. Futur features on IoC (Inversion of Control) will give to user even more solutions to handle file loading without using directly the require method.

Archetype.requireComponent

If you're using components, you already configured your dependencies in the component description. Archetype provide a special method to load all files needed to use a component: Archetype.requireComponent. You can use it with one or two parameters:

• Component's name : The name of the component to load.
• Callback : The callback launched when the component is ready. The first parameter of the callback is set with the constructor of the component, so you can instanciate easily the component you just load. This parameter is optional, if it is not set, a default callback will be used. This default callback instanciate the component loaded once with no parameters.

Examples

Here we can find some use cases of this methods. There directly belongs to Archetype's core sources.

This first example is the call to require which loads configured default modules and launch the Archetype._prepareBoot method as callback.

Archetype.require(Archetype.defaultModules, {
	callback: Archetype._prepareBoot
});
			

This is the require used to load all libraries configured in dependencies of a component:

Archetype.require(componentDefinition.setup.dependencies.lib, {
	evaluation: "js",
	asynchronous: true,
	callback: this.librariesDependenciesLoaded.bind(this, componentDefinition, setupJoiner)
});
			

The most common use of Archetype.requireComponent is to load the first component of an application from the {Page}.main function which is yout entry point. This is the case in the Slidy page (Pages/Slidy.js):

main: function() {
	Archetype.requireComponent("Slidy.components.container");
}
			

We can imagin a new version with a parameter passed to the component constructor:

main: function() {
	var myParameter = "foo";
	Archetype.requireComponent("Slidy.components.container", function(containerConstructor) {
		new containerConstructor(myParameter);
	});
}