Discussion :

[bouriquo92]

Hello,

J'aimerai créer une librarie graphique pour créer un barchart ( je sais qu'il en existe déjà des tas mais ceci est juste dans un but d'apprentissage ).
J'ai d'en l'idée de créer un objet style jquery ex : monobj("divtoto").createGraph(200,300); j'ai tenté de m'appuyer sur le code jquery pour le faire, mais je n'y arrive pas.

Voici le début de mon code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(function(window){	
	var _version= "0.0.1",
		_canvas;
	AnimatedGraph = function (className){		
		return new AnimatedGraph.fn.init(className);
	};
 
	AnimatedGraph.fn = AnimatedGraph.prototype = {
		constructor: AnimatedGraph,	
		init: function(className){
			_canvas = AnimatedGraph.search(className);			
			_canvas.innerHTML = "Youpi";
		},
		search: function(className){
			var elm = document.getElementsByTagName("div");			
			for(i=0;i<elm.length;i++){
				if(elm[i].className == className)
					return elm[i];
			}
		},
		createGraph: function(width,height){
			var title = document.createElement("div");
			title.innerHTML="tutu";
			_canvas.appendChild(title);
		}
	};
 
	return (function(){
		var ret = new AnimatedGraph();
		ret.createGraph = createGraph;
		return ret;
	});
 
 
	AnimatedGraph.search = AnimatedGraph.fn.search;
	function createGraph(width,height){
		var title = document.createElement("div");
		title.innerHTML="tutu";
		_canvas.appendChild(title);
	};
 
	window.Graph = AnimatedGraph;	
})(window);

Mais si j'exécute Graph('canvas').createGraph(200,300) cela ne marche pas quelqu'un pourrait-il m'aider ?

D'avance merci

[danielhagnoul]

Bonjour

Si vous voulez créer une librairie graphique avec un fonctionnement "à la jQuery", je vous conseille de lire les quatre tutoriels de Teylor Feliz : Comment créer facilement un framework JavaScript.

[bouriquo92]

Hello Daniel,

Ah merci beaucoup super, j'avais pas vu ce tutoriel.

Il va bien me servir pour comprendre certaines notions encore un peu abstraite pour moi :

Bonne journée

[bouriquo92]

Alors après avoir lu rapidement, je n'ai pas trouvé l'information dont j'avais besoin.

En effet j'aimerai faire comme : $('#divid').methode(param) pour faire quelque chose. Avec le code de mon premier message j'arrive bien à avoir un objet du type $('#divid') ex : Graph('canvas') par contre si j'appelle la méthode search qui est sensé appartenir à mon objet soit directement par graph('canvas').search soit par obj = graph('canvas') et obj.search j'ai systématiquement une erreur me disant que la méthode search n'hésiste pas. Ou est-ce que je me suis trompé ?

d'avance merci

[bouriquo92]

// cette innocente fonction devient un constructeur
var myClass = function (message) {
this.publicVariable = 10;
alert(message);
return new mySubClass.increment();
};

// accès au prototype
mySubClass = myClass.prototype = {
constructor: myClass,
decrement:function() {
console.log( --this.publicVariable );
},
increment:function() {
console.log( ++this.publicVariable );
}
};

myObject = new myClass();
myObject.decrement(); // -1
myObject.decrement(); // -2
mySubClass.increment(); // 1

Je ne comprends pas pourquoi sur ce code qui est quasiment comme celui trouver sur un tutoriel, j'obtiens une erreur sur myObject.decrement(); on ca me dit que decrement n'est pas une fonction .

[Invité]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return new mySubClass.increment();

C'est quoi ce retour du constructeur ?!

[giltheb]

Je suis assez débile alors j'utilise toujours le même système pour faire du OO.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function MyClass(){} //objet
MyClass.prototype = {
 myMethode1:function(i,j){ //publicMethode
 	return true;
 },
  myMethode2:function(i,j){ //publicMethode
  if this.myMethode1{i,j}
 	return false;
 },
initialize: function(els) { 
  this.elements = (els.elements || els).slice();
  this.publicPropriete1=this.elements[0];//publicPropriete
  this.publicPropriete2=this.elements[1];//publicPropriete
  this.publicPropriete3=1;//publicPropriete
  return this;
 }
};
 
//constructeur
MyClass.create = function(elements) {
 var M = new MyClass();
 return M.initialize(elements);
};
 
//autre constructeur
MyClass.zero = MyClass.create([0,0]);
 
//autre constructeur
MyClass.swap = function(el0,el1) {
 return MyClass.create([el1,el0]);
};
 
//library style
var $M = MyClass.create;

C'est lisible et flexible, avec une bonne structure bien solide.
J'ai repompé ça sur http://sylvester.jcoglan.com/

jquery après j'y connais pas grand chose, mais j'espère que ça t'aidera à déméler comment marche le OO en javascript.