api - Creating a jQuery Plugin, How do I do Custom Scopes? -

मैं एक एपीआई के साथ एक jQuery प्लगइन बनाना चाहूंगा:

  $ ( "#chart") pluginName () attr ( "my_attr")।।  

इनके बजाय:

  $ ("# चार्ट")। प्लगइननाम_एटीआर ("my_attr"); $ .pluginName.attr ("# चार्ट", "my_attr"); मूल रूप से, jQuery के उन लोगों के समान काम करने वाली प्रत्येक विधि का नेमस्पेस करने के बजाय, मैं कस्टम एपीआई के तरीकों को "गुंजाइश" करना चाहता हूं, जहां पर  $ (" #chart) .pluginName ()  एक ऑब्जेक्ट वापस करेगा जैसे कि  get ,  attr ,  ढूंढें , और कुछ अन्य होंगे पूरी तरह से पुनः लिखा। 
 
 मुझे यकीन है कि यह एक अच्छा विचार नहीं है क्योंकि यह सम्मेलन को तोड़ता है (क्या है?), लेकिन इसके बाद के दो विकल्पों की तुलना में, यह आसान और अधिक पठनीय और शायद अधिक अनुकूलित है। आपका विचार क्या हैं? 
 

मैं इस विचार के साथ प्रयोग कर रहा हूं।

लगता है जैसे कि आप बस jQuery ऑब्जेक्ट के लिए कार्य को संशोधित कर सकते हैं जो प्लगइन प्राप्त करता है, और उस पर वापस लौटता है।

ऐसा कुछ:

  $ .fn.tester = function () {// प्लगइन this.css = function () {// इस jQuery ऑब्जेक्ट console.log (.selector) के लिए .css () विधि को संशोधित करें; // अब यह सिर्फ चयनकर्ता को लॉग करता है इस वापसी; // संशोधित ऑब्जेक्ट लौटें} यह लौटा; // संशोधित ऑब्जेक्ट लौटाएं}  

---

(मूल से अपडेट किया गया .html () के रूप में भी)

  $। Fn.tester = function () {this.css = function () {console.log (this.selector); // यह एक चयनकर्ता को लौटाता है; } This.html = कार्य () {अलर्ट (this.selector); // यह एक चयनकर्ता को यह चेतावनी देता है; } यह वापस; }; // .css () और .html () को .tester () के बाद कहा जाता है, // अब वे नए व्यवहार को अपनाने के लिए, और अभी भी बाकी तरीके से कुशलता $ ('# test1 ।।। ') .tester () सीएसएस () एचटीएमएल () चेतन ({अस्पष्टता: .3}); // .css () और .html () अभी भी इस एक के लिए सामान्य रूप से व्यवहार करते हैं / जो कि प्लगइन $ ('# test2') का उपयोग नहीं करता है। Css ('backgroundcolor', 'blue')। Html ('नया मान ';);  

---

संपादित करें:

वैकल्पिक रूप से, यदि आप उन तत्वों को कैश करने जा रहे हैं जिनमें कस्टम विधियां लागू किया जाना चाहिए, आप .apply () विधियों को उपयोग करने से पहले कर सकते हैं।

ऊपर दिए गए उदाहरण पर निर्माण करने के लिए:

  var $ Test1 = $ ('# test1'); // कैश तत्व $ .fn.tester.apply ($ test1, [this]); // लागू () नए तरीकों $ test1.css ()। Html ()। चेतन ({अस्पष्टता: .3}); // नए तरीकों का प्रयोग करें