extjs
आम नुकसान और सर्वोत्तम अभ्यास

चिंताओ का विभाजन

और भी बुरा

ViewController:

// ...
myMethod: function () {
    this.getView().lookup('myhappyfield').setValue(100);
}
//...

राय:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
]
//...

बेहतर

ViewController:

// ...
myMethod: function () {
    this.getView().setHappiness(100);
}
//...

राय:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
],
setHappiness: function (happiness) {
    this.lookup('myhappyfield').setValue(happiness);
}
//...

व्याख्या

इस उदाहरण में, कोड के दो स्निपेट समान कार्य करते हैं। हालाँकि, इस घटना में myhappyfield के संदर्भ में परिवर्तन या 'खुशी' को इंगित करने की कार्यप्रणाली में काफी बदलाव होता है, पूर्व दृष्टिकोण के लिए संदर्भ का उपयोग करने वाले प्रत्येक स्थान में परिवर्तन की आवश्यकता होती है।

अलग-अलग चिंताओं (बाद के उदाहरण) के साथ, दृश्य 'खुशी' को संशोधित करने के लिए एक सार तरीका प्रदान करता है जो अन्य वर्गों का उपयोग कर सकता है। क्वेरी और घटक हेरफेर को एक स्थान पर रखा जाता है (दृश्य परिभाषा के साथ ही सही!) और अमूर्त पद्धति में कॉल को बदलने की आवश्यकता नहीं है।

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

ओवरराइड बनाम बढ़ाएँ

ओवरराइड:

ओवरराइड फ़ाइल:

Ext.define('MyApp.override.CornField',
    override: 'Ext.form.field.Text',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

एप्लिकेशन में उपयोग करें:

{
    xtype: 'textfield'
}

एक्सटेंशन:

ओवरराइड फ़ाइल:

Ext.define('MyApp.form.field.CornField',
    extend: 'Ext.form.field.Text',
    alias: 'widget.cornfield',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

एप्लिकेशन में उपयोग करें:

{
    xtype: 'cornfield'
}

व्याख्या

एक्सटीजेएस मौजूदा कक्षाओं के व्यवहार को बदलने के लिए दो मुख्य तरीके प्रदान करता है: उन्हें विस्तारित करना, और उन्हें ओवरराइड करना। प्रत्येक के लाभ और नुकसान हैं जिनका उपयोग करने से पहले उन पर विचार किया जाना चाहिए।

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

एक्सटेंशन के लिए अच्छे उपयोग के मामलों के उदाहरणों में विशेष व्यवहार के साथ कस्टम फॉर्म फ़ील्ड, विशेष मोडल और सामान्य रूप से कस्टम घटक शामिल हैं।

कक्षा को ओवरराइड करने से मौजूदा कक्षा के व्यवहार में बदलाव होता है। ओवरराइड में कॉन्फ़िगरेशन और विधियाँ अपने मूल वर्ग समकक्षों को पूरी तरह से बदल देती हैं, जिससे नए डिफ़ॉल्ट कॉन्फ़िगरेशन और व्यवहार बनते हैं जो पूरे अनुप्रयोग में आबाद होते हैं। ओवरराइड को उनके उपयोग की विनाशकारी प्रकृति के कारण संयम से इस्तेमाल किया जाना चाहिए; एक विस्तारित वर्ग आम तौर पर माता-पिता की श्रेणी को कम करते हुए समान लाभ प्रदान कर सकता है।

हालांकि, ओवरराइड कुछ स्थितियों में लाभ प्रदान कर सकते हैं। अच्छे उपयोग के मामलों में मौजूदा कक्षाओं में कीड़े को ठीक करना, प्रॉक्सी व्यवहार को संशोधित करना, अनुरोधों की अतिरिक्त जानकारी, जैसे कि टोकन या सत्र डेटा को संशोधित करना, और आम तौर पर एक विशिष्ट व्यवहार को एक अनुप्रयोग में डिफ़ॉल्ट व्यवहार के लिए मजबूर करना शामिल है।

बग फिक्स से अलग ओवरराइड्स

एक्सटीजेएस में, आप ढांचे के लगभग किसी भी तरीके को ओवरराइड कर सकते हैं और इसे अपने स्वयं के साथ बदल सकते हैं। यह आपको एक्स्टस स्रोत कोड को सीधे संशोधित किए बिना मौजूदा कक्षाओं को संशोधित करने की अनुमति देता है।

कभी-कभी, आप एक मौजूदा वर्ग को बढ़ाना चाहते हैं या एक वर्ग पर एक डिफ़ॉल्ट डिफ़ॉल्ट संपत्ति प्रदान कर सकते हैं।

उदाहरण के लिए, आप अपने सभी मॉडल डेटा फ़ील्ड को शून्य मानों की अनुमति देना चाह सकते हैं।

Ext.define('MyApp.override.DataField', {
  override: 'Ext.data.field.Field',
  allowNull: true
});

अन्य मामलों में, आपको फ्रेमवर्क में टूटी हुई चीज़ को ठीक करना होगा।

यहाँ प्रलेखन के साथ बग फिक्स का एक उदाहरण है। ध्यान दें कि क्लासनाम में "ओवरराइड" के बजाय "फिक्स" है। वास्तविक नाम महत्वपूर्ण नहीं है, लेकिन अलगाव है।

Ext.define('MyApp.fix.FieldBase', {
  override: 'Ext.form.field.Base',
  /**
   * Add a description of what this fix does.
   * Be sure to add URLs to important reference information!
   *
   * You can also include some of your own tags to help identify
   * when the problem started and what Sencha bug ticket it relates to.
   *
   * @extversion 5.1.1
   * @extbug EXTJS-15302
   */
  publishValue: function () {
    this.publishState('value', this.getValue());
  }
});

अब जब एक्सटीजेएस के अगले संस्करण में अपग्रेड करने का समय आ गया है, तो केवल एक जगह है जिसे आपको यह देखने की आवश्यकता है कि आपके कौन से बग फिक्स को हटाया जा सकता है।