views:

135

answers:

2

A good way to improve as a developer is to look at well-written code.

What examples of beautiful, well-architected Javascript have you encountered?

Note that I am not looking for a debate about the language itself. It has good parts and bad parts; some like it, and many hate it. Let's leave that discussion to other threads.

A: 

Though it's an article rather than just a listing of code, I'd nominate Douglas Crockord's article about Top Down Operator Precedence Parsing in Javascript. It's no surprise given the source, but he makes excellent use of Javascript's capabilities to develop code for a very neat approach to solving a non-trivial problem.

Jerry Coffin
+2  A: 

It depends -- personally, I've found Underscore.js' code to be very enlightening for how to structure simple toolkits. They just added an annotated version as well.

Knockout is also quite interesting, and presents a few techniques that you might not see in a more normal library like jQuery or Mootools.

Not that the code for jQuery or Mootools (or Dojo or YUI or ... you get the idea) is bad -- quite the opposite! There is an amazing amount to be learned from these libraries, and I cannot recommend enough looking up the declaration of a method that you find intriguing in any of these libraries and following the breadcrumb trail -- it's a real learning experience!

So dig in ... there's lots to see, and very little time to see it!

Sean Vieira
Underscore looks nice, but I'm finding they often favor compactness over readability. For example: _.uniq = function(array, isSorted) { return _.reduce(array, function(memo, el, i) { if (0 == i || (isSorted === true ? _.last(memo) != el : !_.include(memo, el))) memo[memo.length] = el; return memo; }, []); };In this example, refactoring would also increase efficiency.
Neil Whitaker
@Neil -- It actually *is* aliased to `contains` ;-) http://documentcloud.github.com/underscore/#include
Sean Vieira
As for compactness over readability -- absolutely true. They have been working on making that better in the past few releases, but it does still have its *clever* pieces ... unfortunately, I have yet to find a library that doesn't have any of that yet -- even my own, unfortunately.
Sean Vieira
Also, for a function to see if a list contains a value, why call it "include", rather than "includes" or "contains"? But I do like much of what they do. Edit: I now see that "contains" is an alias for "instersect". Misusing "contains" like that makes me cringe just a bit more.
Neil Whitaker
@Sean, the documentation says include is aliased to contains, but the code says this: _.intersect = _.contains = function(array) {
Neil Whitaker
@Sean - BTW, I don't mean to sound overly-critical. Underscore got many things right. I'm up-voting your answer.
Neil Whitaker
Thanks for the heads up about the contains/include issue -- I've fixed the bug, and pushed out a new release (1.1.2). If y'all have any specific de-clever-ifications you'd like to see fixed in Underscore, I encourage you to submit them as patches on Github -- that sort of thing is warmly welcomed.
jashkenas
@Neil -- understood completely! Good call on the bug!
Sean Vieira
@jashkenas -- you sir, are amazing! Thanks for the quick fix!
Sean Vieira
@jashkenas -- what Sean said.
Neil Whitaker