JQuery 3 - 10 सबसे अच्छे फीचर्स में नया क्या है

jQuery 3.0, jQuery की नई प्रमुख रिलीज़ आखिरकार रिलीज़ हो गई। वेब डेवलपर समुदाय ने अक्टूबर 2014 के बाद से इस महत्वपूर्ण कदम की प्रतीक्षा की, जब jQuery की टीम ने नए प्रमुख संस्करण पर अब तक, जून 2016 तक काम करना शुरू किया, जब अंतिम रिहाई बाहर है.

रिलीज नोट एक वादा करता है पतला और तेज jQuery, के साथ पिछेड़ी संगतता दिमाग में। इस पोस्ट में, हमने jQuery 3.0 की कुछ नई विशेषताओं पर एक नज़र डाली है, जो आपको बताती हैं कि यह जावास्क्रिप्ट को कैसे बदलती है।.

कहा से शुरुवात करे

यदि आप अपने लिए प्रयोग करने के लिए jQuery 3.0 डाउनलोड करना चाहते हैं, तो डाउनलोड पृष्ठ पर जाएं। यह अपग्रेड गाइड, या सोर्स कोड पर भी गौर करने लायक है.

यदि आप परीक्षण करना चाहते हैं कि आपका मौजूदा प्रोजेक्ट jQuery 3.0 के साथ कैसे काम करता है, तो आप jQuery माइग्रेट प्लगइन को एक कोशिश दे सकते हैं जो आपके कोड में संगतता समस्याओं की पहचान करता है। आप भविष्य के मील के पत्थर में भी एक झलक ले सकते हैं.

यह लेख कवर नहीं करता है सब jQuery 3.0 की नई विशेषताएं, केवल और अधिक दिलचस्प हैं: बेहतर कोड गुणवत्ता, नए ECMAScript 6 सुविधाओं का एकीकरण, एनिमेशन के लिए एक नया एपीआई, तार से बचने के लिए एक नया तरीका, एसवीजी समर्थन में वृद्धि, एसिंक्स कॉलबैक में सुधार, उत्तरदायी साइटों के साथ बेहतर संगतता। , और सुरक्षा बढ़ा दी है.

1. पुराना IE वर्कअराउंड निकाला गया

नई प्रमुख रिलीज का एक मुख्य लक्ष्य इसे बनाना था तेज और चिकना, इसलिए IE9 से संबंधित पुराने हैक और वर्कअराउंड- हटा दिया गया. इसका मतलब है कि यदि आप IE6-8 का समर्थन करना चाहते हैं या करना चाहते हैं, तो आपको नवीनतम का उपयोग करते रहना होगा 1.12 रिलीज, यहां तक ​​कि के रूप में 2.x श्रृंखला में पुराने इंटरनेट खोजकर्ताओं (IE9-) के लिए पूर्ण समर्थन नहीं है। डॉक्स में ब्राउज़र समर्थन पर नोट्स देखें.

ध्यान दें कि वहाँ भी हैं कई पदावनत सुविधाएँ jQuery में 3. अपग्रेड गाइड की एक बड़ी कमी यह है कि अपग्रेड की गई विशेषताएं - जून 2016 तक - समूहबद्ध नहीं हैं, इसलिए यदि आप उनमें रुचि रखते हैं, तो आपको उन्हें अपने ब्राउज़र के खोज टूल () के साथ देखना होगा Ctrl + F).

2. jQuery 3.0 सख्त मोड में चलता है

जैसा कि अधिकांश ब्राउज़र jQuery 3 द्वारा समर्थित सख्त मोड का समर्थन करते हैं, नई प्रमुख रिलीज़ को इस निर्देश को ध्यान में रखकर बनाया गया है.

यद्यपि jQuery 3 को सख्त मोड में लिखा गया है, यह जानना महत्वपूर्ण है आपके कोड को सख्त मोड में चलाने की आवश्यकता नहीं है, तो तुम फिर से लिखने की जरूरत नहीं है यदि आप jQuery के लिए माइग्रेट करना चाहते हैं तो आपका मौजूदा jQuery कोड 3. सख्त और गैर-सख्त मोड जावास्क्रिप्ट खुशी-खुशी सह-अस्तित्व में आ सकते हैं.

एक अपवाद है: ASP.NET के कुछ संस्करण कड़े मोड के कारण - हैं jQuery 3 के साथ संगत नहीं है. यदि आप ASP.NET के साथ शामिल हैं, तो आप डॉक्स में यहां दिए गए विवरण देख सकते हैं.

3. लूप्स के लिए ... का परिचय दिया जाता है

jQuery 3 कथन के लिए, एक नए प्रकार का समर्थन करता है के लिये पाश, ECMAScript 6. में पेश किया गया। यह एक और अधिक सीधा रास्ता देता है iterable वस्तुओं पर पाश, जैसे Arrays, Maps, और समूह.

JQuery में, के लिए लूप पूर्व की जगह ले सकता है $ .each (…) सिंटैक्स, और यह jQuery संग्रह के तत्वों के माध्यम से लूप को आसान बना सकता है.

ध्यान दें कि के लिए पाश होगा केवल काम या तो एक वातावरण में ECMAScript 6 का समर्थन करता है, या यदि आप एक जावास्क्रिप्ट कंपाइलर का उपयोग करें जैसे बाबेल.

4. एनिमेशन को एक नया एपीआई मिला

jQuery 3 एनिमेशन बनाने, एनिमेशन बनाने के लिए requestAnimationFrame () API का उपयोग करता है चिकनी और तेज चलाएं. नया API केवल उन ब्राउज़र में उपयोग किया जाता है जो इसका समर्थन करते हैं; पुराने ब्राउज़रों (यानी IE9) के लिए jQuery एनिमेशन को प्रदर्शित करने के लिए अपने पिछले एपीआई का उपयोग एक फालबैक विधि के रूप में करता है.

RequestAnimationFrame कुछ समय से बाहर है, यदि आप जानते हैं कि आपको क्या पता है या आपको इसका उपयोग क्यों करना चाहिए, तो सीएसएस ट्रिक्स में इसके बारे में एक अच्छी पोस्ट है.

5. विशेष अर्थ के साथ स्ट्रिंग्स से बचने के लिए नई विधि

नया jQuery.escapeSelector () विधि आपको तार या पात्रों से बचने की अनुमति देती है सीएसएस में कुछ और मतलब है सक्षम होने के लिए jQuery के चयनकर्ता में इसका उपयोग करें; जावास्क्रिप्ट दुभाषिया से बचने के बिना इसे ठीक से समझ नहीं सकते हैं.

डॉक्स हमें निम्न उदाहरण के साथ इस विधि को बेहतर ढंग से समझने में मदद करता है:

“उदाहरण के लिए, यदि पृष्ठ पर एक तत्व की एक आईडी है “abc.def” इसके साथ चयन नहीं किया जा सकता है $ ("# abc.def") क्योंकि चयनकर्ता के रूप में पार्स किया जाता है “आईडी वाला एक तत्व 'एबीसी' वह भी एक वर्ग है 'डीईएफ़'. हालाँकि, इसके साथ चुना जा सकता है $ ("#" + $ .स्केपस्केप ("abc.def")).”

मुझे यकीन नहीं है कि ऐसा मामला कितनी बार होता है, लेकिन यदि आप इस तरह की समस्या से टकराते हैं, तो अब आपके पास इसे ठीक करने का एक आसान तरीका है.

6. कक्षा हेरफेर तरीके एसवीजी का समर्थन करते हैं

दुर्भाग्य से, अभी भी jQuery 3 पूरी तरह से एसवीजी का समर्थन नहीं करता है, लेकिन jQuery के तरीके जो सीएसएस श्रेणी के नामों में हेरफेर करते हैं, जैसे कि .addClass () तथा .hasClass (), अब के लिए इस्तेमाल किया जा सकता है एसवीजी दस्तावेजों को लक्षित करें भी। इसका मतलब है कि आप संशोधित कर सकते हैं (जोड़ें, निकालें, टॉगल करें) या jQuery के साथ कक्षाएं ढूंढें स्केलेबल वेक्टर ग्राफिक्स में, फिर CSS के साथ कक्षाओं को स्टाइल करें.

7. आस्थगित वस्तुएं जेएस वादों के साथ अब संगत हैं

जावास्क्रिप्ट वादा - वस्तुओं का इस्तेमाल किया अतुल्यकालिक गणनाओं के लिए - ECMAScript 6 में मानकीकृत किया गया है; उनके व्यवहार और विशेषताएं वादा / ए + मानकों में निर्दिष्ट हैं.

JQuery 3 में, आस्थगित वस्तु नए वादे / ए + मानकों के अनुरूप बनाया गया है। आस्थगित हैं श्रृंखलाबद्ध वस्तुएँ यह संभव बनाने के लिए कॉलबैक कतार बनाएं.

नई सुविधा बदल जाती है कैसे एसिंक्रोनस कॉलबैक फ़ंक्शन निष्पादित किए जाते हैं; वादे डेवलपर्स को अतुल्यकालिक कोड लिखने की अनुमति दें जो समकालिक कोड में तर्क के करीब हो.

अपग्रेड गाइड से कोड उदाहरण देखें या, जावास्क्रिप्ट वादों की मूल बातें के बारे में इस महान स्कॉच.आईओ ट्यूटोरियल पर एक नज़र डालें.

8. jQuery.when () बहु-तर्क की व्याख्या अलग ढंग से करता है

$ .जब () विधि एक रास्ता प्रदान करती है कॉलबैक फ़ंक्शन निष्पादित करें. यह संस्करण 1.5 के बाद से jQuery का हिस्सा है। यह एक लचीली विधि है; यह शून्य तर्कों के साथ भी काम करता है, और यह एक या अधिक वस्तुओं को भी तर्क के रूप में स्वीकार कर सकता है.

jQuery 3 जिस तरह से तर्क देता है, उसे बदल देता है $ .जब () व्याख्या की जाती है जब वे होते हैं $ तो फिर () तरीका जिसके साथ आप अतिरिक्त कॉलबैक को तर्क के रूप में पास कर सकते हैं $ .जब () तरीका.

JQuery 3 में, यदि आप के साथ एक इनपुट तर्क जोड़ते हैं फिर() करने की विधि $ .जब (), तर्क होगा एक वादा-संगत "तत्कालीन" के रूप में व्याख्या की गई.

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

9. नया शो / छिपाएँ तर्क

बढ़ाने के लिए उत्तरदायी डिजाइन के साथ संगतता, से संबंधित कोड तत्वों को दिखाना और छिपाना jQuery 3 में अपडेट किया गया है.

अब से, ए .प्रदर्शन(), .छिपाना(), तथा .टॉगल () तरीकों पर ध्यान दिया जाएगा इनलाइन शैलियों, गणना शैलियों के बजाय, इस तरह से वे करेंगे बेहतर सम्मान स्टाइलशीट में बदलाव.

नया कोड सम्मान करता है प्रदर्शन जब भी संभव हो तो स्टाइलशीट के मान, जिसका अर्थ है कि CSS नियम कर सकते हैं गतिशील रूप से बदलें डिवाइस पुनर्संयोजन और विंडो आकार जैसे घटनाओं पर.

डॉक्स दावा करता है कि सबसे महत्वपूर्ण परिणाम होगा:

"परिणामस्वरूप, डिस्कनेक्ट किए गए तत्व हैं अब छिपा हुआ नहीं माना जाता है जब तक कि उनके पास इनलाइन न हो कुछ भी डिस्प्ले मत करो;, और इसीलिए .टॉगल () मर्जी अब उनमें अंतर नहीं है कनेक्ट किए गए तत्वों से jQuery 3.0 के रूप में। "

अगर आप बेहतर तरीके से समझना चाहते हैं नए शो के परिणाम / तर्क को छिपाते हैं, यहाँ इसके बारे में एक दिलचस्प गितुब चर्चा है.

jQuery डेवलपर्स ने नया व्यवहार कैसे काम करेगा, इसके बारे में Google डॉक्स तालिका भी प्रकाशित की विभिन्न उपयोग मामलों में.

10. XSS हमलों के खिलाफ अतिरिक्त सुरक्षा

jQuery 3 जोड़ा गया एक अतिरिक्त सुरक्षा परत डेवलपर्स को निर्दिष्ट करने के लिए आवश्यक क्रॉस-साइट स्क्रिप्टिंग (XSS) हमलों के खिलाफ dataType: "script" के विकल्पों में $ .Ajax () और यह $ .Get () तरीकों.

दूसरे शब्दों में, यदि आप क्रॉस-डोमेन स्क्रिप्ट अनुरोधों को निष्पादित करना चाहते हैं, तो आप यह घोषित करना चाहिए इन विधियों की सेटिंग में.

डॉक्स के अनुसार, "दूरस्थ साइट" के दौरान नई आवश्यकता उपयोगी होती है गैर-स्क्रिप्ट सामग्री वितरित करता है लेकिन बाद में निर्णय लेता है ऐसी स्क्रिप्ट परोसें जिसमें दुर्भावनापूर्ण इरादे हों"परिवर्तन प्रभावित नहीं करता है।" $ .GetScript () विधि, जैसा कि यह सेट करता है dataType: "script" स्पष्ट रूप से विकल्प.