JS : fonctions et propriétés globales


15 juillet 2011

Il y a parfois besoin d'accéder à des propriétés (variables/fonctions) globales d'un objet. On peut arguer que dans ce cas-là une simple variable/fonction définie dans le namespace global suffirait (et on n'aurait pas tort) mais si l'utilisation d'un singleton peut paraître plus séduisant, car on minimise les collisions de nom dans ce même espace global, on est confronté à l'absurdité d'appeler une méthode de cet objet alors que cette fonction n'utilise rien de ce même objet. L'appel à une fonction/variables globale dans ce cadre prend simplement la forme suivante :

MonObjet.prototype.MaFonctionGlobale(les paramètres)

Il faut donc juste utiliser le constructeur et son prototype pour adresser la fonction ou la variable. C'est plus long ? Oui, mais parfois il faut indiquer que cette méthode est globale et c'est une très bonne façon de faire.

JS : décomposition d'un new


11 juillet 2011

Voici ma version d'un new en JS :

operator    new(Constructor)        {
    var Instance = {}
    Instance.constructor = Constructor
    Instance.prototype = Constructor.prototype
    var RetVal = Constructor.apply(Instance)
    return typeof RetVal == "undefined" ? Instance : RetVal
}

�a permet de comprendre facilement le langage et sa manière d'opérer.

JS : plug-in de jQuery, compléments


22 mai 2011

Le module jQuery étant créé on peut vouloir lui ajouter des fonctionnalités ou un paramétrage. Pour reprendre l'exemple des visualiseurs d'images décrit ailleurs, j'ai 3 modes de transition représentant chacun un bout de code. On peut imaginer que le mode choisi pour le visualiseur soit un paramètre et que les trois programmes cohabitent au sein d'un module slider. Pour cela, on va déplacer les deux autres codes dans le module simpleSlider et lui faire accepter un objet littéral en entrée pour le paramétrer.

Concernant les fonctionnalités supplémentaires elles feront l'objet de fonctions filles de la fonction principale qui se retrouve être un hub et concernant les paramètres d'entrée on définira dans le corps de la fonction un objet littéral, miroir de ce que l'utilisateur envoie au plugin, avec tous les paramètres par défaut. Il suffira de la ligne suivante pour faire obtenir la réunion des deux avec les paramètres utilisateur overridant ceux par défaut :

$.fn.MonModule = function(options)      {
    var Settings = { /* Les paramètres acceptés avec leurs valeurs par défaut /* }
    $.extend(Settings, options)
    /* Settings contient à présent les paramètres de l'utilisateur réunis avec ceux par défaut */
}

Si le module ne renvoie pas de valeur particulière, on n'oubliera pas de lui faire retourner this pour que le chaînage des appels JS/jQuery puisse perdurer sur le même objet jQuery.

JS : plug-in de jQuery, première approche


21 mai 2011

Le visualiseur de diapositives décrit dans un autre post aurait sa place dans un plug-in de jQuery et n'a aucune raison d'être instancié dans une fonction personnelle et encore moins en dur dans le code d'une page. Aussi on va décrire les étapes de l'intégration de ce bout de code dans l'espace de nom de jQuery. Tout repose sur le bout de code qui suit :

$.fn.NomDuPlugin = function()       {
    //Mon plug-in
}

Si on est certain que l'on n'utilise que jQuery ceci fonctionnera, mais si on a YUI ou Prototype qui traîne on utilisera une fonction auto-exécutable et une closure qui permettra d'utiliser le caractère $ sans que cela pose de problème :

(function($)        {
    $.fn.NomDuPlugin = function()   {
        //Mon plug-in
    }
})(jQuery)

Si à présent on déplace ce code dans un fichier JS externe et qu'on l'inclue avant son utilisation et après l'inclusion de jQuery on a effectivement transformé notre programme en module, externe et réutilisable. Dans le cas présent j'ai même pu éliminer la sélection du containeur du visualiseur et on instancie ce dernier comme suit, après inclusion du fichier js/simpleSlider.js :

$("#container").simpleSlider()

Plus simple ? Je suis pas sûr que ça soit possible :)
Source : la page de jQuery.com qui parle des plug-ins

JS : var ou pas var ?


1 mai 2011

Rapidement dit : var sert à implanter une variable dans le contexte courant.

Moins rapidement, si on utilise une variable sans var, l'interpréteur JS va remonter les contextes jusqu'à trouver une variable du même nom et l'utiliser. On voit d'ici les problèmes qui peuvent se poser si on déclare une variable en global et qu'on utilise une variable du même nom, sans var, au sein d'une fonction...

Ainsi, il peut paraître prudent de mettre un var avant toute déclaration de variables, mais on peut vouloir utiliser une variable d'un autre contexte.

J'ajoute ici que toute affectation en JS se fait par référence...
Accueil1 2 3 4