Deeply extending jQuery options

One thing I love about jQuery is its plugin capabilities. And one thing I like to try and do with the plugins I write is to make them semi-customizable. This usually means passing in some options that get merged with defaults. For instance, this is a common pattern for me:

1
2
3
4
5
6
7
8
9

(function($) {
  $.fn.somePlugin = function(options) {
    var defaults = { ... }
    
    var settings = $.extend(defaults, options)
    
    // ...
  }
})(jQuery)

The passed in options overwrite the defaults. But I learned something yesterday that takes this a bit further, and allows me to have even more flexibility with my plugins. And that something is $.extend() with a deep copy.

Changing:

1

var settings = $.extend(defaults, options)

To:

1

var settings = $.extend(true, defaults, options)

Tells $.extend() to perform a deep copy merge. What does that mean? Well it means that I can generically handle a whole slew of attributes, for example, without having to define elementClass: 'wrapper' and so forth.

Using the example above, with a deep copy, my defaults may now look like this:

1
2
3
4
5
6
7

var defaults = {
  elementAttributes: {
    id: 'some-id',
    class: 'some-class'
  },
  // ...
}

And then I can pass the entire elementAttributes to the element in question:

1

$(this).attrs(settings.elementAttributes)

That’s much better since I don’t have to explicitly define/handle each possible attribute that I may want to add or modify later on.

Maybe you’ll find this useful, maybe you won’t. Or maybe you already knew. At any rate, it truly is a better way of making your plugins (and such) more flexible.