जावास्क्रिप्ट में इंटरैक्टिव ऑब्जेक्ट्स कहां रखें?

Question

मैं एक वेब आधारित आवेदन जहाँ उपयोगकर्ता स्क्रीन पर "वस्तुओं" साथ सूचना का आदान (jQuery और एसवीजी के बहुत सारे के साथ यानी जावास्क्रिप्ट) बना रहा हूं (DIVs कि, चारों ओर draged किया जा सकता है आकार दिया और जुड़े arraows से के बारे में सोच - एक सदिश की तरह ड्राइंग प्रोग्राम या एक ग्राफिकल प्रोग्रामिंग भाषा)।

प्रत्येक "ऑब्जेक्ट" में व्यक्तिगत जानकारी होती है लेकिन तत्वों के "वर्ग" से संबंधित सभी लोग यह स्पष्ट करते हैं कि इस एप्लिकेशन को ओओपी दृष्टिकोण का उपयोग करके प्रोग्राम किया जाना चाहिए।

लेकिन मैं कहाँ "वस्तुओं" सबसे अच्छा की दुकान करते हैं?

• क्या मुझे सभी (जेएस मूल) वस्तुओं के साथ वैश्विक संरचना ("रजिस्ट्री") बनाना चाहिए और उन्हें "स्वयं को डीओएम पर खींचना" चाहिए?
• या मैं इस तरह की संरचना से बचने और मेरी वस्तुओं के रूप में (प्रासंगिक) डोम नोड्स के बारे में सोच और .data() उन्हें भी उतना ही प्रासंगिक डेटा संलग्न करना चाहिए?

पहला दृष्टिकोण बहुत एमवीसी है - लेकिन मुझे लगता है कि सभी ईवेंट हैंडलर का लगाव गैर तुच्छ होगा।

दूसरा दृष्टिकोण घटनाओं को एक छोटे से तरीके से संभाल लेगा और यह डुप्लिकेट संरचना नहीं बनाता है, लेकिन मुझे लगता है कि सामान्य ओओ सामान (विधियों की तरह) अधिक जटिल होगा।

आप क्या सिफारिश करते हैं? मुझे लगता है कि उत्तर जावास्क्रिप्ट और एसवीजी विशिष्ट होगा क्योंकि "सामान्य" प्रोग्रामिंग भाषाओं में इतनी अत्यधिक संगठित आउटपुट "कैनवास" नहीं है।

Answer 1

रहे ऐसी परिस्थितियों में अतीत में (मैंने इसे लगभग 5 बार मारा है) मैं हमेशा जेएस (वैश्विक "वर्ग", गैर-वैश्विक डेटा संरचनाओं के रूप में उचित) में ओओपी बना देता हूं। प्रत्येक वर्ग में आमतौर पर .g संपत्ति होती है जो इसके ग्राफिकल प्रतिनिधित्व को इंगित करती है। (और इससे पहले कि jQuery के .data मैं वापस वर्ग उदाहरण की ओर इशारा करते डोम उदाहरणों, जब ईवेंट हैंडलर्स या जैसे अन्य तरीके से देखने की जरूरत है। पर expando गुण प्रयुक्त)

मैं भी MVC के रूप में इस के बारे में सोच है, लेकिन की निश्चित रूप से लाइनों को धुंधला करना आसान होता है (या उन्हें अलग रखने के लिए कठिन) जब आपके पास एक एकल जेएस दुभाषिया है जो आपके मॉडल को संग्रहीत कर रहा है, नियंत्रक के रूप में कार्य कर रहा है, और दृश्य में हेरफेर कर रहा है।

मुझे नहीं लगता कि इस प्रणाली के तहत ईवेंट हैंडलर जोड़ना कठिन है: एक नई वस्तु (कोड में) को तत्काल करने में इसके प्रतिनिधित्व को तत्काल करने के लिए ज़िम्मेदार है, और अपने स्वयं के ईवेंट हैंडलर को अटैचमेंट करने के लिए जिम्मेदार है जो इंस्टेंस-आधारित कॉलबैक को ट्रिगर करते हैं। इस कोड को राज्य (जैसे selected) के आधार पर तार्किक घटनाओं में इनपुट-विशिष्ट घटनाओं (जैसे mousedown) मैप करता है।अन्य कोड उदाहरणों पर इन तार्किक घटनाओं के लिए पंजीकृत हैं।

Answer 2

मैं JSON (ऑब्जेक्ट रजिस्ट्री के रूप में) का उपयोग करता हूं और इसे अपने स्क्रिप्ट ब्लॉक में रखता हूं। फिर आप बिना पार्सिंग के डेटा को आसानी से स्टोर और पुनर्प्राप्त कर सकते हैं।

Answer 3

आप शायद "ऑब्जेक्ट्स" को परिभाषित करने के लिए JSON का उपयोग करना चाहेंगे। उदा।

[{ 
    type: rectangle, 
    coordinates: {x: 0, y: 0}, 
    size: {width: 100, height: 100} 
},{ 
    type: arrow, 
    start: {x: 150, y: 150}, 
    end: {x: 100, y: 100} 
}] 

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

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