9
votes

Motif de conception de plug-in jquery (pratique courante?) Pour faire face aux fonctions privées

Je développe des plugins JQuery depuis un certain temps maintenant, et j'aime penser que je sais comment concevoir un puits d'ici maintenant. Un problème ne me harcle pas cependant, et c'est comment traiter les fonctions privées de manière puissante mais élégante.

Mes plugins ressemblent généralement à ceci: p>

this.
    find('.acertainclass').
    chain(fill, 'red').
    click(function() {
        alert("I'm red");
    });


0 commentaires

4 Réponses :


2
votes

Que diriez-vous (dans la portée du plug-in):

var fill = function (color)
{
    if (!$this) return; // break if not within correct context

    $this.css ('backgrorund-color', color);
    //.. your stuff here ...
}

$.fn.myplugin = function ()
{
    var $this = $(this); // local ref to current context
    fill ('green');
}


6 commentaires

Alors, comment remplissez-vous () sur le 'Ceci' à partir de $ .fn.myplugin ()?


Ce serait-il le (fonction (couleur) {...}) fonction?


Je pense que ce sont les ce 'es dans cet exemple d'exemple: (1) $ obj.myplugin () : $ obj (2) < Code> remplissage () : fenêtre (3) fonction (couleur) : fenêtre


@nickf - Ce fait référence à l'objet appelant, pas la fonction. Par exemple, si vous appelez obj.fill () , ceci serait obj . En utilisant Appliquer , vous pouvez définir ceci dans le contexte actuel au moment de l'appel, c'est-à-dire. l'objet jQuery


@IM - Vous avez parfaitement raison, j'avais malculé cette transitions de portée. Modifié ma réponse en conséquence


C'est la bonne réponse. Je ne peux pas croire que cela n'avait qu'un vote quand je me suis montré. Je suppose que les erreurs @kprime avaient dans la réponse initiale jeté des gens de la piste ... mais avec ses dernières corrections, la réponse est juste sur l'argent. La fonction "remplissage" est à l'intérieur de la portée du plug-in et a donc accès à "Ceci". Il n'y a pas d'autre moyen d'appeler "Remplir", donc pas besoin de vérifier qu'il a mis (mais cela peut aider le code évolue à l'avenir). Il fait tout ce que la question posée et aucune autre réponse ne fait.



1
votes

Malheureusement, les méthodes "privées" (ou toute propriété de cette matière) peuvent jamais être appelées avec un préfixe "Ceci" en JavaScript. Tout ce qui s'appelle comme this.myfunc (myargs) doit être disponible publiquement.

et "PRIVÉ" Les méthodes ne peuvent être appelées qu'à partir de la portée dans laquelle ils ont été définis. < p> Votre solution d'origine est la seule qui fonctionnera. Oui, c'est une douleur qui doit passer dans ceci , mais il n'ya plus de verbosité que si votre demande impossible était possible: xxx comme Vous pouvez voir, ils prennent tous les deux exactement le même nombre de caractères de votre code.

Désolé de dire, mais vous êtes coincé avec cela comme une solution, à moins que vous ne souhaitiez créer un nouvel espace de noms et faire Leur pas privé - qui va simplement ajouter à la quantité de code que vous devez écrire, c'est-à-dire ce que vous appelez indirectement "pas directement exposé": xxx

... est plus verbose, donc une sorte de défaite le but.

JavaScript n'est pas comme d'autres langues, il n'y a pas de membres "privés" en soi, seuls les membres accessibles dans des fermetures, qui peuvent parfois être utilisé de la même manière que les députés privés, mais sont plus un "contournement", et non les membres privés "Real-Deal" que vous recherchez.

Il peut être difficile de venir à des conditions avec cela (je luttons souvent), mais ne pas essayer de mouler JavaScript dans quoi Vous comprenez d'autres langues, prenez-le pour ce que c'est ...


0 commentaires

11
votes

une chose d'abord : si vous souhaitez appeler quelque chose comme this.fill ('rouge'); est une instance est une instance de JQuery, vous devez étendre le prototype de jQuery et faire remplir () "public". JQuery fournit des directives pour l'extension du prototype de son approvisionnement en utilisant des "plugins" appelés "plugins" pouvant être ajoutés à l'aide de $. Fn.fill , qui est identique au jQuery.pototype.fill . < P> Dans JQuery Callbacks, Ceci est souvent une référence à l'élément HTML et vous ne pouvez pas ajouter de prototypes à ceux (encore). C'est l'une des raisons pour la raison pour laquelle JQuery enveloppe des éléments et renvoie des instances jQuery qui peuvent être facilement étendues.

à l'aide de (fonction () {}) (); Syntaxe, vous pouvez Créez et exécutez JavaScript «Privé» à la volée, et tout disparaît quand c'est fait. En utilisant cette technique, vous pouvez créer votre propre syntaxe de type JQuery qui enveloppe JQuery dans votre propre objet chaîne privé. xxx

de cette façon, le P représente votre propre boîte à outils de " Fonctions privées. Ils ne seront disponibles nulle part ailleurs dans le code ou dans l'espace de noms de jQuery à moins que vous ne les attachez quelque part. Vous pouvez ajouter autant de méthodes que vous le souhaitez dans l'objet privé, et aussi longtemps que vous retournez ceci , vous pouvez également les chaînerez de style JQuery comme je l'ai fait dans l'exemple.


0 commentaires

2
votes

Vous voudrez peut-être jeter un coup d'œil à la façon dont le usine de widget UI de jQuery est implémentée.

L'approche de base est comme ceci: xxx


2 commentaires

vous voudriez utiliser autre que privé pour un nom de variable, car il s'agit d'un mot réservé (pour une utilisation future) dans ECMAScript


@JingLestHula Bonne prise, merci!