Discussion :

[Darkaurora]

Bonjour (ou même Bonsoir),

Une question certainement idiote mais je n'arrive pas à trouver de réponse. J'ai appris à créer succinctement des plugins jQuery cependant je cherche à créer la même chose mais en pure JavaScript.

Je suis certains de la possibilité de la chose puisque jQuery est du JS seulement certaines (ou beaucoup) de notions doivent m'échapper car je n'arrive pas à trouver de bonne piste pour y arriver.

Pourriez vous m'orienter svp ?

D'avance merci.

[sekaijin]

C'est quoi un plugin javascript ???

JQuery utilise de façon abusive de ce terme pour désigner une librairie accompagnée éventuellement de css et de ressources (images sons ...)

Si c'est ça un plugin alors ceci est un plugin javascript

Code :

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

function test() {return true;}

A+JYT

[Darkaurora]

Je déclare un plug comme une classe, la différence se fera lors de l'appel et de l’initialisation.

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
"use strict";
var MaClasse = function ( elt, opt ) {
	//Attributs...
}
MaClasse.prototype = {
	constructor: MaClasse,
	//Méthodes...
}
/*-- Définition du plugin --*/
var old = $.fn.maclasse
$.fn.maclasse = function ( opt ) {
	return this.each( function ( ) { 
		var $this 	= $( this ),
			data	= $this.data( 'maclasse' ),
			options = typeof opt == 'object' && opt
		if( !data )
			$this.data( 'maclasse', ( data = new MaClasse( this, options ) ) )
		if( typeof opt === 'string' )
			data[option]( )
	} )
}
$.fn.maclasse.defaults = {
	//Attributs par défaut...
}
$.fn.maclasse.Constructor = MaClasse

Ce qui permet d'appeler le plug de cette manière ci:

$('#mon_id").maclasse(JSON_Object_parameter);la frontière est mince mais pas moyen d'arriver au même résultat en JS pure soit

var element = document.getElementById('mon_id'); element.maclasse(JSON_Object_parameter);

[sekaijin]

Je ne suis pas sur de comprende ce que tu veux faire

il te faut comprendre ce que fais JQuery pour comprendre la syntaxe de

Code :

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

$('#mon_id').maclasse(JSON_Object_parameter);

$('#mon_id') ne retourne pas l'élément du DOM don l'id est mon_id ce n'est pas du tout équivalent à document.getElementById('mon_id').

la fonction $() de JQuery retourne un objet javascript qui contient un tableau de référence à d'autres objets dans le cas de ton appel ce tableau contient une référence à l'élément retourné par document.getElementById('mon_id').

Donc lorsque tu fais $('#mon_id').maclasse(JSON_Object_parameter);tu appelle la méthode maclasse (trompeur pour le nom d'une méthode)
sur l'objet javascript renvoyé par $('#mon_id').

l'appel équivalent en JS est beaucoup plus simple

Code :

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

data = new MaClasse( document.getElementById('mon_id', JSON_Object_parameter);

A+JYT

[Darkaurora]

d'accord merci de ton aide, je vais me pencher sur ce que tu m'as écrit puis testerais et je pense marquer comme résolus ce sujet.

Encore merci.

[SylvainPV]

plugin vient de "plug in", c'est-à-dire "se brancher sur". Un plugin jQuery se branche sur jQuery, logique, mais un "plugin JavaScript", ça ne veut rien dire. Mieux vaut parler de bibliothèque ou, dans ton cas, d'extension d'objets natifs.

Dans le code :

Code :

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

var element = document.getElementById('mon_id'); element.maclasse(JSON_Object_parameter);

La fonction maclasse doit être déclarée dans l'objet Element, soit directement dans l'objet, soit dans son prototype (ce qui est probablement ce que tu souhaites). Seulement, modifier le prototype des HTMLElement est jugé pour diverses raisons comme une mauvaise pratique, principalement parce que ce prototype est la propriété du navigateur et on ne sait pas trop ce qu'il y a dedans selon les milliers de différentes versions de différents navigateurs existants. Un article qui donne plus de détails : http://perfectionkills.com/whats-wro...nding-the-dom/