2009-10-31 4 views
3

Je vois beaucoup ce modèle (que j'utilise actuellement) mais je veux une explication sur son fonctionnement.Quel genre de motif/objet est-ce en Javascript?

var mystuff = function() { 


    var blah = function() { 

    }; 


    return { 

     setup: function() { 
       blah(); 
     }; 

    }; 


}(); 

Ensuite, l'utilisation est très POO comme:

mystuff.setup(); 

Répondre

6

Qu'est-ce qui revient à faire ya une interface publique à votre objet. Il semble que vous utilisiez la fonction publique setup() pour accéder à la fonction privée blah(). C'est une méthode d'émulation des fonctions membres publiques et privées dans les objets Javascript.

Depuis mystuff est défini avec cette queue () au fond, il est exécuté immédiatement lorsque l'analyseur atteint mystuff.setup(), et retourne en fait un objet anonyme (votre interface publique) avec la méthode setup().

2

Ceci est simplement un exemple de nested functions en JavaScript. Bien que la méthode de les appeler peut sembler "OOP-like" sur la surface, ce style appartient beaucoup à la functional paradigm.

En substance, cependant, il n'y a rien d'extraordinaire se passe. JavaScript est connu comme une langue dans laquelle "tout est une fonction", ce qui est assez proche de la vérité. Tout ce que cela signifie est que toute fonction déclarée appartient strictement à sa portée parent.

+0

Raison du vote négatif? – Noldorin

6

D'autres ont expliqué comment cela fonctionne. C'est juste quelques informations de fond sur le sujet.

C'est ce qu'on appelle le "Module pattern" (inventé par Douglas Crockford je crois, mais a blogué sur earlier).

Il vous offre trois avantages principaux:

  1. Un espace de noms (la valeur à la gauche de "function")
  2. Un « espace » privé à mettre des choses dans (vars, fonctions, etc.) qui n » pas besoin ou ne devrait pas polluer l'espace de noms global (ce qui est la substance avant la déclaration return)
  3. Un « espace » public de mettre des choses que vous voulez accessible aux utilisateurs de votre espace de noms (ce qui est la déclaration return)

le tout sous une forme assez lisible.

0

Il est d'une approche de programmation fonctionnelle pour la programmation orientée objet. Les variables locales dans la fonction externe (anonyme) (le constructeur) sont accessibles à toute fonction définie dans le constructeur, mais pas ailleurs, rendant les variables locales privées. Là où il diffère de l'approche purement fonctionnelle, c'est que le constructeur retourne un objet littéral plutôt qu'une autre fonction. Les variables locales sont accessibles par les fonctions internes en raison de ce que l'on appelle un closure.

l'utilisation est de créer des champs privés & méthodes, sous la forme de variables locales.

0

mais je veux une explication quant à la façon dont cela fonctionne.

Choisissons-le morceau par morceau.

function() { .... } est une syntaxe pour la fonction anonyme.
function() { .... }() définit et appelle la fonction anonyme sur la même ligne.

La valeur de retour de la fonction dans l'échantillon est un objet défini en utilisant la notation JSON (javscript Object Notation)

{ setup : .... } est un objet avec un attribut: il est appelé setup, et il arrive à être une fonction, ton cas.

donc, mystuff a obtenu la valeur de retour, qui est un objet avec une propriété (fonction) appelée setup et mystuff.setup() appelle cette fonction setup.

Maintenant, la partie intéressante est probablement comment setup appelle simplement la fonction blah, définie à l'intérieur de cette fonction anonyme englobante.

Je crois que le terme technique est ici closure (voir la section forming closures) (voir aussi la définition wikipedia)

essentiellement la fonction devient comme un module propre, avec des variables liées à elle.

Il est expliqué dans crescentfresh's answer

0

Tout d'abord, s'il vous plaît éviter cette syntaxe:

var mystuff=function(){...}(); 

Il est mauvais de codage pratique car il est pas complètement multi-navigateur que quelques navigateurs erreur ici. Habituez-vous à mettre entre parenthèses autour de la fonction comme ceci: \

var mystuff=(function(){...})(); 

Nextly, en ce qui concerne le motif. Ce modèle est plus communément appelé "encapsulation" en JavaScript. Fermetures est un autre mais peut-être plus spécifiquement, il est purement encapsulation dans ce cas.

L'encapsulation signifie simplement que certains membres sont privés. Qu'est-ce qui est privé dans ce cas? Bien la variable blah est privée dans ce cas. S'il vous plaît prenez l'habitude de procéder aux membres privés avec un soulignement pour indiquer qu'ils sont privés. C'est une bonne pratique de codage de distinguer les méthodes publiques des méthodes privées avec un trait de soulignement.

<script type="text/javascript"> 
var obj=(function(){ 
    //private members 
    var _p={};//toss all private members into a single object. 
    _p.list=[]; 
    _p.init=function(){ 
     _p.list=[]; 
    }; 

    //public members. use "this" to reference object followed by the method. 
    //however obj._p.list won't be accessible to the global scope 
    return { 
     reset:function() 
     { 
      _p.init(); 
     } 
     ,addName:function(str) 
     { 
      _p.list.push(''+str);//limit to strings 
     } 
     ,getNames:function() 
      { 
      return _p.list.slice(0);//return a clone 
      } 
     ,alertNames:function() 
      { 
      alert(this.getNames().join(",")); 
      } 
     ,getPrivateObj:function() 
      { 
      return _p; 
      } 
    }; 
})(); 

obj.alertNames(); 
obj.addName("Nandan"); 
obj.addName("Ram"); 
obj.alertNames(); 
obj.reset(); 
obj.alertNames(); 
obj.addName("Vinoth"); 
obj.addName("Kevin"); 
obj.alertNames(); 
alert(typeof obj._p);//undefined 
var privateObj=obj.getPrivateObj(); 
alert(typeof privateObj); 
alert(privateObj.list.join("|")); 
</script> 
Questions connexes