Wait, what? Well first, duck punching is another name for monkey patching. Monkey Patching is a technique to “extend or modify the runtime code of dynamic languages without altering the original source code.” But then some Ruby hackers decided that since we rely on duck typing so often, a more proper name was in order:
… if it walks like a duck and talks like a duck, it’s a duck, right? So if this duck is not giving you the noise that you want, you’ve got to just punch that duck until it returns what you expect.
In jQuery we can use this to great effect. We’ll employ an AOP-like approach (aspect-oriented programming), maintaining the original function but wrapping it with our enhancement.
Example 1: Adding color support
(This is a silly example, but hopefully it explains the idea. ) You’re fully aware that you can use certain color names in HTML. But sadly, everyone’s favorite Crayola™ color, Burnt Sienna, can’t play along. Well, not until now…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Let’s walk through that a little bit slower, shall we?
First we start off with a self-executing anonymous function that makes a happy closure while remapping jQuery to $:
1 2 3
Now we save a reference to the old css method as a local variable, and set up our new definition for that method:
1 2 3 4 5
Inside our function definition we have an if statement that breaks up two code paths, the new enhanced route, and the old default:
1 2 3 4 5 6 7 8 9
Scroll back up to see the whole thing together. Can you dig it?
Example 2: $.unique() enhancement
$.unique only winnows an array of DOM elements to contain no duplicates, but what if you want all non-duplicates of any type? Here’s an upgrade:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
A Duck Punching Pattern
Here’s the bare pattern. Feel free to use this as the basis of your own:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
What else could I use this for?
Some other uses I’ve had or seen for this sort of thing:
- throwing an exception when $.fn.find returns a 0-length object
- returning the shorthand value when asking for $(elem).css(‘margin’)
- removing IE’s filter attribute after a fade
- next(2) goes to the subsequent adjacent node
- … and James Padolsey’s jQuery-Plus has a bunch of more these
So while you’re free to file a feature request of jQuery, most of the time you can actually enhance jQuery’s methods yourself! Enjoy.