Question

I’m starting to make plugins and I’m having trouble with variable scope inside the plugin. I want to be able to access my options from everywhere inside the plugin but not sure how, the var $opts is only visible to that function and my public functions can’t access it. Does anyone know how I would do that?

Thanks in advance, oh and if anyone notices any mistakes in the way I’m making the plugin don’t hesitate to mention them 😀

//@@@@ Start of myViewport Plugin @@@@\\
(function($) {

  $.fn.myViewport = function(options) {
    var $opts = $.extend({}, $.fn.myViewport.defaults, options);

    //Plugin Here
    return this.each(function() {           

        alert('Initialising Plugin!' + $opts.privateText + $opts.publicText);
        myPrivateFunction();
    });
  };

  // private functions
  function myPrivateFunction($opts) {
        alert($opts.privateText);
  };

  // public functions
  $.fn.myViewport.myPublicFunction = function() {
        alert($opts.publicText);
  };

  // plugin defaults
  $.fn.myViewport.defaults = {
    privateText: 'This is a text from the privateText defaults',
    publicText: 'This is a text from the publicText defaults'
  };

})(jQuery);
//@@@@ End of myViewport Plugin @@@@\\

Answer 1

Like this :

(function($) {

  $.fn.myViewport = function(options) {
    var o = $.extend(vp, $.fn.myViewport.defaults, options);

    //Plugin Here
    return this.each(function() {           

        alert('Initialising Plugin!' + o.privateText + o.publicText);
        myPrivateFunction();
    });
  };

  var vp = $.fn.myViewport;

  // private functions
  function myPrivateFunction() {
        alert(vp.privateText);
  };

  // public functions
  vp.myPublicFunction = function() {
        alert(vp.defaults.publicText);
  };

  // plugin defaults
  vp.defaults = {
    privateText: 'This is a text from the privateText defaults',
    publicText: 'This is a text from the publicText defaults'
  };

})(jQuery);

Demo here.