2013-02-22 48 views
5

चेन करने योग्य कार्यों को कैसे लिखें लेकिन $ .fn प्रदूषित न करें? केवल मेरी प्लगइन के अंदर उपयोग करने के लिए कार्यों को लिखें। क्या यह संभव है?स्थानीय उपयोग के लिए jquery श्रृंखला योग्य कार्यों को कैसे लिखें?

$('.myclass').makeSomething().andOneMoreFunction().andLast(); 

यह सही दृष्टिकोण है?

यूपीडी। मेरे मामले में सबसे अच्छा समाधान विस्तार विधि है:

String.prototype.getMyLength = function(){return this.length;} 

और अब मैं इस तरह किसी भी स्ट्रिंग को यह समारोह लागू कर सकते हैं:

var mystring = "test"; 
mystring.getMyLength(); 

या

"teststring".getMyLength() 

और यह chainable बनाने :

String.prototype.getMe = function(){return this;} 
"string".getMe().getMe().getMe().getMe().getMe(); 

उत्तर के लिए धन्यवाद!

उत्तर

5

आप जो भी चाहते हैं उसे चेन कर सकते हैं। यदि आप स्वयं को परिभाषित करते हैं तो यह महत्वपूर्ण है कि आप कार्य के अंत में return this करें।

यदि आप स्वयं कुछ जावास्क्रिप्ट लिखना चाहते हैं तो आप भी श्रृंखला बना सकते हैं! यह सिर्फ आपके द्वारा लौटने पर निर्भर करता है। तो यदि आप किसी अन्य वस्तु को वापस करते हैं, तो आप उस वस्तु से श्रृंखला बना सकते हैं। इसके लिए वापसी मूल्य का उपयोग किया जाता है।

उदाहरण

var obj = { 
    test : function(){ 
     alert("Y"); 
     return this; 
    }, 
    test2 : function(){ 
     alert("2"); 
     return this; 
    } 
} 
obj.test().test2(); // And so on since it returns this 

jQuery प्लगइन एपीआई

$.fn.test = function(){ 
    var methods = { 
     method0 : function(){ 
      alert("method0"); 
      return this; 
     } 
    }; 
    return methods; 
} 
var api = $("obj").test(); // Returns methods 
api.method0(); // Calling a function from the returned methods. 
// OR 
$("obj").test().method0(); 

समारोह से ऊपर jQuery अब chainable नहीं है। तो आप $("obj").test().addClass("test") का उपयोग नहीं कर सकते क्योंकि आप अपना स्वयं का एपीआई वापस कर देते हैं!

+1

लेकिन सवाल यह है कि '$ .fn'' प्रदूषित किए बिना इसे कैसे किया जाए। मुझे लगता है कि यदि आप केवल उन प्लगइन में आंतरिक रूप से उन कार्यों का उपयोग करना चाहते हैं और नाम संघर्ष से बचना चाहते हैं तो यह बहुत उचित है। – 11684

+1

'चेतावनी' पर 'console.log' पर विचार करें] (http://stackoverflow.com/q/8203473/1615483) –

+1

क्या मेरा उदाहरण 2 प्रश्न का उत्तर देता है? मैंने चेनिंग का उपयोग करने के 2 उदाहरण दिए हैं। दूसरा एपीआई देता है। तो आंतरिक रूप से इस तरह भी इस्तेमाल किया जा सकता है। केवल आपके वापसी मूल्य पर निर्भर करता है। @PaulS। यह सिर्फ psuedo कोड है। – Niels

0

जब आप a.foo() पर कॉल करते हैं, तो foo फ़ंक्शन thisa पर सेट किया गया है। आप इसे अपने लाभ के लिए उपयोग कर सकते हैं।

यह भी याद रखें कि अभिव्यक्तिa.foo() फ़ंक्शन के भीतर से आप जो भी return डी का मूल्यांकन करते हैं।

तो, बस this लौटाएं।

फिर a.foo()a वापस करने के लिए मूल्यांकन करता है, और (a.foo()).bar()a पर a.foo() बुला तो a.bar() बुला ... अर्थात श्रृंखलित संचालन के बराबर हो जाता है!

$.fn विशेष रूप से जादुई — नहीं है, यह उपर्युक्त तर्क का उपयोग उसी तरीके से करता है जैसा आप चाहते हैं।

3

आप पसंद की विधि निर्दिष्ट करने के लिए अपने प्लगइन के फ़ंक्शन के पहले पैरामीटर का उपयोग करके प्रदूषण से बच सकते हैं; उदाहरण

(function() { 
    var o = { // object holding your methods 
     'bar': function() {console.log('bar', this); return this;}, 
     'foobar': function() {console.log('foobar', this); return this;} 
    }; 
    $.fn.foo = function (method /*, args*/) { 
     return o[method].apply(
      this, 
      Array.prototype.slice.call(arguments, 1) // pass your args 
     ); 
    }; 
}()); 

और के लिए तो

$('something').foo('bar').foo('foobar'); 
/* 
bar, thisobj 
foobar, thisobj 
*/ 

इस तरह आप सामान्य रूप में jQuery वस्तु का उपयोग, भी रहते हैं।