4 ms·

Essential JavaScript And jQuery Design Patterns

27 points by kapilkaisare 16y ago

alanh 16y ago
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).
- Klonoar 16y ago
  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.
- kaylarose 16y ago
  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 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.
joakin 16y ago
Im getting a 404 error now. Server down or post deleted?
- dan_b 16y ago
  I'm getting a 403.
  - kapilkaisare 16y ago
    Working now.

27 points by kapilkaisare 16y ago

alanh 16y ago

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).

Klonoar 16y ago
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.
kaylarose 16y ago
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 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.

joakin 16y ago

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

dan_b 16y ago
I'm getting a 403.
- kapilkaisare 16y ago
  Working now.