One of the ideological sticking points of the first JavaScript framework was was extending prototypes vs. wrapping functions. Frameworks like MooTools and Prototype extended prototypes while jQuery and other smaller frameworks did not. Each had their benefits, but ultimately all these years later I still believe that the ability to extend native prototypes is a massive feature of JavaScript. Let’s check out how easy it is to empower every instance of a primitive by extending prototypes!
Every JavaScript native, like Number
, String
, Array
, Object
, etc. has a prototype
. Every method on a prototype
is inherited by every instance of that object. For example, we can provide every `Array
instance with a unique
method by extending its prototype:
Array.prototype.unique = function() { return [...new Set(this)]; } ['1', '1', '2'].unique(); // ['1', '2'] new Array('1', '1', '2').unique(); // ['1', '2']
Note that if you can also ensure chaining capability by returning this
:
['1', '1', '2'].unique().reverse(); // ['2', '1']
The biggest criticism of extending prototypes has always been name collision where the eventual specification implementation is different than the framework implementation. While I understand that argument, you can combat it with prefixing function names. Adding super powers to a native prototype so that every instance has it is so useful that I’d never tell someone not to extend a prototype. #MooToolsFTW.
LightFace: Facebook Lightbox for MooTools
One of the web components I’ve always loved has been Facebook’s modal dialog. This “lightbox” isn’t like others: no dark overlay, no obnoxious animating to size, and it doesn’t try to do “too much.” With Facebook’s dialog in mind, I’ve created LightFace: a Facebook lightbox…
I’m an Impostor
This is the hardest thing I’ve ever had to write, much less admit to myself. I’ve written resignation letters from jobs I’ve loved, I’ve ended relationships, I’ve failed at a host of tasks, and let myself down in my life. All of those feelings were very…
Dynamic Waveform Visualizations with wavesurfer.js
Waveform images are an awesome addition to boring audio widgets. They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually. I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable…
HTML5 Datalist
One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget. Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced. Much like the placeholder attribute‘s introduction to markup, a frequently used…
Source link
Leave a Reply