प्रभावी रूप से jQuery का उपयोग करने के लिए नियम

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

1. प्रभावी तत्व खोज

सबसे तेज़ तरीका पहचानकर्ता द्वारा तत्वों की खोज करना है: $ ('# someId'), दूसरा सबसे तेज़ टैग नाम से खोज करना है: $ ('tagName')। उनके निष्पादन की उच्च गति इस तथ्य के कारण है कि वे आंतरिक जावास्क्रिप्ट फ़ंक्शंस का उपयोग करके कार्यान्वित किए जाते हैं: getElementById () और getElementsByTagName ()। इस संबंध में, कई नियम दिखाई देते हैं।



(अधिक स्पष्टता के लिए, मैं उस पृष्ठ के पाठ को इंगित करूंगा, जिसमें उदाहरणों से JS कोड लागू होगा)

< div id ="content" >

< form method ="post" action ="/" >

< h2 > </ h2 >

< ul id ="color_light" >

< li >< input type ="radio" class ="on" name ="light" value ="red" /> </ li >

< li >< input type ="radio" class ="off" name ="light" value ="yellow" /> </ li >

< li >< input type ="radio" class ="off" name ="light" value ="green" /> </ li >

</ ul >

< input class ="button" id ="color_button" type ="submit" value ="Go" />

</ form >

</ div >

* This source code was highlighted with Source Code Highlighter .

1. यदि आप एक आइटम की तलाश कर रहे हैं, तो पहचानकर्ता द्वारा खोज का उपयोग करें:

$('#color_button')



- जितनी जल्दी हो सके निष्पादित किया जाएगा

$('#content .button')



- धीमी होगी

$('.button:first')



- यहां तक ​​कि धीमी



2. यदि आप तत्वों के एक समूह की तलाश कर रहे हैं, तो पहचानकर्ता के साथ निकटतम सामान्य रिश्तेदार को इंगित करें:

$('#content input')



सिर्फ $('input')



से अधिक कुशल होगा।



3. यदि आप कक्षा द्वारा आइटम ढूंढ रहे हैं, तो टैग नाम निर्दिष्ट करें:

$('input.button')



$ ('बटन') की तुलना में तेज़ी से खोज करेंगे। पहले मामले में, jQuery पहले सभी इनपुट तत्वों को खोजेगा, और पहले से ही बटन वर्ग के साथ तत्वों की खोज करेगा। और दूसरे मामले में, पृष्ठ के सभी तत्वों को इसके लिए गणना की जाएगी।



पूर्वगामी से, दो मूल नियमों को काटा जा सकता है:

1) एकल आइटम की खोज करने के लिए, खोज आईडी का उपयोग करें: $('#someId')





2) तत्वों के समूह की खोज करते समय, निम्न सूत्र से चिपके रहने का प्रयास करें: $('#someId tagName.someClass')







और फिर भी, निम्नलिखित संयोजनों के साथ आईडी द्वारा अपनी खोज को बेहतर बनाने का प्रयास न करें:

$('tagName#someId')

$('#wrapId #someId')





यह केवल खोज को धीमा कर देगा।

2. आइटम खोज परिणाम का पुन: उपयोग करें

आपको एक ही तत्व को बार-बार नहीं खोजना चाहिए, यह काफी महंगी प्रक्रिया है, भले ही आप सबसे तेज चयनकर्ता का उपयोग करें:

$('#myElement').bind('click', function(){...});

. . .

$('#myElement').css('border', '3px dashed yellow');

. . .

$('#myElement').fadeIn('slow');



इस स्थिति में, jQuery हर बार पहचानकर्ता myElement के साथ एक तत्व की खोज करेगा। तत्व को एक बार ढूंढना, उसे सहेजना और फिर उसके लिए आवश्यक संचालन लागू करना बहुत समझदारी होगी:

var myElement = $('#myElement');

. . .

myElement.bind('click', function(){...});

. . .

myElement.css('border', '3px dashed yellow');

. . .

myElement.fadeIn('slow');



यदि आपकी स्क्रिप्ट के काम के दौरान समान तत्वों का उपयोग अक्सर किया जाता है, तो इन तत्वों को केवल एक बार खोजना और परिणाम को वैश्विक स्तर पर सहेजना बुद्धिमानी होगी:

window.elements;

function init()

{

elements = $('#someId tagName.someClass');

}



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

$('#myForm input:checkbox') //

$('#myForm input:text') //

$('#myForm input:text[value != ""]') //

. . .



इसके बजाय, आप फॉर्म के सभी तत्वों को एक बार पा सकते हैं, और यदि आवश्यक हो, तो वहां से आवश्यक चीजें प्राप्त करें:

var inputs = $('#myForm input');

inputs.filter(':checkbox') //

inputs.filter(':text') //

inputs.filter(':text[value != ""]') //

. . .



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

myList = $('#myList');

. . .

myList.find('li:first').remove(); //

myList.find('li.showed').hide(); // showed



3. DOM के साथ अनावश्यक जोड़तोड़ से बचें

यहां मुख्य विचार यह है कि यदि आप पृष्ठ पर कई परिवर्तन करना चाहते हैं (तत्वों को जोड़ें / बदलें), तो इन जोड़तोड़ों को स्थानीय रूप से करें और उसके बाद ही DOM में परिवर्तन करें। उदाहरण के लिए, यदि आप सूची में एक सौ नए तत्वों को जोड़ना चाहते हैं, तो यह तत्व द्वारा इस प्रकार करना गलत होगा:

var top_100_list = [...]; //

$mylist = $('#mylist'); //



for (var i=0; i< top_100_list.length; i++)

$mylist.append('<li>' + top_100_list[i] + '</li>');



सभी तत्वों को एक साथ सम्मिलित करना बहुत अधिक कुशल है:

var top_100_list = [...]; //

var li_items = ""; // html-

$mylist = $('#mylist'); //



for (var i=0; i< top_100_list.length; i++)

li_items += '<li>' + top_100_list[i] + '</li>';

$mylist.append(li_items);



यदि सम्मिलित तत्वों का समूह एक तत्व में "लिपटा हुआ" हो तो भी अधिक लाभ प्राप्त किया जा सकता है। इसलिए, यदि हमारे पास सूची की सामग्री को सौ नए तत्वों के साथ बदलने का कार्य था, तो सबसे इष्टतम यह विकल्प होगा:

var top_100_list = [...]; //

var new_ul = "<ul id='mylist'>"; // html-

$mylist = $('#mylist'); //



for (var i=0; i< top_100_list.length; i++)

new_ul += '<li>' + top_100_list[i] + '</li>';

new_ul += "</ul>";

$mylist.replaceWith(new_ul);



स्थानीय रूप से तत्वों को बदलने से क्लोन () विधि में मदद मिलेगी, जो तत्वों की प्रतियां बनाता है, साथ ही उनकी सभी सामग्री भी। प्रतियों में सभी आवश्यक परिवर्तन करने के बाद, आप उन्हें पुराने संस्करणों के बजाय DOM में वापस पेस्ट कर सकते हैं (यह प्रतिस्थापन () विधि का उपयोग करके किया जा सकता है)।

4. ईवेंट प्रतिनिधिमंडल का उपयोग करें

कभी-कभी, आपको तत्वों के एक बड़े समूह पर एक ही घटना संचालकों को स्थापित करना होगा। उदाहरण के लिए, आपको सूची आइटम पर माउस क्लिक हैंडलर स्थापित करने की आवश्यकता हो सकती है। ऐसे मामलों में, सूची के प्रत्येक तत्व पर हैंडलर स्थापित करने के बजाय, आप सूची में एक ही हैंडलर स्थापित कर सकते हैं। जैसा कि आप जानते हैं, मानक जावास्क्रिप्ट घटनाओं को एक तत्व पर निकाल दिया जाता है, फिर उसके सभी पूर्वजों (मूल तत्व, फिर दादा दादी, आदि) पर कॉल किया जाता है। इसलिए, सूची के एक विशिष्ट तत्व पर एक घटना होने के बाद, इसे सूची के ऑब्जेक्ट पर ही बुलाया जाएगा। हैंडलर को दिया गया ईवेंट ऑब्जेक्ट आपको यह समझने में मदद करेगा कि ईवेंट किसके साथ हुआ है, या इसके ईवेंट। इसमें हमेशा मूल ईवेंट स्रोत का DOM ऑब्जेक्ट होता है:

$('#myList').click(function(event){

$(event.target).addClass('clicked'); // clicked

});