कस्टम टैग के लाभ, या मैंने HTML मार्कअप को कैसे छोड़ दिया

पिछले कुछ समय से मैं मास्कस्क लाइब्रेरी का उपयोग / विकास कर रहा हूं। पहले मैंने इसे केवल टेम्प्लेट के इंजन के रूप में इस्तेमाल किया, और समय के साथ, इसने पूरी तरह से HTML को बदल दिया। लेख में मैं आपको बताऊंगा कि अनुप्रयोग विकास में एक घटक दृष्टिकोण और विशेष रूप से इस कार्यान्वयन में क्या फायदे हैं। यदि हम अंकों से चयन करते हैं, तो हमें निम्नलिखित सूची मिलती है:

• गति
• टैग हैंडल
• प्री और पोस्ट प्रोसेसर
• आईओसी
• अलगाव / विघटन
• लेआउट - मॉडल - कोड - शैलियाँ

आप पुस्तकालय के बारे में और अधिक विवरण यहाँ देख सकते हैं और उदाहरण - libjs / मास्क , और यहाँ के स्रोत - github / मास्क

§ गति

1. उत्पादकता

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

   संकलन / पार्सिंग टेम्प्लेट। पहली जीत

   
   टेम्पलेट से, हम फॉर्म का एक JSON ट्री {tagName:'div',attr:{...},nodes:[...]} । मेरा पहला विचार क्लाइंट के लिए टेम्प्लेट तैयार करने का था - भविष्य के var template = JSON.parse(serializedJsonDom) , लेकिन जब मैंने परीक्षण किया, तो यह पता चला कि लक्ष्य इंजनों में mask.compile JSON.parse - jsperf की तुलना में तेज़ है, और अन्य ब्राउज़रों में यह अधिक हीन नहीं है आखिरी वाला। इसलिए पूर्वगामीता बेकार होने के कारण नहीं है।
   
   

   एक डोम का निर्माण। दूसरी जीत

   
   JSON पेड़ प्राप्त करने के बाद, हम एक DocumentFragment का निर्माण करते हैं, जिसे हम तब "लाइव" DOM ​​में डालते हैं। परीक्षण से यह स्पष्ट है कि यहां प्रदर्शन एक स्तर पर है। मैं एक साफ .appendChild(documentFragment) को दिखाने के लिए छोड़ दिया कि एक DocumentFragment बनाने में सभी नमक। और फिर, दिलचस्प .innerHTML भी यहाँ (Chrome) प्रदर्शन में हीन है।
   
   एक महत्वपूर्ण बिंदु यह भी है कि हम शुरू में एक बार में सब कुछ प्रस्तुत करते हैं। आइए jQuery विजेट के साथ एक उदाहरण देखें। हमेशा की तरह, सब कुछ होता है:
   
   • लेआउट में हम कंटेनर निर्दिष्ट करते हैं <div id='myWidget'></div>
   • in javascript-e $('#myWidget').myWidgetInit(config);
   
   इस दृष्टिकोण का एक बड़ा दोष यह है कि हम एक तैयार किए गए DOM तत्व में एक विजेट बनाते हैं। और जैसा कि आप जानते हैं, "लाइव" डोम चीज को बदलना अपेक्षाकृत महंगा है। और जब हम स्वीकार करते हैं कि अक्सर हमारे पास एप्लिकेशन में एक से अधिक विजेट होते हैं।
   
   कि वास्तव में हम अंत में क्या मिल रहा है एक बहुत तेजी से डोम बिल्डर है।
   
   

2. विकास की गति

   
   हम निम्नलिखित पैराग्राफ में इस पर अधिक विस्तार से विचार करेंगे, वास्तव में, इस लेख के लिए, इस लेख की कल्पना की गई थी। यहाँ, मैं बस ध्यान देता हूँ कि मनमाने ढंग से टैग विकास की गति और सहजता को बढ़ाते हैं। इस लेआउट पर विचार करें:
   

    header > menuBar { li target='item1' > 'Item1 Title' li target='item2' > 'Item2 Title' } viewsManager { view#item1 > carousel { img src='img1.png'; img src='img2.png'; } view#item2 > scroller { 'About Content' } } 

   
   यदि हमारे पास menuBar, viewsManager, scroller, carousel slider तैयार हैं, तो हमें जावास्क्रिप्ट-ई में और कुछ भी लिखने की जरूरत नहीं है, ताकि मेनू और दृश्य स्विच हो जाएं, ताकि स्क्रॉल काम करें, ताकि चित्र घूमें। क्या यह प्यारा नहीं है? और क्या इसके लिए कोई लेआउट नहीं है? बेशक, कई विजेट आत्म-आरंभ भी कर सकते हैं, लेकिन यह मुख्य रूप से डोम रेडी इवेंट के माध्यम से कार्यान्वित किया जाता है और आवश्यक टैग की खोज / प्रतिस्थापित करता है - यह सब एक अतिरिक्त "ओवरहेड" है । यहाँ, सब कुछ इसी डोम बिल्डर के माध्यम से गुजरता है। आप किसी भी समय इस तरह के लेआउट को सम्मिलित कर सकते हैं और यह काम करेगा।
   
   

Lers टैग हैंडलर

ये हमारे घटक हैं। जब बिल्डर एक हैंडलर टैग का सामना करता है, तो यह क्लास ऑब्जेक्ट को इनिशियलाइज़ करता है, और इस हैंडलर को रेंडरिंग संदर्भ देता है - कोई जादू नहीं। यदि कोई भी टैग के तहत पंजीकृत नहीं है, तो वह स्वयं तत्व बनाएगा। घटकों के साथ एक अधिक पूर्ण और सुविधाजनक काम के लिए, एक छोटा "सार और न केवल" वर्ग कम्पो ( स्रोत , प्रलेखन ) है

Ors प्रीप्रोसेसर

यह देखते हुए कि हमारे पास एक पेड़ जैसा रेंडर फ्लो है , हमें एक पूरे के रूप में रेंडरिंग और लेआउट को प्रभावित करने के लिए एक शक्तिशाली उपकरण मिलता है। मैं प्रीप्रोसेसर घटकों को कॉल करता हूं जो नीचे के लेआउट को संशोधित करता है। इस प्रकार, हम, जैसा कि यह था, हमारे घटक को लेआउट में पेश करते हैं - विवेक पर हम निचले टेम्पलेट को सही करते हैं या मॉडल इनपुट डेटा को प्रतिस्थापित करते हैं और प्रतिपादन जारी रखते हैं। विभिन्न लेआउट बनाने के लिए यह बहुत सुविधाजनक पैटर्न है। यहाँ MasterPages (asp.net हैलो) के साथ एक उदाहरण है:

 layout:master#twoColumnLayout { div.wrap { div.layoutLeft > placeholder#left; div.layoutLeft > placeholder#right; } } layout:view master='twoColumnLayout' { left { /** content */ } right { /** content */ } } 

घटक #twoColumnLayout को निश्चित रूप से अतिरिक्त रूप से अपनी शैलियों को लोड करना चाहिए, लेकिन उस समय पर और अधिक।
यह एक बहुत ही सरल उदाहरण है, लेकिन यहां आप देख सकते हैं कि किस प्रकार हम अपने प्रतिनिधित्व के लिए विभिन्न टेम्पलेट्स को स्थानापन्न कर सकते हैं। एक उदाहरण कार्यान्वयन - layout.js

Ors पोस्टप्रोसेसर

उन्हें डेकोरेटर भी कहा जा सकता है। यहां हम माता-पिता को बदल रहे हैं, न कि टेम्पलेट को, क्योंकि यह पहले से ही एक प्रो-रेंडरर है , लेकिन सीधे HTMLElement (हमें याद है कि हम DocumentFragment के साथ काम कर रहे हैं, ताकि सभी बदलाव दर्द रहित हों)। यह दृष्टिकोण एक शक्तिशाली डिजाइन सहायक भी है। बाइंडरों के उदाहरण पर:

 div { bind value='name'; bind value='status' attr='class'; } 

यहां, पोस्ट प्रोसेसर मॉडल को div एलिमेंट के साथ जोड़ देगा।

 var person = { name: "Alex", status: "happy" } container.appendChild(mask.renderDom(template, person)); setTimeout(function(){ person.status = 'busy' ; person.name="Anonym" }, 1000); 

मुझे लगता है कि कोड स्पष्ट है। और कार्यान्वयन यहाँ देखा जा सकता है - जीथब

नियंत्रण का उलटा (निर्भरता इंजेक्शन)

पैराग्राफ के शीर्षक के लिए क्षमा करें - नाम "वास्तव में दर्दनाक रूप से मजबूत" है। एह, यह लग रहा है ... इतना नहीं मुझे इसका पैटर्न पसंद है, जैसा कि इसका नाम है - आप शक्ति महसूस करते हैं। गीत के लिए खेद है, विरोध नहीं कर सका। अपने विषय पर लौटते हुए, हम कह सकते हैं कि मनमाने टैग नए या अच्छी तरह से भूल गए पुराने पैटर्न के क्षितिज को खोलते हैं।
लागू करने की योजना, उदाहरण के लिए, संपत्ति संपादकों का एक कारखाना:

 form { propertyEditor value='name'; propertyEditor value='birthday'; propertyEditor value='age'; } 

और कार्यान्वयन कुछ इस तरह दिखाई देगा:

 mask.registerHandler('propertyEditor', Class({ render: function(values, container, cntx){ var value = Object.getProperty(values, this.attr.value), template; switch(Object.typeOf(value)){ case 'string': template = Object.format('input type="text" value="#{%1}" > bind value="#{%1}" prop="value";',this.attr.value); break; case 'datetime': template = Object.format('datePicker date="%1";', value.toString()); break; /**    */ } mask.renderDom(template, values, container, cntx); }); }} 

यहां महत्वपूर्ण बिंदु यह है कि हम किसी भी टैग को फिर से परिभाषित करके टेम्पलेट में खुद को एम्बेड कर सकते हैं, यहां तक ​​कि एक ही "DIV" - यह हमारे लिए असीमित क्षितिज खोलता है प्रस्तुति, परीक्षण और अन्य चीजें जो मन में आती हैं, उनमें हेरफेर करने के लिए।

§ इंसुलेशन

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

§ मार्कअप - मॉडल - कोड - शैलियाँ

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

 ul > list value='users' > li > '#{name}' 

टैग (घटक) list; यह टेम्पलेट से पास किए गए मॉडल से "users" सरणी ले जाएगा, और इसके टेम्पलेट को li > "#{name}" एन (उपयोगकर्ता .length) बार डुप्लिकेट करेगा। बाकी सब कुछ घटकों के माध्यम से भी लागू किया जा सकता है, या आप तैयार समाधान का लाभ उठा सकते हैं। इस प्रकार, लेआउट लेआउट है, कोड कोड है, और शैलियों शैलियों हैं। यह सब एक न्यूनतम करने के लिए intertwined होना चाहिए। बेशक, यह सभी व्यक्तिपरक है, और शायद मैं मौलिक रूप से गलत हूं, और आप सब कुछ बहुत बेहतर जानते हैं।

§ HTML से बचना

उपरोक्त सभी के लिए, मैंने पूरी तरह से सादे HTML लिखने से इनकार कर दिया। पृष्ठ में हमारे पास "मास्क / टेम्प्लेट" प्रकार के साथ एक स्क्रिप्ट टैग है जिसकी सामग्री DOM में प्रदान की गई है। सुविधा के लिए, मैं एक घटक में कई तैयार पुस्तकालयों को लपेटने की कोशिश करता हूं, उदाहरण के लिए - टाइमपिकर

अगर मैंने किसी को नाराज किया या मुझसे गलती हुई तो मैं माफी मांगता हूं। हालाँकि, क्रोम में एक बढ़िया स्पैशल है, यह विराम चिह्न के साथ मदद नहीं करता है, लेकिन शायद "ओह यह कैसा होना चाहिए।"

आपका दिन शुभ हो!