jQuery की कोई सीमा नहीं

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

प्रत्येक का उपयोग न करें

बल्कि, "वास्तव में नहीं", लेकिन यह कहां तक ​​उचित नहीं है:

var a = [1,2,3,4];



$.each(a, function ()

{

console.log( this );

});



// !



इस तरह बेहतर:

for ( var i = 0, l = a.length; i < l; i++)

{

console.log(a[i]);

}

सामान्य दृष्टिकोण के साथ, आप लूप को समाप्त करने के लिए कॉलबैक फ़ंक्शन और अनावश्यक चेक कॉल करने में समय बर्बाद नहीं करते हैं। एक और उदाहरण:

var b = {c: 1, d: 2, e: 3};



$.each(b, function (k)

{

console.log(k, this );

});



//

इस तरह बेहतर:

for ( var k in b)

{

if ( b.hasOwnProperty(k) )

{

console.log(k, b[k]);

}

}

प्लगइन्स लिखें

हर उस चीज़ के लिए प्लग इन लिखें जो चलती है और चलती है। प्लगइन के डिजाइन पर आज बिताए गए 10 मिनट कल विकास की गति को बढ़ाएंगे।



जीवन से एक उदाहरण। हमें टेक्स्टरी क्षेत्र में पाठ की उपलब्धता के आधार पर सबमिट बटन को सक्षम / अक्षम करने की आवश्यकता है। पहला जन्म प्लगइन:

$.fn.inputChange = function (callback)

{

return this .bind(

{

mousedown: callback,

keyup: callback,

blur: callback

});

};

और यह इस तरह काम करता है:

var submit = $( "#submit" );



// 1

$( "#text" ).inputChange( function ()

{

submit[0].disabled = this .value.length === 0;

});



// 2

$( "#text" ).inputChange( function ()

{

if ( this .value.length === 0)

{

submit.attr( "disabled" , "disabled" );

}

else

{

submit.removeAttr( "disabled" );

}

});

हालांकि, दोनों विकल्प आदर्श से बहुत दूर हैं: 1 एक त्रुटि के साथ गिर सकता है यदि अचानक जमा के अंदर कोई तत्व नहीं है, तो 2 बहुत बोझिल है।



दूसरा प्लगइन पैदा हुआ था:

$.fn.disable = function ( bool )

{

return this .each( function ()

{

this .disabled = bool ;

});

};

और यह प्लगइन $ .fn.inputChange के साथ इस तरह काम करता है:

$( "#text" ).inputChange( function ()

{

submit.disable( this .value.length === 0);

});

हालांकि, एक समस्या थी कि इनपुटचेंज में निर्दिष्ट एक भी घटना क्लिपबोर्ड से पेस्ट को संभाल नहीं सकती है। Googling, हम निर्णय पर आए:

$.fn.paste = function (listener)

{

if ($.browser.msie)

{

return this .bind( "paste" , function ( event )

{

var that = this ;



setTimeout(

function ()

{

listener.apply(that, [ event ]);

},

.001

);

});

}

else

{

return this .bind( "input" , function ( event )

{

listener.apply( this , [ event ]);

});

}

};

और inputChange प्लगइन निम्नलिखित फार्म लिया:

$.fn.inputChange = function (callback)

{

return this

.paste(callback)

.bind(

{

keyup: callback,

blur: callback

});

};

तो "ईंट से ईंट" हम एक साथ काम कर रहे कार्यात्मक डालते हैं, पुस्तकालय को उत्कृष्ट प्लगइन्स के साथ पूरक करते हैं जो निश्चित रूप से हमारे लिए काम में आएंगे , और संभवतः आपके लिए ...

मूल कोड

बहुत से लोगों की राय है कि jQuery सब कुछ कर सकता है। और कुछ हद तक वे सही हैं, लेकिन यह अधिकार उन्हें मूल जेएस के बारे में भूलने का कारण नहीं देता है।



मैं एक उदाहरण दूंगा:

function warning(text)

{

$( "<div id='alert' class='warning'></div>" )

.appendTo( $( document .body) )

.css(

{

"padding" : "10px" ,

"background-color" : "red" ,

"color" : "white"

})

.html(text)

.append(

$( "<button>OK</button>" ).attr( "title" , "Close me!" ).click( function ()

{

$( this ).parent().remove();

})

);

}

कई मायनों में, कोड उंगली से चूसा जाता है, लेकिन केवल प्रदर्शन प्रयोजनों के लिए। अब शुद्ध JS में कोड लिखने का प्रयास करें:

function warning(text)

{

var div = document .createElement( "div" );

div.id = "alert" ;

div.className = "warning" ;



div.style.padding = "10px" ;

div.style.backgroundColor = "red" ;

div.style.color = "white" ;



div.innerHTML = text;



var button = document .createElement( "button" );

button.setAttribute( "title" , "Close me!" );

button.innerHTML = "OK" ;



$(button).click( function ()

{

div.parentNode.removeChild(div);

});



div.appendChild(button);

document .body.appendChild(div);

}

मैंने जानबूझकर jQuery का उपयोग करके एक घटना जोड़ी है, क्योंकि jQuery addEventListener / संलग्नक क्रॉस-ब्राउज़र कॉल को अच्छी तरह से जोड़ता है, ब्राउज़रों के बीच की सीमाओं को मिटा देता है और इसके लिए jQuery के रचनाकारों का बहुत सम्मान होता है। बाकी डोम के साथ काम करने के लिए मानक तरीकों का उपयोग करता है।



दोनों उदाहरण अच्छे हैं: पहला सुरुचिपूर्ण है, दूसरा तेज है। आप डोम के साथ कैसे काम करते हैं, इस पर कई प्रतिबंध हैं, लेकिन यदि आप jQuery (MooTools, प्रोटोटाइप, ExtJS, आदि) का उपयोग करते हैं, तो मूल जेएस के बारे में मत भूलो, जो हमेशा तेज होता है। आखिरकार, कोई भी ढांचा आपको ढांचे में नहीं डालता है, बल्कि आपको केवल उपकरण देता है।