🧑🏿‍🤝‍🧑🏼 🐉 👩🏻‍⚕️ रेल 4 की सूक्ष्मता

हीम बुलाया Turbolinks जावास्क्रिप्ट का उपयोग पृष्ठ पर सामग्री को अद्यतन करने के द्वारा अपने आवेदन ऊपर अच्छा गति में सक्षम है। इसे रेल 4 में डिफ़ॉल्ट रूप से शामिल किया गया है, लेकिन मैं दिखाऊंगा कि आप इसे अब रेल 3 में लिखे कार्यक्रमों में कैसे उपयोग कर सकते हैं। आप कुछ नुकसान के बारे में भी जानेंगे।

रेल 4 सूक्ष्मता चक्र की सामग्री

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

यह साइट अपने आप में काफी सरल है - यह अपने स्वयं के कार्यों की सूची के साथ परियोजनाओं का एक सेट है जिसे पूरा करना होगा। प्रत्येक नया कार्य एक अधूरा के रूप में चिह्नित है, लेकिन एक माउस के एक मामूली आंदोलन (या बल्कि, उचित चेकबॉक्स क्लिक), एक पूरी में समस्या बदल जाता है।

टर्बोलिंक्स जोड़ना

अब हमारे आवेदन में टर्बोलिंक्स जोड़ें और देखें कि यह सब कैसे काम करता है। सबसे पहले, आपको मणि के नाम को मणिभ में दर्ज करना होगा और फिर बंडल इंस्टाल चलाना होगा।

/ जेमफाइल

gem 'turbolinks'

अब आपको जावास्क्रिप्ट में एप्लिकेशन मैनिफ़ेस्ट में टर्बोलिंक्स जोड़ने के लिए लाइन जोड़ने की आवश्यकता है:

/app/assets/javascripts/application.js

 //= require jquery //= require jquery_ujs //= require turbolinks //= require_tree .

वैसे, मणि को jQuery की आवश्यकता नहीं है, जो कुछ मामलों में बहुत सुविधाजनक हो सकता है।

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

मेरे मामले में, मैंने अपने ब्राउज़र को क्रोम के नए संस्करण में बदल दिया और उसमें विकास के तहत एक वेबसाइट खोली। वेब निरीक्षक चल रहा है और लिंक पर poklikat देखा जाएगा कि पेज पूरी तरह से पुनः लोड नहीं है, क्योंकि अब मणि turbolinks.js काम करता है पहले से ही पेज खोलने के लिए ajax अनुरोध उत्पन्न करता है।

मणि का उपयोग करने से साइट को तेजी से लोड करने की अनुमति मिलती है क्योंकि ब्राउज़र जेएस और सीएसएस कोड की फिर से व्याख्या नहीं करता है, लेकिन यह कैसे काम करता है?

पृष्ठ पर सभी लिंक के लिए टर्बोलिंक्स क्लिक इवेंट के लिए सुनता है। जैसे ही ऐसा होता है, जावास्क्रिप्ट के माध्यम से वांछित पृष्ठ पर एक जीईटी अनुरोध किया जाता है और उसके बाद प्राप्त आंकड़ों का विश्लेषण किया जाता है, और फिर शीर्षक और शरीर के तत्वों को अपडेट किया जाता है। मणि अद्यतन पृष्ठ के URL को बदलने के लिए पुश स्टेट एपीआई का भी उपयोग करता है। यह तकनीक PJAX से काफी मिलती-जुलती है।

मौजूदा लिपियों के साथ समस्याएं

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

असल में, यहाँ वह कोड है जिससे समस्या हो रही है:

/app/assets/javascripts/projects.js.coffee

 jQuery -> $('.edit_task input[type=checkbox]').click -> $(this).parent('form').submit()

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

कोड की पहली पंक्ति पर एक नज़र डालें। यह बहुत महत्वपूर्ण है क्योंकि यह वहाँ है कि यह पृष्ठ के लिए तैयार घटना की प्रतीक्षा करता है, जो पृष्ठ के पूरे डोम के लोड होने के बाद ही फायर करता है। इसलिए, यदि आप इस कोड का उपयोग नहीं करते हैं, तो jQuery घटनाओं को लोड करने से पहले चेकबॉक्स में संलग्न करने का प्रयास करेगा।

टर्बोलिंक्स का उपयोग करते समय, यह कॉलबैक केवल एक बार निष्पादित किया जाता है, जब पृष्ठ लोड होता है। यह हमें एक और महत्वपूर्ण बिंदु पर लाता है: जब हम किसी अन्य पृष्ठ पर जाते हैं, तो मणि की उपरोक्त वर्णित विशेषताओं के कारण, हम तकनीकी रूप से उसी पृष्ठ पर बने रहते हैं। हालाँकि, जब नया पृष्ठ लोड होता है, तो टर्बोलिंक्स स्वयं कई अलग-अलग घटनाओं को उत्पन्न करता है, और उनमें से एक पृष्ठ है: लोड । यह आपको डोम लोड करने का अनुकरण करने की अनुमति देता है:

/app/assets/javascripts/projects.js.coffee

 ready = -> $('.edit_task input[type=checkbox]').click -> $(this).parent('form').submit() $(document).ready(ready) $(document).on('page:load', ready)

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

इसी तरह की समस्याओं को हल करने के लिए, आप Jquery Turbolinks मणि का उपयोग कर सकते हैं। इसके अलावा, इस तरह के नुकसान को रोकने के लिए एक और उपाय है। तत्वों को खोजने और उनकी क्लिक घटनाओं को ट्रैक करने के बजाय, आप पूरे दस्तावेज़ के लिए क्लिक इवेंट सुन सकते हैं और, जब ऐसा होता है, तो जांचें कि यह कार्य के साथ चेकबॉक्स के लिए कहा गया था:

/app/assets/javascripts/projects.js.coffee

 $('document').on 'click', '.edit_task input[type=checkbox]', -> $(this).parent('form').submit()

इस दृष्टिकोण के साथ, यह सत्यापित करना भी आवश्यक नहीं है कि DOM लोड है। और एक अतिरिक्त लाभ भी है: कोड AJAX का उपयोग करके जोड़े गए चेकबॉक्स के साथ सभी कार्यों को सही ढंग से संभाल लेगा।

एक अच्छा विचार पर नजर रखने के लिए बग ट्रैकर Turbolinks , क्योंकि समय लेख प्रकाशित किया गया था पर, वह इस तरह के ट्विटर बूटस्ट्रैप, jQuery के यूआई कैलेंडर के रूप में तीसरे पक्ष के पुस्तकालयों, के साथ गंभीर समस्या थी। उसी समय, संगतता जोड़ने के लिए उन पर काम चल रहा है।

फिर भी, ऐसी विषम परिस्थितियाँ होती हैं जिनमें, पिछले पृष्ठ पर लौटते समय, Turbolinks अच्छी तरह से GET के बजाय POST अनुरोध करता है। इस समस्या को कैसे हल करें? बस ऐसी स्थितियों में टर्बोलिंक्स को अक्षम करें। इन बचपन की बीमारियों को निकट भविष्य में ठीक किया जाना चाहिए।

इस तरह की समस्याओं को देखते हुए, आप सोच सकते हैं: "क्या यह इसके लायक है?" टर्बोलिंक्स गति परीक्षण इसे हल करने में मदद कर सकता है, जिससे यह देखा जा सकता है कि कुछ मामलों में पृष्ठ लोड दोगुना है। बेशक, सभी एप्लिकेशन अलग-अलग होते हैं, लेकिन आप घर पर मणि की कोशिश कर सकते हैं और देख सकते हैं कि साइट की जवाबदेही में कैसे सुधार होता है।

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

आपका ध्यान के लिए धन्यवाद!

सभी त्रुटियों के बारे में, अनुवाद की गलतियाँ और अन्य समान चीजों के बारे में, कृपया पीएम को सूचित करें।

आवेदन

मेरे ब्लॉग को सब्सक्राइब करें !

रेल 4 की सूक्ष्मता - टर्बोलिंक

टर्बोलिंक्स जोड़ना

मौजूदा लिपियों के साथ समस्याएं

सभी त्रुटियों के बारे में, अनुवाद की गलतियाँ और अन्य समान चीजों के बारे में, कृपया पीएम को सूचित करें।

More articles: