AjaxClassLoader - Gestionnaire de classes en Ajax pour Javascript

En travaillant avec Flash en Actionscript 2, j'ai pris l'habitude d'utiliser des fichiers de classes uniques présentées hiérarchiquement dans une arborescence de dossiers. On utilise chaque classe à partir d'une autre en utilisant la directive *import*. Ce système est trés répandu dans les langages de programmation orientés objet (Actionscript,C#, Java, etc...).

Mon premier réflexe en travaillant en javascript a été d'essayer de reproduire ce système hiérarchique vraiment trés pratique. C'est pourquoi il a déjà un petit moment de ça, j'avais crée un système de chargement de fichiers permettant de recréer ce principe en Javascript pour faire mes premiers pas avec Ajax. J'ai eu l'occasion récemment de ressortir ce projet des cartons, je voulais vous en faire profiter.

Le script en lui-même n'a rien d'exceptionnel, c'est plus une méthode de travail et une idée. Une idée qui va plaire aux développeurs Flash, d'autant plus qu'elle permet d'utiliser assez facilement ses classes Actionscript en Javascript en réduisant au minimum le travail de conversion à faire lorsqu'on souhaite porter ses classes ActionScript en Javascript.

Le but de la classe est de permettre de charger dynamiquement une classe de manière à pouvoir l'utiliser directement aprés téléchargement. Pour ce faire j'utilise l'objet Ajax en mode synchrone de manière à respecter l'ordre d'exécution des scripts.

Pour l'exemple j'utiliserais le script AjaxClassLoader.js et une classe de classpath com.mywebsite.myclasspath.MyClass se contentant de faire un simple hello world.

Ma classe d'exemple est stockée dans le fichier dont le chemin d'accés sur le serveur peut se traduire par : /com/mywebsite/myclasspath/MyClass.js. Pour invoquer la méthode je dois charger la classe AjaxClassLoader par la voie habituelle à l'aide d'un tag SCRIPT contenue dans la page HTML qui exécute l'ensemble de l'exemple :

<script type="text/javascript" src="AjaxClassLoader.js"></script>

La classe AjaxClassLoader étant chargée, je maintenant y faire appel et importer ma classe d'exemple au travers du script suivant :

<script type="text/javascript">
var MyClass = AjaxClassLoader.load('com.mywebsite.myclasspath.MyClass');
var iMyClass = new MyClass();
iMyClass.foo();
</script>

La classe d'exemple ressemble à :

function MyClass(){}
MyClass.prototype.foo = function()
{
    alert('hello world');
}

Je pense que là vous avez saisi le principe. Quand j'ouvre ma page, la classe de classpath com.mywebsite.myclasspath.MyClass est chargée, je l'instancie et en appelant la méthode foo sur l'instance crée qui produit une alerte javascript avec 'hello world' pour message.

En application c'est à peine plus compliqué. Pour des raisons pratiques en réalité le fichier de la classe d'exemple contient exactement :

ClassMyClass();
function ClassMyClass()
{
    AjaxClassLoader.getClassPathObject('com.mywebsite.myclasspath').MyClass = MyClass;
    
    function MyClass(){}
    MyClass.prototype.foo = function()
    {
        alert('hello world');
    }
}

J'utilise la fonction ClassMyClass (le nom importe peu, je fais juste précéder le nom de la classe par le mot clé "class" par convention) simplement pour englober la déclaration de la classe pour permettre d'utiliser des variables locales à la fonction ClassMyClass sans polluer le reste du contexte d'exécution général du script.

Le fait de déclarer MyClass sur l'objet retourné par l'appel à la méthode AjaxClassLoader.getClassPathObject permet de déclarer la classe dans le classPath retourné.

Le reste appartient à la déclaration ordinaire de la classe Javascript.

Cet exemple est inclus dans le dossier simple_usage_example de l'archive.

C'est là que l'idée devient intéressante. Il est en effet possible de déclarer une classe tout en utilisant une ou plusieurs autres classes déclarées elles-même avec le même système.

Si ma classe de l'exemple plus haut avait du utiliser une autre classe j'aurais simplement eu à écrire :

ClassMyClass();
function ClassMyClass()
{
    AjaxClassLoader.getClassPathObject('com.mywebsite.myclasspath').MyClass = MyClass;

    //Équivalent strict d'un import de classe en Actionscript 2.
    var mySecondClass = AjaxClassLoader.load('com.mywebsite.mysecondclasspath.MySecondClass');
    
    function MyClass(){}
    MyClass.prototype.foo = function()
    {
        //La classe peut être utilisée directement puisque accessible
        //de manière locale à la fonction ClassMyClass.
        var iMySecondClass = new mySecondClass();
        iMySecondClass.foo();
    }
}

Pour illustrer l'utilisation de la classe pour créer un héritage de classe et l'utilisation d'une classe externe, j'ai inclus un exemple complet dans le dossier full_usage_example de l'archive.

Télécharger l'archive contenant la classe et les scripts d'exemples.