बहुलक में निजी गैर स्थैतिक चर?

Question

पॉलिमर में निजी गैर स्थैतिक चर कैसे हो सकता है?

में:

<polymer-element name="component-one"> 
    <script> 

     Polymer('component-one', { 
     internalState = 1,  
     ready() { 
       this.anotherInternalState = 1; 
      } 
      /* more variables and functions */ 
     }); 

    </script> 

</polymer-element> 

दोनों internalState और anotherInernalState बाहर के संपर्क में हैं (जैसे कुछ के माध्यम से जैसे सुलभ:

document.querySelector('component-one').internalState 

(जब बाहर से internalState बदलते कौन सा अवांछनीय हो सकता है घटक अस्थिर बनाता है।)

जहां:

<polymer-element name="component-two"> 
    <script> 

    (function() { 

     var internalState = 1; 


     Polymer('component-two', { 
      /* some variables and functions */ 
     }); 
    })(); 

    </script> 

</polymer-element> 

आंतरिक स्तर बाहरी से छिपा हुआ है लेकिन यह स्थिर है और घटक के सभी उदाहरणों में साझा किया गया है।

क्या पॉलिमर ऑब्जेक्ट के अंदर एक निजी गैर स्थैतिक चर रखने का कोई तरीका है?

Answer 1

यह पॉलिमर प्रश्न की तुलना में एक शुद्ध जावास्क्रिप्ट प्रश्न है। ईएस 5 के रूप में जावास्क्रिप्ट में कोई 'निजी उदाहरण सदस्य' नहीं हैं, हालांकि ES6 कुछ नए टूल लाता है।

मेरा सुझाव अंडरस्कोर (_internalState) के साथ निजी आवृत्ति चर के पूर्व पुराने सम्मेलन का उपयोग करना है।

अन्यथा, आपको मानचित्र और बंद होने के साथ मुश्किल होनी होगी।

Answer 2

यहाँ दृष्टिकोण मैं ले लिया है या नहीं:

<script type="text/javascript">   
    (function() { 
     var privateStatic = Math.random(); 

     function ContactCard(component) { 
      var mouseoverTimer; 
      var privateInstance = Math.random(); 

      component.addEventListener('mouseenter', function() { 
       mouseoverTimer = setTimeout(function() { 
        alert(privateStatic); 
        alert(privateInstance); 
       }, 250); 
      }); 

      component.addEventListener('mouseleave', function() { 
       clearTimeout(mouseoverTimer); 
      }); 

      return { 

      }; 
     }; 

     Polymer({ 
      ready: function() { 
       new ContactCard(this); 
      } 
     }); 
    })(); 
</script> 

मैं उदाहरण में यह नहीं दिखाते हैं, लेकिन आप अभी भी छाया जड़ में आईडी के आधार पर तत्वों तक पहुँचने का component.$.someElementId तरीके से उपयोग कर सकते हैं।

इसके अलावा: मुझे लगता है कि प्रोग्रामिंग की यह शैली आपको पॉलिमर से थोड़ा और आगे घटाने की अनुमति देती है यदि आप उस तरह की चीज में हैं। आप वास्तव में component.shadowRoot.getElementById('someElementId') और component.shadowRoot.querySelector('#someElementId') के साथ ही अन्य रणनीति का उपयोग कर सकते हैं यदि आप चाहें तो और वे Chrome के अलावा अन्य ब्राउज़रों में काम करेंगे

Answer 3

वैसे ही जैसे, प्रोटोटाइप कार्यों में से एक में मूल्य काम के लिए कदम (IE9 और ऊपर भी शामिल है।):

<polymer-element name="component-two"> 
    <script> 

     (function() { 

      var internalState; 

      Polymer('component-two', { 

       ready: function() { 
        internalState = 1; // Replace static value with something instance specific 
       } 
      }); 
     })(); 

    </script> 
</polymer-element> 

Answer 4

ES6 जहां प्रतीकों में, आप प्रतीकों का उपयोग कर

<polymer-element name="my-element"> 
    <script type="text/javascript">   
     (function() { 
      // visible to all my-element instances 
      var privateKey = Symbol('Symbol description'); 

      Polymer({ 
       ready: function() { 
        // initialize object containing private properties 
        this[privateKey] = {}; // only you can touch this 

        // only those with access to 'privateKey' can can access 
        // your new ContactCard 
        this[privateKey].contactCard = new ContactCard(this); 
       }, 
       // public method 
       publicMethod: function() { 

        // accessing private data 
        doSomethingWith(this[privateKey].contactCard); 
       } 
      };); 
     })(); 
    </script> 
</polymer-element> 

कर सकते हैं। इससे आपके तत्व के उपयोगकर्ताओं को आपकी पसंद के कुछ डेटा तक पहुंचने से रोका जाना चाहिए। चूंकि सभी उदाहरण कुंजी देख सकते हैं, डेटा अभी भी आपके तत्व के सभी उदाहरणों के लिए दृश्यमान है। अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Answer 5

आपको अपने तत्व के प्रत्येक उदाहरण के लिए एक निजी स्थिर संदर्भ बनाए रखना होगा। दस्तावेज़ में some hints हैं कि यह कैसे करें।सब एक साथ अधिक

var instances = [], contexts = []; 
Polymer(/* ... */); 
function getPrivateContext(instance){ 
    return contexts[instances.indexOf(instance)]; 
} 

और यह तार अप:

var instances = []; 
Polymer('foo-bar', { 
    // ... 
    attached: function() { 
     instances.push(this); 
    }, 
    detached: function(){ 
     instances = instances.filter(function(instance){ 
      return instance !== this; 
     }.bind(this)); 
    }, 
    // ... 
}); 

तो फिर तुम एक निजी विधि जोड़ने के अपने उदाहरण के निजी संदर्भ के लिए उपयोग पाने के लिए कर सकते हैं: सबसे पहले मैं जीना उदाहरणों का ट्रैक रखने के साथ शुरू होता है सुंदरता:

var instances = []; 
Polymer('foo-bar', { 
    // ... 
    attached: function() { 
     instances.push({ 
      element: this, 
      context: {} 
     ); 
    }, 
    detached: function(){ 
     instances = instances.filter(function(instance){ 
      return instance.element !== this; 
     }.bind(this)); 
    }, 
    // ... 
    whatever: function(){ 
     var privateThis = private(this); 
    } 
}); 
function private(element){ 
    return instances.filter(function(instance){ 
     return instance.element === element; 
    })[0].context; 
} 

इसका परीक्षण नहीं किया गया है लेकिन इसे काम करना चाहिए।