Il est parfois difficile de gérer aisément le chargement, l’organisation de ces scripts Javascript. Surtout lorsque les fichier sont nombreux et/ou que les librairies ne sont pas toutes compatibles entre elles. Il n’est pas toujours utile de charger toutes les librairies Javascript pour une page donnée.

Voici deux nouveaux Ajax Loader ou plutôt Javascript Loader dans le même genre que la Google Ajax Librairies que je vous avez déjà présenté.

L’idée étant de délégué à un framework ou un outil la gestion de vos différentes sources Javascript.

Module.Js

Ce framework très léger permet de charger, inclure, déclarer, cacher des sources de script via quelques lignes de codes.

Par exemple

• Une inclusion :

include('theModule.js');

• Un chargement de fichier :

<script src="modules.js?./index.js"></script>

Archetypes.js

C’est un framework plus puissant qui en plus de traiter ce genre de problème permet également de fournir une architecture type sur laquelle vont reposer tous vos développements de Javascript.

C’est une sorte de templatisation de vos sources Javascript. Vous suivez donc un modèle bien particulier. Ce sont de bonnes pratiques.

Les dépendances sont gérées ainsi :

dependencies: {
    components: {
        slideManager: "Slidy.components.slideManager",
        slideChangeHandler: "Slidy.components.slideChangeHandler",
        slideCounter: "Slidy.components.slideCounter"
    },
    lib: ["Slidy.libs.shjs.sh_main", "Slidy.libs.shjs.sh_javascript", "Slidy.libs.shjs.sh_html"],
    css: ["Slidy.css.slidy", "Slidy.css.w3c-blue", "Slidy.libs.shjs.sh_typical"],
    html: {
        main: "Slidy.templates.container"
    }
}

En plus de la gestion de dépendances, vous pouvez également faire de la programmation orientée composant via ce puissant framework. Ce qui augmente la lisibilité du code et permet une maintenance plus facile. Ce schéma résume parfaitement l’idée du framework Archetype : Une approche orientée MVC et composant.

Le code est donc simplement organisé :

Archetype.Component.Extend(["Archetype.component.graphicalComponent"], {
	name:"Sample.component.graphicalFoobar",
	/**
	 * Set up the Component dependencies
	 */
	setup:{
		dependencies: {
			components:{foobar: "Sample.components.foobar"},
			lib:[],
			css:[],
			html:{main: "Sample.templates.foobarComponent"}
		}
	},
	/**
	 * Start the Component itself
	 * @constructor
	 */
	initialize: function() {
		this.options = {
			max: 5,
			date: new Date(0),
			table: ["a","b","c","d","e"]
		}
		this.anchor = $("bodyContent");

		Logger.debug("foobarGraphical has been instanciated!");

                new this.components.foobar();
		Logger.debug("foobar launched from foobarComponent!");

		this.render(this.anchor);
                Logger.debug("foobarGraphical rendered!");
	},
	/**
	 * Listen to "DateUpdate" event
	 */
	onDateUpdate: function(eventName, date) {
		this.options.date = date;
		this.render(this.anchor);
                Logger.debug("foobarGraphical received a date: " + date);
	},
	/**
	 * Render the Component view and return it
	 */
	renderViewAsString: function() {
		return this.templates.main.evaluate(this.options);
	}
});