मार्कडाउन वेबडॉक्स में घटक प्रस्तुत करना

Habrahabr.ru/post/196248 के परिचयात्मक भाग को जारी रखते हुए, इस लेख में मैं एक नियंत्रित दस्तावेज़ में सक्रिय सामग्री बनाने और डालने के लिए marks.bs लाइब्रेरी में लागू घटक प्रणाली के तंत्र की समीक्षा करेगा और मार्कडाउन वेबडॉक्स में इसका उपयोग किया जाएगा।

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

एक घटक शुरू में एक प्रकार की जावास्क्रिप्ट वस्तु है जिसमें डेटा, एक एचटीएमएल कोड टेम्प्लेट फ़ंक्शन और पैरामीटर, निश्चित रूप से उन गुण और विधियां हैं, जिनके गुण हम इसके कोड में परिभाषित करते हैं।

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

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

नमस्ते विश्व! komponentski में

(function() { function HelloWorld(parameters, attributes) { $ENV.controls.controlInitialize(this, 'hello', parameters, attributes, $ENV.default_template, $ENV.default_inner_template); this.text('# Hello World!'); // ← Markdown }; HelloWorld.prototype = $ENV.controls.control_prototype; controls.typeRegister('hello', HelloWorld); // ←   })(); 

मार्कडाउन वेबडॉक्स में घटक वस्तुओं का निर्माता बनने के लिए, कई शर्तों को पूरा किया जाना चाहिए:
- प्रोटोटाइप चेन में controls.control_prototype होना चाहिए, इससे ऑब्जेक्ट को सामान्य गुण और नियंत्रण के तरीके मिलते हैं।
- फ़ंक्शन को control.typeRegister () या controls.factoryRegister () कॉल करके पंजीकृत किया जाना चाहिए
कंस्ट्रक्टर मॉड्यूल में, controls.controlInitialize () कॉल करके इनिशियलाइज़ेशन आवश्यक है
- मार्केडाउन मार्कअप को समझने वाले इनिशियलाइज़ेशन के दौरान विशेष टेम्प्लेट असाइन करना उचित है। $ ENV.default_template और $ ENV.default_inline_template ऐसे नियंत्रण टेम्पलेट हैं जो मार्केड वेबडॉक्स के साथ संगत हैं और अधिकांश कस्टम घटकों में उपयोग किए जा सकते हैं।

उपर्युक्त उदाहरण में, केवल स्ट्रिंग this.text ('# हैलो वर्ल्ड!'); समस्या क्षेत्र का कोड है।

पृष्ठभूमि गतिशील घटक लोड हो रहा है

गतिशील लोडिंग प्रोटोटाइप और डिबगिंग उद्देश्यों के लिए सुविधाजनक है। यदि आप controls.hello-world.js फ़ाइल को सैंपल कोड हैलो वर्ल्ड के साथ बनाते हैं! और साइट के फ़ोल्डर में पथ घटकों / नियंत्रणों / हेल्लो-वर्ल्ड / controls.hello-world.js के साथ इस साइट के पृष्ठों के पाठ में आप इस घटक को कॉल करने के लिए नोटेशन का उपयोग कर सकते हैं:% hello ()% hello, script तभी भरी जाएगी कहते हैं। आरंभिक कोड के निष्पादन से स्क्रिप्ट के वास्तविक लोडिंग (और इस समय ध्यान देने योग्य हो सकता है) के समय के लिए, घटक के बजाय, स्टब स्टब घटक दस्तावेज़ में निर्दिष्ट स्थान पर स्थित होगा।

घटक मेनिफेस्ट

एक घटक प्रणाली का तंत्र काफी सरल, व्यवस्थित और सार्वभौमिक बुनियादी सिद्धांतों पर आधारित है:

मॉड्यूलर निर्माण सिद्धांत

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

संशोधनों

मापदंडों का मुख्य उद्देश्य घटक संशोधन का विकल्प है। यह संशोधन उसी घटक का एक और प्रतिनिधित्व हो सकता है, या यह एक अलग घटक हो सकता है। पैरामीटर्स का उपयोग उन ऑब्जेक्ट वैल्यूज को पास करने के लिए किया जाता है जहां सुविधाजनक हो।
उदाहरण:
% पृष्ठ-लेआउट # योजना = केंद्रित ()% पृष्ठ-लेआउट - यहां योजना एक पैरामीटर है जो आपको एक या किसी अन्य संशोधन का चयन करने की अनुमति देता है, जिसके लिए इस घटक का अर्थ पृष्ठ लेआउट योजना चुनना है।
% ब्लॉक # $ वर्ग = m41 ()% ब्लॉक - एक ब्लॉक को एक वर्ग नाम असाइन करें, यह मापदंडों के माध्यम से एक विशेषता मान पारित करने का एक उदाहरण है।

HTML कोड बनाना, DOM एलिमेंट्स को मैनेज करना, इवेंट्स को हैंडल करना

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

मनमाने ढंग से घोंसले के शिकार, भंगुर, व्यवस्थित

दस्तावेज़ का प्रत्येक भाग पूरे दस्तावेज़ के समान है और एक अलग दस्तावेज़ के रूप में कार्य कर सकता है। एक घटक, एक दस्तावेज़ के हिस्से के रूप में, समान गुण हैं। एक दस्तावेज़ दूसरे दस्तावेज़ का एक अभिन्न हिस्सा हो सकता है।

यह सब क्यों जरूरी है?

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

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

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

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

यदि आपने जो कुछ भी यहां लिखा है उसके बारे में कुछ भी नहीं समझेंगे ... मैं अधिक लिखूंगा और समय के साथ, मैं सब कुछ स्पष्ट रूप से बताने और आपके सभी सवालों के जवाब देने की कोशिश करूंगा।

परियोजना

इस समय के दौरान, परियोजना ने मार्कडाउन वेबडॉक्स नाम का अधिग्रहण किया, मुझे उम्मीद है कि यह नेटवर्क प्रौद्योगिकियों में एक नया शब्द होगा। आप एक ब्लॉग या Vkontakte समूह पर github पर टिप्पणियों और सुझावों को छोड़ सकते हैं। यदि आप परियोजना की सहायता करना चाहते हैं या किसी विशेष प्रस्ताव का लाभ उठाना चाहते हैं, लेकिन यह नहीं जानते कि यह कैसे करना है, तो कृपया मुझसे सीधे संपर्क करें, सभी संपर्क मेरी प्रोफ़ाइल में प्रकाशित हैं।
प्रोजेक्ट साइट aplib.imtqy.com/markdown-site-template
Github.com/aplib/markdown-site-template रिपॉजिटरी