model view controller - एक्स्ट जेएस के एमवीसी एक विरोधी पैटर्न है?




model-view-controller extjs (4)

मैं 25 डेवलपर्स की एक टीम में काम करता हूं हम सेन्का के एक्स्टजेएस एमवीसी पैटर्न का उपयोग करते हैं लेकिन हमें विश्वास है कि एमवीसी की उनकी परिभाषा भ्रामक है शायद हम उनके एमवीसी को एक विरोधी-पैटर्न भी कहते हैं

एएमएआईके, एमवीसी नियंत्रक में केवल नाम या दृश्य के पथ को जानता है, और दृश्य के आंतरिक संरचना पर कोई ज्ञान नहीं है। उदाहरण के लिए, यह नियंत्रक की ज़िम्मेदारी नहीं है, चाहे ग्राहकों की सूची को एक सरल ड्रॉप डाउन, या एक स्वत: पूर्ण रूप से दिखाया जाए।

हालांकि, एक्सटेंशन जेएस के एमवीसी में, नियंत्रक को देखने के तत्वों के प्रतिपादन को पता होना चाहिए, क्योंकि नियंत्रक उन तत्वों में घुसता है, और उनकी घटनाओं को सुनता है। इसका मतलब यह है कि यदि दृश्य परिवर्तन का एक तत्व (उदाहरण के लिए एक बटन एक लिंक बन गया है), तो नियंत्रक में प्रासंगिक चयनकर्ता को भी बदलना चाहिए। दूसरे शब्दों में, नियंत्रक को देखने के आंतरिक ढांचे के लिए कसकर युग्मित किया जाता है।

क्या इस वजह से एंटी-पैटर्न के रूप में एक्स्ट जेएस के एमवीवी को निंदा करना स्वीकार्य है? क्या हम सही हैं कि नियंत्रक के विचारों के लिए युग्मित हैं?


बेशक नियंत्रक किसी तरह से विचार करने के लिए बाध्य हैं। आपको अपने विचारों में बिल्कुल तत्वों को लक्षित करने की आवश्यकता होती है जिन्हें आप सुनना चाहते हैं।

उदाहरण के लिए: उस बटन क्लिक या उस फॉर्म तत्व परिवर्तन को या उस कस्टम घटक / ईवेंट को सुनें

एमवीसी का लक्ष्य घटकों को घटाना और पुन: प्रयोज्यता और सेंचा एमवीसी के लिए कमाल है। @ बमौसाक्यू के अनुसार, आपको एमवीसी पैटर्न का पूरा फायदा उठाने के लिए दृश्य नियंत्रकों (दृश्य / विगेट्स खुद के लिए अंतर्निहित) और अनुप्रयोग नियंत्रक (शीर्ष स्तर के विचारों में जोड़-तोड़) के अलग होने में सावधान रहना होगा। और यह कुछ स्पष्ट नहीं है जब आप http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture पढ़ सकते हैं अपने एमवीसी दृष्टिकोण को रिफैक्टर करें, अलग-अलग नियंत्रक बनाएं, कस्टम घटक बनाएं, और इसका लाभ लेने के लिए पूर्ण एक्स्टजेएस एमवीसी आर्किटेक्चर को गले लगाएं।

सेन्चा के दृष्टिकोण आईएमएचओ में मामूली समस्या है, एमवीसी refs सिस्टम वास्तव में काम नहीं करता जब आपके पास एक आवेदन में एक ही विचार के कई उदाहरण हैं उदाहरण: यदि आपके पास एक ही घटक के कई उदाहरणों के साथ एक टैब पैनेल है, तो रिफ सिस्टम टूट गया है क्योंकि यह हमेशा डोम में पाया पहला तत्व लक्षित करेगा ... वहां काम करनेवाले और एक परियोजना को ठीक करने का प्रयास किया गया है लेकिन मुझे उम्मीद है कि यह जल्दी ही जल्दी से परिष्कृत हो जाओ


मुझे लगता है कि यदि आप सीनचा आर्किटेक्ट का उपयोग दृश्यों का निर्माण करने के लिए करते हैं तो उस दृश्य से अपना खुद का दृश्य बनाने के लिए इनहेरिट करें अब यह दृश्य किसी भी घटना को हुक करने और सार्थक घटनाओं को बढ़ाने के लिए जिम्मेदार हो सकता है

यह सिर्फ एक विचार है ...

//Designer Generated
Ext.define('MyApp.view.MainView', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.mainview',    
    initComponent: function() {
    }
});


//Your View Decorator
Ext.define('MyApp.view.MainView', {
    extend: 'MyApp.view.MainViewEx',
    alias: 'widget.mainviewex',    
    initComponent: function() {
    this.mon(this, 'rowselect', function(){
        this.fireEvent('userselected', arguments);
    }, this);
    }
});

मैं एक्स्टजेएस 4 के एमवीसी रोज़ का इस्तेमाल करता हूं। स्पेगेटी कोड के बजाय, मेरे पास एक सुरुचिपूर्ण एमवीसी ऐप है जो कंसने से अलग कंसेंस के अलग से परिभाषित किया गया है और यह बनाए रखने और विस्तार करने के लिए हास्यास्पद रूप से सरल है। हो सकता है कि आपके कार्यान्वयन को थोड़ा-सा करने की आवश्यकता है ताकि एमवीसी दृष्टिकोण का पूरा लाभ उठाया जा सके।


मैं वर्तमान में सेन्का ट्रेनिंग से फास्ट ट्रैक के लिए ExtJS 4 से गुजर रहा हूं। मेरे पास एक्स्टजेएस (एक्स्टजेएस 2.0 के बाद से) में एक मजबूत पृष्ठभूमि है और यह देखने के लिए बहुत उत्सुक था कि कैसे एमवीसीएल एक्स्टजेएस 4 में लागू किया गया था।

अब, पहले, जिस तरह से मैं एक नियंत्रक की तरह अनुकरण करता हूं, वह मुख्य कंटेनर की जिम्मेदारी को सौंपना होगा। निम्नलिखित उदाहरण की कल्पना करें ExtJS 3:

Ext.ns('Test');

Test.MainPanel = Ext.extend(Ext.Container, {
    initComponent : function() {
        this.panel1 = new Test.Panel1({
            listeners: {
                firstButtonPressed: function(){
                    this.panel2.addSomething();
                },
                scope: this
            }
        });
        this.panel2 = new Test.Panel2();

        this.items = [this.panel1,this.panel2];

        Test.MainPanel.superclass.initComponent.call(this);
    }

});

Test.Panel1 = Ext.extend(Ext.Panel, {
    initComponent : function() {
        this.addEvents('firstButtonPressed');

        this.tbar = new Ext.Toolbar({
           items: [{
             text: 'First Button',
               handler: function(){
                   this.fireEvent('firstButtonPressed');
               }
           }] 
        });

        Text.Panel1.superclass.initComponent.call(this);
    }
});

Test.Panel2 = Ext.extend(Ext.Panel, {
    initComponent : function() {
        this.items = [new Ext.form.Label('test Label')]

        Test.Panel2.superclass.initComponent.call(this);
    },

    addSomething: function(){
        alert('add something reached')
    }
});

जैसा कि आप देख सकते हैं, मेरा मेन पैनेल (इस तथ्य के अलावा जो दोनों पैनलों को पकड़ रहा है) भी घटनाओं को नियुक्त करता है और इस प्रकार दो घटकों के बीच संचार बना रहा है, इस प्रकार नियंत्रक के समान अनुकरण

एक्स्टजेएस 4 में एमवीसी सीधे इसमें कार्यान्वित हुआ है। क्या वास्तव में मुझे हड़बड़ा था कि जिस तरह से नियंत्रक वास्तव में घटकों को प्राप्त करता है QuerySelector के माध्यम से है जो मेरी राय में बहुत त्रुटि के लिए प्रवण है चलो देखते हैं:

Ext.define('MyApp.controller.Earmarks', {
    extend:'Ext.app.Controller',
    views:['earmark.Chart'],


    init:function () {
        this.control({
             'earmarkchart > toolbar > button':{
                click:this.onChartSelect
            },
            'earmarkchart tool[type=gear]':{
                click:this.selectChart
             }
        });
    }
});

इसलिए जैसा कि हम यहां देख सकते हैं, जिस तरह से नियंत्रक earmarkchart बटन और उपकरण के बारे में पता है, चयनकर्ताओं के माध्यम से है आइए अब सोचें कि मैं अपने ख़ास ख़रीदना में लेआउट बदल रहा हूं और वास्तव में टूलबार के बाहर बटन को स्थानांतरित कर रहा हूं। अचानक मेरा आवेदन टूटा हुआ है, क्योंकि मुझे हमेशा यह जानना होगा कि लेआउट बदलने से उसके साथ जुड़े नियंत्रक पर असर पड़ सकता है।

कोई कह सकता है कि मैं इसके बजाय itemId का उपयोग कर सकता हूँ, लेकिन फिर मुझे पता होना चाहिए कि अगर मैं एक घटक को हटा देता हूं तो मुझे यह पता लगाना चाहिए कि क्या उस मद आईडी के लिए मेरे नियंत्रकों में कोई छिपा हुआ संदर्भ है, और यह तथ्य भी है कि मैं नहीं कर सकता प्रति माता पिता के घटक के अनुसार एक ही आइटम है, इसलिए यदि मेरे पास एक पैनल 1 और 'ग्रिड 1' में एक 'testId' नामक एक आइटम है तो मुझे अभी भी चुनना होगा अगर मैं चाहता हूं कि आइटम 1 पैनल से या ग्रिड 1 से।

मैं समझता हूं कि प्रश्न बहुत शक्तिशाली है क्योंकि यह आपको बहुत अधिक लचीलापन देता है, लेकिन यह लचीलापन मेरी राय में बहुत ही उच्च कीमत पर आता है, और अगर मेरे पास 5 लोगों की एक टीम है जो उपयोगकर्ता इंटरफेस विकसित कर रहा है और मुझे इस अवधारणा को समझाने की आवश्यकता है I मेरे हाथों को आग में लगाएंगे कि वे इससे पहले जितने बिंदु का उल्लेख करेंगे I

इस पर आपकी समग्र राय क्या है? क्या यह घटनाओं के साथ किसी तरह से संवाद करना आसान होगा? मेरा कंट्रोलर वास्तव में घटनाओं की अपेक्षाओं के बारे में क्या जानता है, इसका मतलब यह है कि कोई भी घटना की घटना को ठीक कर सकता है। नियंत्रक और संबंधित नियंत्रक इसे सभी प्रश्नों की समस्या के बजाय मिलेंगे।