Essential JavaScript And jQuery Design Patterns | Hacker News Reader

Essential JavaScript And jQuery Design Patterns

addyosmani.com

27 pointskapilkaisare6 comments

This sounds like a great idea but after taking a look at this “book,” I must say it’s the weakest collection of patterns I’ve ever seen. Its extreme brevity makes it downright confusing, and the examples are so simplistic, that I am not sure they are really demonstrating anything. For example, probably 80% of jQuery scripts begin with

     $(document).ready(function(){ ... });

or some analogue. This is presented, without explanation, as an example of the “Lazy Instantiation Pattern.” What!?

Here’s an actual pattern (if not a design pattern), just from my own experience: Some people like to always name variables holding jQuery instances with names beginning with $. For example:

    var $toggles = $('.toggle');

Useful in that you know, at a glance, how to interact with that variable (e.g. .html() instead of .innerHtml).

The annoying thing here is that you then have code littered with (even more) dollar signs.

Now, at least for me (and I know I'm not alone here), my brain actually has a harder time parsing that crap because it just looks like a bunch of spaghetti PHP.

Focus on making your code well designed and structured; naming conventions are a band-aid on a larger problem, IMO.

Yeah, the whole thing about jQuery is that you don't have to know design pattern to get things done. By the time you need design patterns, you are probably developing complex plugins or app, in which case, saying that:

    $('#container').toggle(function(){}, function(){});

follows the strategy pattern, is essentially meaningless without context or explanation. Just reading the wikipedia design patterns page is probably more helpful:http://en.wikipedia.org/wiki/Design_Patterns and move on to GoF for more advanced theory.

Also, I do the $var differentiation too. It may be ugly, but it comes in real handy, because you automatically decipher whether a variable is a $('div') or a div.

Im getting a 404 error now. Server down or post deleted?

I'm getting a 403.

Working now.

Reply on news.ycombinator.com