Change Defaults of a Plugin

Question

I understand that you can create a plugin with public defaults like this:

(function($){
$.fn.hilight = function(options) {
   var opts = $.extend({}, $.fn.hilight.defaults, options);
   this.css(opts);
};
$.fn.hilight.defaults = {
   foreground: 'red'
};
})(jQuery);

And then I can change the defaults from the outside by:

$.fn.hilight.defaults.foreground='blue';

My question(s) is how can this be done with the $.fn.extend() syntax:

(function($){
   $.fn.extend({
     hililght: function(options){
       var defaults={foreground: 'red',}
       var opt=$.extend(defaults,options);
      }
   });
})(jQuery)

And how can I change multiple defaults?

Answer 1

You could do this:

(function($){
   $.fn.extend({
     hilight: function(options){
       var opt=$.extend(defaults,options);
     }
   });
   $.extend($.fn.hilight, {defaults: {
        foreground: 'red'
   }});
})(jQuery)

But there isn't much point. $.fn.extend is only useful when you have multiple properties to extend, but you only have hilight. Stick to your first example, it's more readable and (slightly) more efficient.

jQuery's extend functionality comes in handy for your second question, about changing multiple defaults. This is what extend was really designed for:

$.extend($.fn.hilight.defaults, {
    foreground: "red",
    background: "yellow",
    height: 100
    // and so on...
});