PopulateJS: HTML मार्कअप में अपने आप को दोहराएं नहीं

LESS / SCSS का प्रसार, साथ ही साथ ब्राउज़रों और मानकों की दुनिया में अपेक्षित आंदोलनों, jQuery के आगमन ने आखिरकार प्रशंसक को HTML पेजों के लेआउट और फ्रंट-एंड डेवलपमेंट में लौटा दिया।
लेकिन कल्पना कीजिए कि आपको एक ऑनलाइन स्टोर में एक खंड, एक ब्लॉग का एक खंड, या हैबर का पूरा मुख्य पृष्ठ बनाने की आवश्यकता है? हां, हम पृष्ठ को अलग-अलग ब्लॉकों में विभाजित करते हैं और उनके लिए मार्कअप करते हैं, बहुत से नेस्टेड ब्लॉक उत्पन्न करते हैं, उनके लिए CSS / LESS / SCSS बनाते हैं। बेशक, ऐसे अद्भुत उपकरण हैं जैसे कि ज़ेन-कोडिंग, jQuery के टेम्प्लेट, और ग्रिड के निर्माण के लिए - बूटस्ट्रैप या ज़र्ब फाउंडेशन जैसे सभी प्रकार के सीएसएस फ्रेमवर्क।

लेकिन अक्सर मैं यह देखना चाहता हूं कि सूचियों का लेआउट कैसे व्यवहार करता है जब उनमें एक ही तत्व नहीं है, लेकिन उनमें कई तत्व हैं। निश्चित रूप से, आपने पृष्ठ को सामग्री से भरने के लिए अपने जीवन में कम से कम एक बार ब्लॉक के लेआउट को कॉपी किया है, खासकर जब आपका पसंदीदा सीएमएस या वेब फ्रेम एक टेम्पलेट इंजन के साथ हाथ में नहीं है। और फिर कॉपी-पेस्ट को हटा दिया गया। या इससे भी बदतर, आप उन लोगों में से एक हैं जो टाइप करने वालों से HTML-कट प्राप्त करते हैं, और आपको इस कॉपी-पेस्ट को स्वयं हटाने की आवश्यकता है।


कुछ दिनों पहले मैंने एक लाइब्रेरी पॉपुलेट्स बनाई, जो आपको एक बार और सभी के लिए वर्णित परेशानियों से बचाने के लिए डिज़ाइन की गई है। वास्तव में, यह हमें CSS में सिंथैटिक शुगर देता है, जो हमें CSS गुणों का उपयोग करके HTML तत्वों की सामग्री को क्लोन करने की अनुमति देता है। उदाहरण के लिए, वेब पेज 7 पर किसी भी तत्व के पॉपुलेट -7 वर्ग एक के बजाय बिल्कुल समान तत्वों को प्रदर्शित करेगा, और पॉप्युलेट-इनर -3 वर्ग तत्व की सामग्री को तीन बार प्रदर्शित करेगा।

कैसे करें इस्तेमाल?

उदाहरण के लिए, आपको प्रस्तावित वस्तुओं के एक संक्षिप्त विवरण वाली वस्तुओं की एक परीक्षण सूची की आवश्यकता होती है, जिसे आपने केवल स्टाइल किया है:

<ul> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> </ul> 

एक ब्लॉक कॉपी करने के बजाय:

 <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> 

.Populate-5 वर्ग का उपयोग करें:

 <li class="populate-5"><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> 

पृष्ठ पर 5 आइटमों की एक सूची दिखाई देती है। दो उत्पाद चित्रों के साथ 5 आइटम चाहिए? कोई समस्या नहीं:

 <li class="populate-5"><img class="populate-2" src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> 

या अधिक विवरण पाठ:

 <li class="populate-5"><img class="populate-2" src="images/thumb.jpg" /><div class="title populate-inner-3">Lorem ipsum dolor...</div></li> 

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

स्वाभाविक रूप से, छद्म कक्षाएं: आपके सीएसएस में घोषित nth-child को भी तत्वों पर लागू किया जाएगा।

लाइब्रेरी कनेक्ट करने के लिए और अभी इसका उपयोग शुरू करने के लिए, बस jQuery के बाद पेज में निम्नलिखित कोड पेस्ट करें:

 <script type="text/javascript" src="https://rawgithub.com/vladignatyev/populate-js/master/js/populate.js"></script> 

अब बात करते हैं कि हुड के नीचे क्या है।

अंदर क्या है?

अंदर populatejs एक बहुत ही सरल इंजन है जो चयनकर्ताओं के लिए jQuery का उपयोग करता है और अपने स्वयं के तंत्र के लिए DOM ट्री को ट्रैक करने और CSS तत्व वर्गों की प्रसंस्करण घोषणाओं (jQuery में 'वर्ग' विशेषता के माध्यम से) का उपयोग करता है। सभी लाइब्रेरी कोड को अद्भुत क्यूनेट ढांचे का उपयोग करके परीक्षणों के माध्यम से लिखा गया है। परीक्षण चलाने के लिए, बस अपने ब्राउज़र में test.html खोलें।

जब HTML दस्तावेज़ को ब्राउज़र द्वारा लोड किया जाता है, तो प्रारंभ करने के दौरान, लाइब्रेरी डोम कक्षाओं के नोड्स को चिह्नित करती है जो वर्गों के साथ चिह्नित होते हैं।। Populate- * और .populate-inner- * इसके बाद, एक रिवर्स चाल होती है, जिसके दौरान पारित नोड्स को .populated वर्ग के साथ चिह्नित किया जाता है और "क्लोनिंग" ऑपरेशन उन पर लागू होता है, जो इन नोड्स के वारिस के पूरे पदानुक्रम की नकल करता है।

निष्कर्ष

मुझे समुदाय से किसी भी प्रतिक्रिया के लिए खुशी होगी, और मुझे विशेष रूप से खुशी होगी अगर यह पुस्तकालय मेरे अलावा किसी और को इशारों में बचाता है, क्योंकि यह पहले से ही मुझे बचा चुका है।

1. ज़ेन कोडिंग - HTML / CSS तेजी से लिखें
2. jQuery के टेम्पलेट्स के साथ काम करना
2. बूटस्ट्रैप
3. Zurb Foundation
4. लाइब्रेरी का आधिकारिक पेज PopulateJS
5. क्विट जेएस टेस्टिंग फ्रेमवर्क
5. गिटहब स्रोत कोड
6. मेरा ट्विटर , अगर आपको अधिक परिचालन समर्थन की आवश्यकता है या आप "धन्यवाद" कहना चाहते हैं।

मुझे जिठूब पर कांटा !