2010-04-28 3 views
11

j'ai fait quelques recherches sur le ExtJS forum concernantméthodes privées et les champs l'intérieur d'un classe étendue, et je ne pouvais pas trouver une réponse réelle à ce sujet.membres privés lors de l'extension d'une classe à l'aide ExtJS

Et quand je dis une classe étendue je veux dire quelque chose comme ceci:

Ext.ux.MyExtendedClass = Ext.extend(Ext.util.Observable, { 
    publicVar1: 'Variable visible from outside this class', 
    constructor: function(config) { this.addEvents("fired"); this.listeners = config.listeners; }, // to show that I need to use the base class 
    publicMethod1: function() { return 'Method which can be called form everywhere'; }, 
    publicMethod2: function() { return this.publicMethod1() + ' and ' + this.publicVar1; } // to show how to access the members from inside another member 
}); 

Le problème ici est que tout est public. Alors, comment puis-je ajouter une nouvelle variable o méthode dans la portée de MyExtendedClass qui ne peut pas être accédé de l'extérieur mais peut être accessible par les méthodes publiques?

Répondre

4

J'utilise quelque chose comme ce qui suit.

var toolbarClass = Ext.extend(Ext.Container, 
    { 
    /** 
    * constructor (public) 
    */ 
    constructor: function(config) 
    { 
     config = config || {}; 

     // PRIVATE MEMBER DATA ======================================== 
     var accountId = Ext.id(null, 'ls-accountDiv-'); 

     // PUBLIC METHODS ======================================== 
     this.somePublicMethod = function(){ 
     console.log(accountId); 
     }; 

... 
+0

+1 Ca marche! Mais je viens de réaliser une autre solution qui semble meilleure. Parce qu'avec votre solution, le temps de création de chaque instance sera augmenté, et je crois que le mien ne l'est pas. Je vais l'afficher maintenant, pour que les gens puissent dire si j'ai tort ou pas. –

+5

Je salue cette conversation. On peut dire que trop peu de développeurs sont préoccupés par la dissimulation de données lors du développement en JavaScript. – Upperstage

23

L'exemple suivant montre le Upper Stage way pour définir & privés privilégiés membres du public. Mais il montre aussi comment définir membres statiques privés (également appelé membres de la classe) et publics membres non privilégiés. L'utilisation de ces deux dernières au lieu des privilégiés, nous réduisons le temps d'initialisation car ils ne sont pas analysés à chaque fois que vous créez un nouvel objet de votre classe:

Ext.ux.MyExtendedClass = Ext.extend(Ext.util.Observable, 
 
    (function() { 
 
    // private static fields (can access only to scope: minimum privileges). 
 
    var privStaticVar = 0; 
 
    // private static functions (can access only to scope and arguments, but we can send them the scope by param) 
 
    var privateFunc1 = function(me) { return me.name + ' -> ClassVar:' + privStaticVar; }; 
 
    var privateFunc2 = function(me) { return me.publicMethod1() + ' InstanceVar:' + me.getPrivateVar(); }; 
 
    return { 
 
     constructor: function(config) { 
 
     // privileged private/public members (can access to anything private and public) 
 
     var privateVar = config.v || 0; 
 
     var privInstFunc = function() { privateVar += 1; }; 
 
     this.name = config.name; 
 
     this.incVariables = function(){ privInstFunc(); privStaticVar += 1; }; 
 
     this.getPrivateVar = function(){ return privateVar; }; 
 
     }, 
 
     // public members (can access to public and private static, but not to the members defined in the constructor) 
 
     publicMethod1: function() { this.incVariables(); return privateFunc1(this); }, 
 
     publicMethod2: function() { return privateFunc2(this); } 
 
    }; 
 
    }()) 
 
); 
 

 
function test() { 
 
    var o1 = new Ext.ux.MyExtendedClass({name: 'o1', v: 0}); 
 
    var o2 = new Ext.ux.MyExtendedClass({name: 'o2', v: 10}); 
 
    var s = o1.publicMethod2() + '<br>' + o1.publicMethod2() + '<br><br>' + o2.publicMethod2() + '<br>' + o2.publicMethod2(); 
 
    Ext.get("output").update(s); 
 
}
<link href="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script> 
 

 
<p>Click the button to instantiate 2 objects and call each object 2 times:</p> 
 

 
<button onclick="test();">Test</button> 
 

 
<p>You can click the button again to repeat. You'll see that the static variable keep increasing its value.</p> 
 

 
<p>&nbsp;</p> 
 
<div id="output"></div>

+4

cela est communément appelé le module de motif, vous pouvez le trouver écrit sur le blog YUI – seanmonstar

+1

Je suis convaincu que les * privStaticVar *, * privateFunc1 * & * privateFunc2 * seront analysés une seule fois (et avec les tests que j'ai fait, je obtenu les bons résultats). Parce que le mot-clé 'new' n'affectera pas les membres de ce modèle de module, car ils sont analysés pendant que Ext.extend est exécuté (bien avant que le constructeur ou toute autre méthode entre en scène). En outre, les modèles de modules sont des singletons, donc je pense que cela l'expliquerait aussi. –

+0

Je suis d'accord; désolé pour le commentaire précédent. – Upperstage

1

@Protron: Votre réponse est impressionnant! Merci! Je suis allé un peu plus loin et j'ai créé ma propre méthode d'extension de classe. De cette façon, nous pouvons économiser un peu de "()", et nous avons le "Ext.reg" appelé gratuitement. [] s

Questions connexes