Programmation orientée objet par prototype avec jQuery

XI. Le point délicat du système poopj▲

Les habitués des objets JSON auront remarqué que je n'ai pas parlé de la possibilité d'ajouter des attributs dans l'objet anonyme.

Je déconseille fortement l'usage de cette possibilité aux nouveaux utilisateurs de l'outil, car elle est très dangereuse.

Dangereuse pour deux raisons :

On risque d'assimiler, de considérer comme analogue, les attributs du _builder et ceux de l'objet anonyme. Certes, l'objet instancié aura accès aux deux de la même manière, mais ceux du _builder sont initialisés lors de l'instanciation et les autres ne le sont pas ;
Lorsqu'un attribut de l'objet anonyme contient du texte ou un nombre, on peut ne s'apercevoir de rien, mais s'il contient un objet (rappel : un Array est un objet) toutes les instances de la « fonction classe » font référence au même objet.

Les attributs de l'objet anonyme (poopj11.html)

Sélectionnez

try {
  /*
   * Si vous définissez des attributs pour l'objet
   * anonyme, soyez prévenus des conséquences.
   *
   * Lorsque l'attribut est un objet il est
   * unique pour toutes les instances.
   */
  var Personne = $.dvjhClass._create({
    pays: "France",
    tab: [],
    obj: {},
    _builder: function(prenom, nom){
        this.prenom = prenom || "";
        this.nom = nom || "";
    },
    toString: function(){
        return "Personne : ";
    }
  });

  var dvjh = new Personne("Daniel", "Hagnoul");
  dvjh.pays = "Belgique";                
  dvjh.obj["secret"] = 10;
  dvjh.tab.push(5);

  var pierre = new Personne("Pierre", "Durand");
  pierre.pays = "Findland";
  pierre.obj["valeur"] = function(){return 267;};
  pierre.tab.push(6);

  console.log("dvjh et pierre pays : ", dvjh.pays, pierre.pays);
  console.log("dvjh et pierre tab : ", dvjh.tab, pierre.tab);
  console.log("dvjh et pierre obj : ", dvjh.obj, pierre.obj);
  console.log("dvjh et pierre obj.valeur : ", 
               dvjh.obj.valeur(), pierre.obj.valeur());

  var Etudiant = $.dvjhClass._create(Personne, {
    _builder: function(prenom, nom, numero){
        this._base(arguments.callee, Personne, arguments);
        this.numero = numero || -1;
    },
    toString: function(){
        return "Etudiant : ";
    }
  });

  var etudiant = new Etudiant("Jean", "Dupond", 214);

  console.log("etudiant pays", etudiant.pays);
  console.log("etudiant tab", etudiant.tab);
  console.log("etudiant obj", etudiant.obj);
  console.log("etudiant obj.valeur", etudiant.obj.valeur());
}
catch(err){
  alert(err);
}

Mais la possibilité pour toutes les instances de stocker des valeurs dans un même objet peut également être un plus.

Les attributs de la clôture jQuery (poopj12.html)

Sélectionnez

try {
  /*
   * Si vous maîtrisez les attributs publics de l'objet anonyme,
   * vous êtes qualifié pour jouer avec la clôture jQuery.
   *
   * Attention, tout est commun à toutes les instances !!!
   */
  var Personne = (function($){
    var pays = "France";
    var tab = [];
    var obj = {};
    
    var hello = function(){
        return "Bonjour ! " + pays;
    };
    
    return $.dvjhClass._create({
        _builder: function(prenom, nom){
            this.prenom = prenom || "";
            this.nom = nom || "";
        },
        getPays: function(){
            return pays;
        },
        setPays: function(value){
            pays = value;
        },
        getObj: function(value){
            if (typeof value === "string"){
                return obj[value];
            }
            
            return obj;
        },
        setObj: function(nom, value){
            obj[nom] = value;
        },
        getTab: function(value){
            if (typeof value === "number"){
                return tab[value];
            }
            return tab;
        },
        setTab: function(value){
            tab.push(value);
        },
        print: function(){
            return hello();
        },
        toString: function(){
            return "Personne : ";
        }
    });
  })(jQuery);

  var dvjh = new Personne("Daniel", "Hagnoul");

  console.log(dvjh);

  dvjh.setPays("Belgique");                
  dvjh.setObj("secret", 10);
  dvjh.setTab(5);

  console.log(dvjh.getPays());
  console.log(dvjh.getObj());
  console.log(dvjh.getTab());
  console.log(dvjh.print());

  var pierre = new Personne("Pierre", "Durand");

  console.log(pierre);

  pierre.setPays("Findland");                
  pierre.setObj("valeur", function(){return 267;});
  pierre.setTab(6);

  console.log(pierre.getPays());
  console.log(pierre.getObj());
  console.log(pierre.getObj("valeur"));
  console.log(pierre.getTab());
  console.log(pierre.print());

  var Etudiant = $.dvjhClass._create(Personne, {
    _builder: function(prenom, nom, numero){
        this._base(arguments.callee, Personne, arguments);
        this.numero = numero || -1;
    },
    toString: function(){
        return "Etudiant : ";
    }
  });

  var etudiant = new Etudiant("Jean", "Dupond", 214);

  console.log(etudiant.getPays());
  console.log(etudiant.getObj());
  console.log(etudiant.getTab());
  console.log(etudiant.print());

  // erreur, undefined !
  console.log(etudiant.pays);
}
catch(err){
  alert(err);
}