एक पेड़ को प्रदर्शित करने के लिए एक सरल टाइपस्क्रिप्ट घटक

एक छोटे से वेब-प्रोजेक्ट पर काम करने की प्रक्रिया में, मुझे पेज पर तत्वों के एक पेड़ को प्रदर्शित करने के लिए एक घटक की आवश्यकता थी। घटक को आपको पेड़ के नोड्स का विस्तार / पतन करने की अनुमति देनी चाहिए, एक तत्व पर क्लिक करने की प्रक्रिया करनी चाहिए, पेड़ में नए नोड जोड़ना चाहिए, सामान्य रूप से, सबसे बुनियादी ट्रीव्यू फ़ंक्शन प्रदान करना चाहिए।

घटक का उपयोग करने के लिए स्थितियां बेहतर - आधुनिक (IE9 +) ब्राउज़रों के लिए "आम तौर पर स्वीकार किए जाते हैं" से कुछ अलग हैं, रनटाइम वातावरण के रूप में उपयोग किया जाएगा (वेब ​​परियोजना का उपयोग पूरी तरह से नियंत्रित आंतरिक नेटवर्क के भीतर किया जाना चाहिए)। एक अन्य बिंदु वह प्लेटफॉर्म है जिसके आधार पर सर्वर पार्ट को विकसित किया जा रहा है। यह ASP.NET MVC है, जिसका अर्थ है कि यह वांछनीय है कि घटक को एक NuGet पैकेज के रूप में वितरित किया जाए, जो ASP.NET MVC एप्लिकेशन की विशिष्ट निर्देशिका संरचना के अनुकूल है।

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


इस लेखन के समय, इंटरनेट पर आप तत्वों के पेड़ को प्रदर्शित करने के लिए छह सबसे लोकप्रिय घटक पा सकते हैं।

1. jsTree पिछले साल की चर्चा के बाद jsTree पर habrahabr को देखते हुए, कुछ डेवलपर्स डायनाट्री पसंद करते हैं।
2. jqTree यह सबसे सुखद छाप बनाता है। शायद अच्छे डिजाइन और विस्तृत प्रलेखन के कारण।
3. jQuery ट्री व्यू प्लगइन । लेखक रिपोर्ट करता है कि परियोजना अब सक्रिय रूप से विकसित नहीं हो रही है और jqTree का उपयोग करने की सिफारिश करती है।
4. Dynatree ।
5. dhtmlxTree
6. dTree

कुछ निष्कर्ष।

• पुराने ग्राहकों का समर्थन करने के लिए सभी को ओवरहेड लागत की विशेषता है।
• पहले चार काम करने के लिए jquery की आवश्यकता होती है। पांचवां अपने ढांचे का उपयोग करता है। केवल उत्तरार्द्ध आत्मनिर्भर है।
• इसके अलावा, बाद वाला एक अपेक्षाकृत प्राचीन "डायनासोर" (2003) है और यह केवल ज़िप संग्रह के रूप में उपलब्ध है।
• केवल पहले चार में सार्वजनिक संस्करण नियंत्रण है। इसी समय, GitHub पर केवल पहले तीन रिपॉजिटरी पोस्ट किए गए हैं। डायनाट्री रिपॉजिटरी गूगल कोड पर स्थित है। यह ध्यान दिया जाना चाहिए कि, जाहिरा तौर पर, डायनाट्री फैंकीट्री परियोजना में विकसित हो रही है, जो पहले से ही गिटहब पर स्थित है ।
• किसी भी परियोजना में नूगेट पैकेज शामिल नहीं है।

पेशेवरों और विपक्षों का वजन करने के बाद, मैंने अपनी विशेषताओं के साथ अपनी बाइक का आविष्कार करने का फैसला किया: पुराने ब्राउज़र का समर्थन किए बिना ASP.NET MVC और विज़ुअल स्टूडियो 2012 पर आधारित मानक एप्लिकेशन टेम्पलेट के लिए सबसे सरल, अनुकूल। बाइक का आविष्कार किया गया था। इसकी विशिष्ट विशेषताएं हैं:

• टाइपस्क्रिप्ट और लेस के आधार पर कार्यान्वयन,
• कम्पोजिट टेम्पलेट के अनुसार पेड़ सूचना मॉडल के साथ काम करें।

CSS नियमों को अलग करने के लिए, एक सरल लेकिन, मेरी राय में, सबसे सही दृष्टिकोण का उपयोग किया जाता है।

1. नाम स्थान के अनुरूप वर्ग नाम पेड़ के कंटेनर तत्व में जोड़ा जाता है।
2. घटक के लिए सभी सीएसएस नियमों के चयनकर्ता संदर्भ- बच्चे हैं , जहां पिछले पैराग्राफ से वर्ग को केवल आवश्यक मूल माता-पिता के रूप में निर्दिष्ट किया गया है।

इस प्रकार, सीएसएस नियम प्रत्येक तत्व के लिए एक विशेष वर्ग बनाए बिना टैग चयनकर्ताओं के आधार पर बनाया जा सकता है। LESS का उपयोग करने से ऐसे CSS नियम सुंदर दृश्य के लिए स्रोत कोड बन जाते हैं।

कम	सीएसएस
.resnyanskiy-tree > ul.container { border: 1px dotted gray; font-family: Tahoma; font-size: 10pt; padding: 1px; li { list-style-type: none; background-image: url(images/vline.png); background-repeat: repeat-y; ul { padding-left: 16px; } span { span { height: 16px; } } ... }	.resnyanskiy-tree > ul.container { border: 1px dotted gray; font-family: Tahoma; font-size: 10pt; padding: 1px; } .resnyanskiy-tree > ul.container li { list-style-type: none; background-image: url(images/vline.png); background-repeat: repeat-y; } .resnyanskiy-tree > ul.container li ul { padding-left: 16px; } .resnyanskiy-tree > ul.container li span span { height: 16px; } ...

मुख्य टाइपस्क्रिप्ट क्लास Tree में तीन सार्वजनिक सदस्य होते हैं।

• updateNode(...) विधि निर्दिष्ट नोड में तत्वों को जोड़ती है।
• onBranchExpand और onNodeClick संगत घटनाओं के लिए हैंडलर निर्दिष्ट करने के लिए उपयोग किए जाते हैं।

दो निजी तरीके renderNodeItemsTo(...) करते हैं renderNodeItemsTo(...) और toggleNodeItemsVisible(...) मूल तर्क को लागू करते हैं। DOM तत्वों को जोड़कर / हटाकर पेड़ के तत्वों की दृश्यता में परिवर्तन किया जाता है ( Element.removeChild(...) - jsperf को हटाने के लिए उपयोग किया जाता है।
toggleNodeItemsVisible(...) विधि false यदि निर्दिष्ट ट्री नोड (JS ऑब्जेक्ट) में कोई तत्व नहीं है। इसके लिए धन्यवाद, onBranchExpand हैंडलर को कॉल करने की शर्त संक्षिप्त लगती है:

 if(!this.toggleNodeItemsVisible(node) && (this.onBranchExpand instanceof Function)) { this.onBranchExpand(nodeId); } 

अन्य चीज़ों के बीच, एक घटक को लागू करते समय टाइपस्क्रिप्ट + लेस का उपयोग करना, अपनी परियोजनाओं में इसके उपयोग को सरल करता है और आपकी आवश्यकताओं को पूरा करने के लिए परिशोधन करता है।

GitHub - github.com/resnyanskiy/js.tree
नुगेट - nuget.org/packages/resnyanskiy.js.tree