मैं jquery UI API का अनुकरण कैसे कर सकता हूं?

Question

मैंने पहले मूल jQuery प्लगइन्स लिखे हैं, लेकिन मैं अपने सिर को और अधिक जटिल बनाने के लिए संघर्ष कर रहा हूं।

$('#mydiv').sortable({name: 'value'}); // constructor, options 
$('#mydiv').sortable("serialize"); // call a method, with existing options 
$('#mydiv').sortable('option', 'axis', 'x'); // get an existing option 

मैं कोशिश की है निम्नलिखित:

(function($){ 
    $.fn.myPlugin = function(cmd){ 
     var config = { 
      default: 'defaultVal' 
     }; 

     if(typeof cmd === 'object'){ 
      $.extend(config, cmd); 
     } 

     function _foo(){ 
      console.log(config.default); 
     } 

     if(cmd==='foo'){ 
      return _foo(); 
     } 

     this.each(function(){ 
      // do default stuff 
     }); 
    } 
})(jQuery); 

$('#myElement').myPlugin({default: 'newVal'}); 
$('#myElement').myPlugin('foo'); 

मैं यहाँ देखना चाहेंगे क्या है 'newVal' किया जा रहा है मैं jQuery यूआई है, जो इस तरह काम करता है के एपीआई का अनुकरण करने की तलाश कर रहा हूँ लॉग इन किया, लेकिन मैं इसके बजाय 'defaultVal' देख रहा हूँ; जब भी मैं तत्व पर .myPlugin() को कॉल करता हूं, प्लगइन को बुलाया जा रहा है और स्क्रैच से शुरू किया जा रहा है।

मैंने _foo.call (यह) और कुछ अन्य रूपों का उपयोग करने का भी प्रयास किया है। कोई आनंद नहीं है।

एक तरह से, मैं समझता हूं कि यह क्यों हो रहा है, लेकिन मुझे पता है कि यह jQuery UI के समान ही करना संभव है। मैं बस नहीं देख सकता!

(मुझे लगता है कि jQuery यूआई इस सब को संभालने के लिए विजेट कारखाने का उपयोग करता है की सराहना करते हैं, लेकिन मैं प्लगइन के लिए एक आवश्यकता है कि बनाने के लिए नहीं करना चाहती।)

Answer 1

शायद क्या आप चाहते हैं इस ...

है

(function($){ 

    var config = { 
     default: 'defaultVal' 
    }; 

    $.fn.myPlugin = function(cmd){ 

     if(typeof cmd === 'object'){ 
      $.extend(config, cmd); 
     } 

     function _foo(){ 
      console.log(config.default); 
     } 

     if(cmd==='foo'){ 
      return _foo(); 
     } 

     this.each(function(){ 
      // do default stuff 
     }); 
    } 
})(jQuery); 

$('#myElement').myPlugin({default: 'newVal'}); 
$('#myElement').myPlugin('foo'); 

myPlugin फ़ंक्शन के बाहर परिवर्तनीय को ले जाएं। यह परिवर्तन config का कारण केवल एक बार आरंभ किया जाएगा: जब आपका प्लगइन फ़ंक्शन बनाया जाता है।

Answer 2

आप config घोषणा कर रहे समारोह कॉल बजाय के रूप में यह द्वारा इस्तेमाल किया एक बंद के दौरान। इस प्रयास करें:

(function($){ 
    var config = { 
     default: 'defaultVal' 
    }; 
    $.fn.myPlugin = function(cmd){ 

     if(typeof cmd === 'object'){ 
      $.extend(config, cmd); 
     } 

     function _foo(){ 
      console.log(config.default); 
     } 

     if(cmd==='foo'){ 
      return _foo(); 
     } 

     this.each(function(){ 
      // do default stuff 
     }); 
    } 
})(jQuery); 

$('#myElement').myPlugin({default: 'newVal'}); 
$('#myElement').myPlugin('foo'); 

इसके अलावा, आप, कैशिंग डेटा के लिए jQuery data API पर गौर कर सकता है खासकर यदि आप प्रति पृष्ठ सिर्फ एक उदाहरण है करने के लिए नहीं जा रहे हैं।