Forme d'écriture JavaScript

**xess91** · 25/12/2011, 23h13

Bonjour à tous,

Je souhaiterai avoir des informations sur la forme d'écriture suivante:

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
 
(function(){
 
	myobject.create('myobject.util.Dispatcher', {
		scope : null,
		listeners : null,
 
		Dispatcher : function(s) {
 
		}
	});
 
	(function(myobject) {
		myobject.create({
			DropMenu : function(id, s) {
 
 
	}});})(myobject);
 
}());

J'ai remarqué que Jquery et TinyMce étaient écrit de cette manière.
Comment s'appelle cette méthode? c'est JSON? Pouvez-vous me communiquer des tutos sur cette méthode de création d'objet? Je connaissez le prototypage, mais là j'avoue me poser la question sur cette méthodologie.

Merci à tous pour vos réponses.

**Willpower** · 25/12/2011, 23h59

Si tu parles de la closure, ça sert à travailler sur des variables locales et donc à restreindre leurs portées. (ne pas modifier des variables existantes et ne pas se faire modifier nos variables par d'autres morceaux de code).

exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var a = 1;
function init(){
    var a = 2;
    function getA(){
        return a;
    }
    return getA;
}
var getA = init();
alert(a); // 1
alert(getA() ); // 2
alert(a); // 1

donc en gros, c'est ce qu'ils font sauf que ça ne sert à rien de nommer une fonction dans le seul et unique but de l'appeler une et unique fois juste après, autant déclarer et exécuter une fonction anonyme directement.

donc au lieu de :

Code :

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

1
2
3
function init(){
    alert('init');
}init();

on fait

Code :

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

1
2
3
(function(){
    alert('init');
})();

l'utilisation de fonction anonyme peut aussi servir à conserver l'état d'une variable :

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
var arr = new Array(10);
for(var i=1;i<10;i++){
    arr[i] = function(){alert(i);};
}
arr[5](); // affichera 9 car i vaudra 9 à la fin de la boucle
 
// il faut donc faire :
var arr = new Array(10);
function createFn(a){ // j'ai appelé la variable a pour éviter toutes confusions, mais on peut très bien l'appeler i car ce sera un i local donc différent de celui reçu en paramètre
  return function(){alert(a);};
}
for(var i=1;i<10;i++){
    arr[i] = createFn(i);
}
arr[5](); // affichera bien 5
 
 
// on peut utiliser la fonction anonyme :
var arr = new Array(10);
for(var i=1;i<10;i++){
    arr[i] = (function(a){ return function(){alert(a);};  })(i);
}
arr[5](); // affichera bien 5

**Willpower** · 26/12/2011, 00h10

si tu parlais du fait de passer un objet littéral dans une fonction :

Code :

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

maFonction({name:'developpez'});

bah c'est un raccourci pour :

Code :

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

1
2
3
var obj = new Object();
obj.name = 'developpez';
maFonction(obj);

mais je pense que ta question, bien que vague, concernait plutôt les closures(anonymes).

**xess91** · 26/12/2011, 00h24

Merci pour tes réponses qui m'apportent déjà quelques réponses.

En fait je parlais plus généralement de la méthode de développement utilisé par TinyMce et Jquery.

Par exemple si on prend le fichier d'entrée de TinyMce, il est comme ça:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
(function() {
	var i, nl = document.getElementsByTagName('script'), base, src, p, li, query = '', it, scripts = [];
 
	if (window.tinyMCEPreInit) {
		base = tinyMCEPreInit.base;
		query = tinyMCEPreInit.query || '';
	} else {
		for (i=0; i<nl.length; i++) {
			src = nl[i].src;
 
			if (src && src.indexOf("tiny_mce_dev.js") != -1) {
				base = src.substring(0, src.lastIndexOf('/'));
 
				if ((p = src.indexOf('?')) != -1)
					query = src.substring(p + 1);
			}
		}
	}
 
	// Parse query string
	li = query.split('&');
	query = {};
	for (i=0; i<li.length; i++) {
		it = li[i].split('=');
		query[unescape(it[0])] = unescape(it[1]);
	}
 
	nl = null; // IE leak fix
 
	function include(u) {
		scripts.push(base + '/classes/' + u);
	};
 
	function load() {
		var i, html = '';
 
		for (i = 0; i < scripts.length; i++)
			html += '<script type="text/javascript" src="' + scripts[i] + '"></script>\n';
 
		document.write(html);
	};
 
	// Firebug
	if (query.debug && !("console" in window)) {
		include('firebug/firebug-lite.js');
	}
 
	// Core ns
	include('tinymce.js');
 
	// Load framework adapter
	if (query.api)
		include('adapter/' + query.api + '/adapter.js');
 
	// tinymce.util.*
	include('util/Dispatcher.js'); ...
 
	// tinymce.html.*
	include('html/Entities.js'); ...
 
	// tinymce.dom.*
	include('dom/DOMUtils.js'); ...
 
	// tinymce.ui.*
	include('ui/KeyboardNavigation.js'); ...
 
	// tinymce.*
	include('AddOnManager.js'); ...
 
	load();
}());

et il est instancié comme ça:

Code :

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

1
2
 
tinyMCE.init(milestone0);

Je souhaite comprendre la méthode de développement?

Moi j'aurais fait comme ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function wysiwyg(args)
	{
 
	}
 
wysiwyg.prototype.create = function()
	{
 
        }
 
var editeur = new wysiwyg();

La méthode n'est pas la même et je souhaite comprendre celle de TyniMce et celle de Jquery?

**Willpower** · 26/12/2011, 00h47

Je ne comprend tjs pas trop la question, à part que le code est englobé par une fonction anonyme, ça fonctionne un peu de la même manière. (enfin, je ne connais pas TinyMce donc je parle pour jQuery)

Envoyé par xess91

Moi j'aurais fait comme ça:

Code :

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

1
2
3
4
5
function wysiwyg(args){
}
wysiwyg.prototype.create = function(){
}
var editeur = new wysiwyg();

jQuery fait un truc semblable il me semble :

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
// englobage d'une fonction anonyme pour préserver les variables locales
(function(){
  // creation d'un compteur local à la librairie
  var localCount;
  // constructeur de l'objet principal
  function wysiwyg(){}
  // une methode 
  wysiwyg.prototype.create = function(){
    localCount++;
    return [arguments[0]];
  }
  // function d'initialisation de l'objet principal
  wysiwyg.prototype.init = function(){
    localCount = 0;
  }
  // création de l'objet principal
  window.editeur = new wysiwyg();
  // initialisation 
  editeur.init();
})();
// utilisation 
editeur.create("id");

le fait d'avoir un objet (myobject, editeur, $, jQuery, etc...) sert principalement de namespace pour regrouper tes méthodes(et variables) liées à cette librairie. car une méthode "create" (par exemple) toute seule n'aurait pas beaucoup de sens.

**xess91** · 26/12/2011, 12h30

Merci Willpower tes réponses sont claires,

Je ne connaissais pas cette notion pour structurer mes scripts de cette manière.

Je continu avec TinyMce en exemple, leur "Core" est structuré de cette manière:

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
 
(function(win) {
 
	//Je ne comprends pas cette portion de code//
	var tinymce = {
		_init : function() 
				{
				function getBase(n) 
						{
						return t.baseURL;
						}
 
				return;
				},
 
		is : function(o, t) 
				{
				if (!t) return o !== undefined;
				if (t == 'array' && (o.hasOwnProperty && o instanceof Array)) return true;
 
				return typeof(o) == t;
				}
	};
	//
 
})(window);

La ce n'est pas du prototypage?

Ca ressemble à une structure JSON, comment ça s'utilise?

**Willpower** · 26/12/2011, 14h30

Envoyé par xess91

La ce n'est pas du prototypage?

Ca ressemble à une structure JSON, comment ça s'utilise?

Déjà sache que JSON = JavaScript Object Notation.
Donc si tu travailles en javascript ça ne sert pas à grand chose de repréciser qu'il s'agit d'un objet javascript. (sauf dans le cas d'échange de l'objet avec une autre interface ou une requête serveur par exemple.)

Bon, il s'agit bien d'un objet, ça fait un peu partie des bases du langage donc je t'invite vivement à suivre des tutos ou livres des ouvrages javascript pour apprendre les notions élémentaires mais je vais néanmoins tenter de t'apporter l'aide que tu demandes.

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
// closure
(function(win) {
 
	// nouvel objet javascript nommé "tinymce" et local à la closure. (pas de porté au dela)
        // déclaration sous forme littérale (représentation de l'objet et non via constructeur + new)
	var tinymce = {
                // la propriété "_init" recoit une nouvelle fonction déclaré sur place
		_init : function() 
				{
				function getBase(n) 
						{
						return t.baseURL;
						}
 
				return;
				},
 
		 // la propriété "is" recoit une nouvelle fonction déclaré sur place
		is : function(o, t) 
				{
				if (!t) return o !== undefined;
				if (t == 'array' && (o.hasOwnProperty && o instanceof Array)) return true;
 
				return typeof(o) == t;
				}
	};
	//
 
})(window);

En gros ça revient à faire :

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
(function(win) {
 
var tinymce = new Object();
tinymce._init = function(){
	function getBase(n) {
		return t.baseURL;
	}
	return;
};
tinymce.is = function(o, t){
	if (!t) return o !== undefined;
	if (t == 'array' && (o.hasOwnProperty && o instanceof Array)) 
		return true;
	return typeof(o) == t;
};
 
})(window);