jQuery

2010-05-20 5 views
7

जैसे जावास्क्रिप्ट प्लगइन्स डिज़ाइन पैटर्न क्या कोई जावास्क्रिप्ट में अवधारणात्मक (और उम्मीद है कि मुझे समझने के लिए) में एक बहुत ही सरल मूल उदाहरण लिख सकता है कि jQuery प्लगइन डिज़ाइन पैटर्न कैसे किया जाता है और यह कैसे काम करता है?jQuery

मुझे jQuery के लिए प्लगइन बनाने में कोई दिलचस्पी नहीं है (कोई jQuery कोड यहां सभी पर)। मुझे व्याख्या करने के लिए प्लगइन अवधारणा को समझाने के लिए एक सरल स्पष्टीकरण (शायद जावास्क्रिप्ट कोड के साथ) में रूचि है।

Plz मुझे जाने और jQuery कोड पढ़ने के लिए जवाब नहीं देता, मैंने कोशिश की, लेकिन मैं बहुत जटिल हूं, अन्यथा मैं यहां कोई प्रश्न नहीं पोस्ट करता।

धन्यवाद!

उत्तर

0

यह जावास्क्रिप्ट प्रोटोटाइप अभिविन्यास का उपयोग करते हुए, कई अन्य जेएस ढांचे के रूप में काम करता है।

उदाहरण के लिए आप एक साधारण समारोह

var alertHelloWorld = function() { 
    alert('hello world'); 
} 

घोषित और फिर किसी मौजूदा ऑब्जेक्ट में जोड़ देते हैं (डोम नोड्स सहित)

document.doMyAlert = alertHelloWorld; 

आप इस

document.doMyAlert(); 

करते हैं कर सकते हैं चेतावनी HelloWorld फ़ंक्शन निष्पादित किया जाएगा

आप जावास्क्रिप्ट वस्तु प्रोटोटाइप here

+0

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

+0

हां, इस प्रकार घोषित वस्तुओं पर प्रोटोटाइप ऑब्जेक्ट मौजूद है, यह एक समान तरीके से काम करता है। मैं नीचे लिंक ऑब्जेक्ट.प्रोटोटाइप.in ओबीजे = 1; से कॉपी/पेस्ट कर सकता था; फ़ंक्शन ए() { this.inA = 2; } एप्रोटोटाइप.inAProto = 3; बीप्रोटोटाइप = नया ए; // बी में ए प्रोटोटाइप श्रृंखला बीप्रोटोटाइप.कोनस्ट्रक्टर = बी; फ़ंक्शन बी() { this.inB = 4; } B.prototype.inBProto = 5; एक्स = नया बी; document.write (x.inObj + ',' xxA + ',' + x.inAProto + ',' + x.inB + ',' + x.inBProto); – Benoit

5

jQuery बारे में पढ़ सकते fn नामित एक आंतरिक वस्तु में संग्रहीत कार्यों का एक पुस्तकालय है। ये वे हैं जिन्हें आप प्रत्येक jQuery ऑब्जेक्ट पर कॉल कर सकते हैं।

जब आप $("div.someClass") करते हैं तो आपको उस वर्ग के सभी <div> तत्वों वाला एक jQuery ऑब्जेक्ट मिलता है। अब आप लागू करने के लिए $("div.someClass").each(someFunction) कर सकते हैं। इसका मतलब है कि each()fn (इस मामले में एक अंतर्निहित) में संग्रहीत कार्यों में से एक है।

यदि आप आंतरिक fn ऑब्जेक्ट को बढ़ाते हैं (जोड़ते हैं), तो आप स्वचालित रूप से एक ही वाक्यविन्यास में अपना कस्टम फ़ंक्शन उपलब्ध कराते हैं। आइए मान लें कि आपके पास एक ऐसा फ़ंक्शन है जो कंसोल पर सभी तत्वों को लॉग करता है, जिसे log() कहा जाता है। आप इस फ़ंक्शन को $.fn पर जोड़ सकते हैं, और उसके बाद इसे $("div.someClass").log() के रूप में उपयोग कर सकते हैं।

हर समारोह fn वस्तु के साथ जोड़ दिया इस तरह से कि अंदर समारोह शरीर, this कीवर्ड jQuery वस्तु, जिसका उपयोग आपने को इंगित करेगा में बुलाया जाएगा।

सामान्य अभ्यास कस्टम फ़ंक्शन के अंत में this वापस करना है, ताकि विधि श्रृंखला बंद न हो: $("div.someClass").log().each(someFunction)

$.fn ऑब्जेक्ट में फ़ंक्शंस जोड़ने के कई तरीके हैं, कुछ दूसरों की तुलना में सुरक्षित हैं। एक बहुत सुरक्षित एक करना है:

jQuery.fn.extend({ 
    foo: function() { 
    this.each(function() { console.log(this.tagName); }); 
    return this; 
    } 
}) 
1

तोमालक पहले से ही लगभग हर चीज पोस्ट कर चुके हैं जिसे आपको जानना है।

एक आखिरी चीज है जो jQuery को के साथ इस कीवर्ड के साथ चाल करने में मदद करती है।

यह amethod कहा जाता है लागू()

var somefunction=function(){ 
alert(this.text); 
} 
var anObject={text:"hello"}; 

somefunction.apply(anObject); 
//alert "hello" will happen 

यह वास्तव में इसका सारांश बनाने ताकि ढांचा/प्लगइन उपयोगकर्ताओं सिर्फ इस के रूप में अंतर्ज्ञान उन्हें बताता है का प्रयोग करेंगे में मदद करता है, वहाँ