🗻 🎷 👩🏻‍🤝‍👨🏽 Xslt शैली HTML फ़ाइल वंशानुक्रम 🚉 🤙🏼 🌚

समस्या

एक बार, एक बड़ी परियोजना के पुनर्लेखन के दौरान, हमारे वेब एप्लिकेशन के विभिन्न संस्करणों के लिए HTML टेम्पलेट्स को अनुकूलित करने के लिए तंत्र में सुधार करने की आवश्यकता थी। पुराने संस्करण में, अनुकूलन इस तरह दिखता था:

{{if app.version==versions.main}} <!-- html --> {{else if app.version==versions.custom1}} <!-- html --> {{else if app.version==versions.custom2}} <!--  html --> {{endif}}

और ऐसे नूडल्स के साथ पूरी परियोजना को अनुमति दी गई थी। इस तरह के कोड को बनाए रखना और संशोधित करना मुश्किल है, सक्रिय उपयोग के साथ, टेम्पलेट एक असंगत गंदगी में बदल जाते हैं, जहां अलग-अलग संस्करणों के अनुकूलन के साथ व्यक्तिगत ब्लॉकों को प्रदर्शित करने के व्यापार तर्क को इंटरवेट किया जाता है।

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

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

उदाहरण

आइए कल्पना करें कि हमारे पास HTML फ़ाइल "myfile.html" में निम्न लेआउट है:

 <div> Blah blah blah <div>Main version</div> </div>

और, जैसा कि अक्सर अनुप्रयोग के विभिन्न संस्करणों में होता है, हमें एक पाठ "मुख्य संस्करण" के बजाय "myversion" संस्करण में यह आवश्यक था कि एक और प्रदर्शित किया जाएगा: "मेरा संस्करण"। HTML- इनहेरिटेंस के साथ ऐसा करने के लिए, आपको 2 सरल चरण करने होंगे:

1. टैग किए जाने वाले टैग में "bl-" से शुरू होने वाली विशेषता जोड़ें:

 <div> Blah blah blah <div bl-mytag>Main version</div> </div>

2. मूल फ़ाइल के लिए पैच के साथ एक फ़ाइल "myfile.myversion.html" बनाएँ:

  <div bl-mytag="replace">Custom version</div>

यह बात है! परियोजना के निर्माण के दौरान, सभी HTML फ़ाइलों को संस्करण द्वारा निर्दिष्ट फ़ोल्डर में बड़े करीने से जोड़ दिया जाएगा:

 जिले
   |
   मुख्य /
      के अंतर्गत myfile.html
   myversion /
      के अंतर्गत myfile.html

अब यह आपके आवेदन को बताने के लिए पर्याप्त है कि संस्करण के आधार पर html फ़ाइलों को कहाँ से लोड किया जाना है, और सब कुछ अपने आप काम करेगा!

स्थापना

अपने प्रोजेक्ट में grunt-html-inheritance जोड़ने के लिए, आपको कमांड के साथ npm मॉड्यूल को स्थापित करने की आवश्यकता है

 npm install grunt-html-inheritance --save-dev

या package.json के लिए निर्भरता जोड़ें, कमांड के साथ कार्य को Gruntfile.js में लोड करें

 grunt.loadNpmTasks('grunt-html-inheritance');

और निम्नानुसार कार्य को कॉन्फ़िगर करें:

 grunt.initConfig({ html_inheritance: { main: { files: { src: "**.html" //   }, options: { modules: ["version1", "version2"], //  dstDir: "../dist", //,       }, }, }, });

AngularJS एप्लिकेशन में, HTML फ़ाइलों के संस्करणों के बीच आसानी से स्विच करने के लिए एक महत्वपूर्ण शर्त निर्देशों और रूटिंग्स में हार्ड-कोडेड इन रास्तों के बजाय टेम्पलेट फ़ाइलों के पथ बनाने के लिए एक सहायक का उपयोग करना है।

लाभ

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

के उपयोग

उपरोक्त उदाहरण में वर्णित पैच में आधार टैग को बदलने के अलावा, निम्नलिखित मोड भी उपलब्ध हैं:

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

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

Xslt शैली HTML फ़ाइल वंशानुक्रम