Fork me on GitHub

Comment scinder ses modules javascript

La problèmatique initiale

Ma grande question du jour était de savoir comment faire pour splitter le code d'un object Javascript en différents fichiers à la manière des modules Python.

La création d'un object Javascript

Tout d'abord pour créer un object Javascript, on utilise le mot clé function :

function Babel(){
    this.english = {
            hello: function () { alert('hello'); },
            goodbye: function () { alert('goodbye'); }
    }
}

var say = new Babel();

Pour tester :

say.english.hello();

Comment ajouter des fonctionnalités à mon objet ?

Pour ajouter des fonctionnalités à mon objet, il faut modifier le prototype.

En effet new Babel() construit un objet qui hérite de Babel.prototype :

Babel.prototype.french = {
    bonjour: function () { alert('bonjour'); },
    aurevoir: function () { alert('aurevoir'); },
}

Mais comment accéder aux autres propriétés de mon objet ?

La question est mystérieuse, en effet si je veux accéder aux fonctions définies précédement dans mon objet depuis l'extension que je suis en train de coder, je ne peut pas utiliser le mot clé this, car il n'est pas défini.

Passer l'objet dans une closure

Une première solution est d'utiliser une closure :

(function (_this) {
    babel.prototype.french = {
        bonjour: function () { alert('bonjour'); },
        aurevoir: function () { alert('aurevoir'); },
        hello: function () { _this.english.hello(); }
    }
})(say);

Le problème, c'est qu'on utilise toujours le contexte de say, il est donc difficile de créer plusieurs objets.

Référencer l'objet parent

Une seconde solution est de référencer l'objet parent :

function babel(){
    this.english = {
            hello: function () { alert('hello'); },
            goodbye: function () { alert('goodbye'); }
    };
    for (var i in babel.prototype) {
        this[i].parent = this;
    }
}

Puis de définir french ainsi :

babel.prototype.french = {
    bonjour: function () { alert('bonjour'); },
    aurevoir: function () { alert('aurevoir'); },
    hello: function () { this.parent.english.hello(); }
}

Il faudra donc créer seulement après pour que la boucle for fasse bien son office.

Une alternative, le singleton

Pour simplifier les choses et si finalement, il n'y a pas besoin de créer plusieurs objets, il suffit de faire un objet simple comme cela :

var babel = {}

babel.english = {
    hello: function () { alert('hello'); },
    goodbye: function () { alert('goodbye'); },
    teeshirt: function () { alert('T-shirt'); }
}

babel.french = {
    bonjour: function () { alert('bonjour'); },
    aurevoir: function () { alert('aurevoir'); },
    teeshirt: function () { babel.english.teeshirt(); }
}

babel.english.teeshirt();
babel.french.teeshirt();

Conclusion

Il est maintenant possible de scinder notre fichier en deux partie, la première qui définie l'objet et les suivantes qui vont ajouter les fonctionnalitées.

Ainsi à la manière de python, on peut inclure nos modules et organiser notre javascript :

os.path.join()

Comments !

blogroll

social