11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Programmation Orientée Objet en Javascript + IE6

Bonjour à toutes/tous !

J'ai un (gros ?) souci de Javascript sous IE6 concernant la programmation orientée objet.

J'ai été amené, récemment, à refondre et améliorer certains javascripts qu'on utilise dans ma boîte. Jusque là, rien d'anormal, et j'ai opté (pour des raisons aussi bien fonctionelles que de facilité de maintenance et de modularité) pour des versions orientées "objets", chose tout à fait faisable en javascript.

Mes refontes et nouvelles librairies (toutes orientées objet) fonctionnent à merveille sous Firefox 2 / Safari / Opera 9 / IE7, mais sous IE 6, c'est ... désastreux.

Voici un squelette de code que j'ai utilisé (corps des méthodes et noms de variables non-incluses) :

// Javascript - Utilitaires DOM divers (fonctions issues du MDC). Fichier : DOMUtils.object.js
function DOMUtils() {
// membres de classe
};

DOMUtils.prototype.getNextSibling = function(oElement) {
// code de la méthode
};

// autres définitions de méthodes de la classe DOMUtils



// Javascript - Gestionnaire de plan de site avec niveaux dépliables. Fichier : SitemapManager.object.js
function SiteMapManager(sID, DOMUtils) {
// membres de classe
};

SiteMapManager.prototype.apply = function() {
// code de méthode
};

// autres définitions de méthodes de la classe SiteMapManager

Et évidemment, dans le head de mon HTML :
<script type="text/javascript" src="DOMUtils.object.js"></script>
<script type="text/javascript" src="SitemapManager.object.js"></script>
<script type="text/javascript">
window.onload = function() {
	var _DOMUtils = new DOMUtils();
	var stdSMM = new SiteMapManager("stdSiteMap",_DOMUtils).apply();
	var h2SMM = new SiteMapManager("h2SiteMap",_DOMUtils).setTitleFolding(true,"h2").apply();
};
</script>


La portion de code ci-dessus fonctionne à merveille dans Firefox 2 / Safari et autres IE 7 / Opera, mais pas dans IE 6 qui me donne une erreur pour le moins bizarre, laquelle est :
Ligne : 14
Car : 3
Erreur : 'DOMUtils' est indéfini
Code : 0

C'est d'autant plus intriguant que la classe DOMUtils est bien définie ! Et il me fait la même chose avec la classe SitemapManager (j'ai testé).

Je ne vois pas pourquoi j'ai cette erreur. Smiley sweatdrop

Auriez-vous des pistes / explications ? Smiley smile
Modifié par Ladytron (31 Oct 2007 - 15:04)
Salut Ladytron,

je vois que tu n'utilises pas de notation json pour prototyper tes objets. Néanmoins voici une erreur ultra répandue qui pourrait (peut-être) t'orienter :

myObject = {
  prop1: value1,
  prop2: value2, // une virgule en trop
};


C'est stupide. Malgré tout, et à ma connaissance, tous les navigateurs à l'exception de IE (6 à priori) n'ont aucun problème particulier avec cette virgule là où Microsoft y voit une atrocité qui plante son parseur.

Après on ne dispose pas de tout ton code. Mais il s'agit (je pense, sans plus d'info) à une simple erreur de syntaxe de ce type.

A l'occasion, mets nous tout ton code DOMUtils...
@plouche
Modifié par Ze Nenex (31 Oct 2007 - 17:16)
Bonjour Ze Nenex,

Merci de te pencher sur le sujet Smiley cligne

Effectivement, je n'ai pas (sur ce projet-là) utilisé la notation JSON pour prototyper les objets. Initialement, la classe SitemapManager était prototypée en JSON, mais elle a été refondue pour faire plus ... "objet", on va dire (également pour voir le pour et le contre de chaque technique : JSON et "objet pur").

Sur ta demande, voici le code complet de la classe DOMUtils (je rédige tout en anglais, ne pas s'étonner de voir de l'anglais partout dans mon code) :
function DOMUtils() {
        this.moduleName = "DOMUtils";
	this.moduleVersion = "0.1-beta";
	
	this.toString = function() {
		return this.moduleName + ' ' + this.moduleVersion;
	};
}

/* Taken from MDC :  http://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM  */
// get the next sibling of an element in the DOM Tree, avoiding ignorable nodes
DOMUtils.prototype.getNextSibling = function(oCurrentElement) {
	while (oCurrentElement = oCurrentElement.nextSibling) {
		if(!this.isIgnorableNode(oCurrentElement)) {
			return oCurrentElement;
		}
	}
	
	return null;
};


// get the previous sibling of an element in the DOM Tree, avoiding ignorable nodes
DOMUtils.prototype.getPreviousSibling = function(oCurrentElement) {
	while (oCurrentElement = oCurrentElement.previousSibling) {
		if(!this.isIgnorableNode(oCurrentElement)) {
			return oCurrentElement;
		}
	}
	
	return null;
};


// test if a node is all white space (including non-breakable spaces)
DOMUtils.prototype.isAllWS = function (oNode) {
	return !(/[^\t\n\r]/.test(oNode.data));
};


// test if a node is ignorable. An ignorable node is a all WS node
DOMUtils.prototype.isIgnorableNode = function(oNode) {
	return ( oNode.nodeType == 8 || (oNode.nodeType == 3 && this.isAllWS(oNode)) );
};


Vois-tu une chose susceptible de faire planter cet infâme IE6 ?


PS : cette classe, DOMUtils, pourrait logiquement être prototypée en JSON ... Puisqu'elle ne requiert pas vraiment d'instanciation via l'opérateur new


[EDIT 17:40]
Après examen, il semble qu'IE6 ne trouvait pas les fichiers à cause du nom du répertoire-racine contenant le projet. Ledit répertoire-racine avait un nom contenant des symboles #, et IE6 semblait incapable de parcourir un répertoire avec un tel nom (aucun encodage des caractères ?). Le renommage du répertoire a corrigé le dysfonctionnement.

Problème résolu.
Modifié par Ladytron (31 Oct 2007 - 17:49)
Sujet clos
Aller à