Templating जावास्क्रिप्ट अनुप्रयोगों के साथ काम करने का एक महत्वपूर्ण हिस्सा है। यह काफी सामान्य है कि डेटा आपके लिए उपलब्ध है, लेकिन प्रारूप में नहीं जो स्क्रीन पर तैयार डिस्प्ले है। यह आमतौर पर (लेकिन हमेशा नहीं) JSON प्रारूप में डेटा है। यह जावास्क्रिप्ट के साथ काम करने के लिए एक शानदार प्रारूप है, लेकिन हमें अभी भी इसे किसी ऐसी चीज में प्रारूपित करने की आवश्यकता है जिसका हम उपयोग कर सकते हैं।
उदाहरण के लिए, यहां कुछ काल्पनिक डेटा हमारे हाथ में हो सकते हैं:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )और अंत में हम इसे बनाना चाहेंगे:
Ender's Game
Gavin Hood
आपको लगता है कि jQuery उस पर कमाल है। jQuery डोम ट्रेवर्सिंग / हेरफेर टूल से भरा है। लेकिन इसमें आपके द्वारा कहे जाने वाले DOM निर्माण टूल का बहुत मजबूत सेट नहीं है। मेरा मानना है कि jQuery टीम कुछ बिंदु पर टेम्प्लेटिंग को जोड़ने पर विचार कर रही थी, और यहां तक कि "आधिकारिक" प्लगइन के साथ खिलवाड़ किया गया था, लेकिन यह बंद नहीं हुआ।
इस वीडियो में हम सिर्फ वही नहीं करते हैं जो आज पारंपरिक रूप से अस्थायी माना जाता है। हम सीधे jQuery के साथ एक नया निर्माण करते हैं और हमें जो HTML की आवश्यकता होती है उसे बनाने के लिए स्ट्रिंग अंतर्मुखीकरण का उपयोग करते हैं और अंततः इसे पृष्ठ पर इंजेक्ट करते हैं। उस बारे में तकनीकी रूप से कुछ भी गलत नहीं है, लेकिन मैं कोशिश करता हूं और घर चलाऊं कि यह दृष्टिकोण कैसे जल्दी से हाथ से निकल सकता है।
जेएस के थोड़े से हिस्से में हम इस वीडियो में लिखते हैं, हम विभिन्न प्रकार की चिंताओं / नौकरियों का मिश्रण कर रहे हैं:
- डेटा प्राप्त करना। हमारे पास बस यहां हाथ है, लेकिन संभावना है कि यह थोड़ा अधिक जटिल है। शायद एक async Ajax अनुरोध त्रुटि से निपटने और कैशिंग और इस तरह के साथ।
- तर्क प्रदर्शित करें। यह तय करना कि हमें क्या दिखाना है। कितने? कौन से हिस्से? किस पर आधारित?
- घटना से निपटना। हमारे नए-नए इंजेक्ट किए गए डिवाइसेस को इवेंट हैंडलिंग के रूप में जोड़ा गया था, जैसा कि हमने उन्हें डेलिगेट करने के बजाय बनाया था।
- टालमटोल करना। एचटीएमएल जो हम डिजाइन को पूरा करने के लिए बनाते हैं, डेटा को संरचना करते हैं, और समायोजित या जरूरतों को पूरा करते हैं।
यह स्पेगेटी-ईश कोड है जिसे हमने समाप्त किया है:
पेन 31b07f30dce13b31904da36693b29b41 क्रिस कॉयियर (@chriscoyier) द्वारा CodePen पर देखें
वीडियो का अगला ब्लॉक टेम्प्लेटिंग पर ध्यान केंद्रित करने वाला है क्योंकि यह सुपर महत्वपूर्ण है, लेकिन अंततः हम इन सभी चिंताओं को तोड़कर बहुत अधिक संगठित और बनाए रखने योग्य कोड के साथ समाप्त हो जाएंगे।