2010-04-28 17 views
11

का उपयोग कर विस्तार मैं ExtJS मंचनिजी तरीकों और क्षेत्रों एक विस्तारित वर्ग अंदर के बारे में पर कुछ शोध किया है, और मैं यह करने के लिए किसी भी असली जवाब नहीं मिल सका।निजी सदस्यों जब एक वर्ग ExtJS

और जब मैं कहता हूँ एक विस्तारित वर्ग मैं कुछ इस तरह मतलब है:

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 
}); 

समस्या यहां है कि सब कुछ सार्वजनिक है। तो, मैं के दायरे में एक नया चर ओ विधि कैसे जोड़ूं MyExtendedClass जिसे बाहर से नहीं पहुंचा जा सकता है लेकिन सार्वजनिक तरीकों से इसका उपयोग किया जा सकता है?

उत्तर

4

मैं निम्नलिखित की तरह कुछ उपयोग करता हूं।

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 यह काम करता है! लेकिन मैंने अभी एक और समाधान महसूस किया जो बेहतर लगता है। क्योंकि आपके समाधान के साथ, प्रत्येक उदाहरण का निर्माण समय बढ़ जाएगा, और मेरा मानना ​​है कि मेरा नहीं है। मैं इसे अभी पोस्ट करने जा रहा हूं, इसलिए लोग कह सकते हैं कि मैं गलत हूं या नहीं। –

+5

मैं इस वार्तालाप का स्वागत करता हूं। तर्कसंगत रूप से बहुत कम डेवलपर्स जावास्क्रिप्ट में विकसित होने पर डेटा छिपाने के बारे में चिंतित हैं। – Upperstage

23

निम्न उदाहरण विशेषाधिकार प्राप्त निजी & सार्वजनिक सदस्यों परिभाषित करने के लिए Upper Stage way को दर्शाता है। लेकिन यह भी दिखाता है कि कैसे निजी स्थिर सदस्यों परिभाषित करने के लिए, और सार्वजनिक विशेषाधिकार रहित सदस्यों (भी वर्ग के सदस्यों कहा जाता है)। इन पिछले 2 के बजाय विशेषाधिकार प्राप्त लोगों का उपयोग करना, हम प्रारंभ समय कम हो जाएगा के रूप में वे हर बार जब आप अपने वर्ग के एक नई वस्तु बनाने पार्स नहीं कर रहे हैं:

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

इसे सामान्यतः मॉड्यूल पैटर्न कहा जाता है, आप इसे यूयूआई ब्लॉग – seanmonstar

+1

पर लिखे गए हैं। मुझे विश्वास है कि * निजी स्टेटिक * * * निजी फ़नक 1 * और * प्राइवेटफनसी 2 * केवल एक बार पार्स किया जाएगा (और मैंने जो परीक्षण किए हैं, सही परिणाम मिला)। चूंकि 'नया' कीवर्ड इस मॉड्यूल पैटर्न के सदस्यों को प्रभावित नहीं करेगा, क्योंकि Ext.extend निष्पादित होने पर पार्स किया गया है (कन्स्ट्रक्टर या किसी अन्य विधि को दृश्य में आने से पहले)। इसके अलावा, मॉड्यूल पैटर्न सिंगलेट हैं, इसलिए मुझे लगता है कि यह भी समझाएगा। –

+0

मैं सहमत हूं; पहले टिप्पणी के लिए खेद है। – Upperstage

1

@Protron: आपका जवाब है बहुत बढ़िया! धन्यवाद! मैं थोड़ी और आगे गया और अपनी खुद की कक्षा विस्तारक विधि बनाई।

/** 
* Instead of call Ext.extend method to create your new class extensions, you can use 
* My.extend. It is almost the same thing, but you pass a function as body for your new class, not 
* an object. Ex.: 
* 
* MyNewExtCompoment = My.extend(Ext.Compoment, function() { 
*  var myPrivateVar = 0; 
* 
*  //private 
*  function reset() { 
*  myPrivateVar = 0; 
*  } 
* 
*  //public 
*  function add(value) { 
*  try{ 
*   myPrivateVar = myPrivateVar + value; 
*  } catch(err){ 
*   reset(); 
*  } 
*  return myPrivateVar; 
*  } 
* 
*  return { 
*   add: add 
*  } 
* }, 'ux-my-new-component'); 
* 
* @param extendedClass my extended class 
* @param newClassBodyFunction my new class body 
* @param newClassXtype (optional) the xtype of this new class 
*/ 
My.extend = function(extendedClass, newClassBodyFunction, newClassXtype) { 
    var newClass = Ext.extend(extendedClass, newClassBodyFunction.call()); 
    if(newClassXtype) { 
     Ext.reg(newClassXtype, newClass); 
    } 
    return newClass; 
} 

इस तरह हम कुछ अतिरिक्त "()" बचा सकते हैं, और हमारे पास "Ext.reg" मुफ्त में कहा जाता है। [] s

संबंधित मुद्दे