Forme d'écriture JavaScript

[xess91]

Bonjour à tous,

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

Code :

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]

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 :

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 :

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

on fait

Code :

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

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

Code :

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]

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

Code :

maFonction({name:'developpez'});

bah c'est un raccourci pour :

Code :

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]

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 :

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 :

1
2
 
tinyMCE.init(milestone0);

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

Moi j'aurais fait comme ça:

Code :

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]

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 :

jQuery fait un truc semblable il me semble :

Code :

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]

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 :

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]

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 :

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 :

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);

[Bovino]

On se demande pourquoi certains se cassent les pieds à écrire des articles
Trois fondamentaux de JavaScript
Usage avancé des fonctions JavaScript

[xess91]

Je viens de les lire, je ne connaissais pas ces articles, j'aime bien merci!