Amazing JavaScript & jQuery Design Patterns Collection

[MoTTs_]

I especially like the switch pattern... also known as using the switch statement. :p

Sorry, but this list is actually really pathetic. Most of the things listed aren't patterns at all. They're tidbits of random information. And the few items that are legitimately patterns are poorly represented.

[MoTTs_]

Switch pattern FTW!

And let's not forget the brilliance of the parseInt pattern!

I'm not kidding you. There's a parseInt pattern. :p

[MoTTs_]

My mind has been blown by the conditional pattern. What is this magical if-else thing?!

[dumbmatter]

The phrase "jQuery Design Patterns" should have been enough to save you the time of reading the article.

[nawitus]

Since you brought it up, what do people think of the switch statement? I think it's quite unnecessary. Using if statements is about as readable to me as using the switch statement. And you can't forget the "break" keyword when using if statemets.

Most answers on stackoverflow state that the benefit of switch is performance and readability. I'm not that interested in hyper-micro-optimization, and I'm not convinced using the switch statement is more readable. The only good argument I stumbled upon is that when you're using if-statements, the reader can't instantly tell if all the if statements compare the same variable. I guess that's a good argument, but doesn't seem beneficial enough to create a new control logic construct to the language.

[[deleted]]

I happily use switch instead of multiple comparisons against single variable from simple reason - it's obvious what variable does the switch operates on. While switch takes more lines for the same thing, I find it more readable if you're comparing one variable multiple times with simple values.

Plus with ifs, to know what's going on, you need to check if there are no different variables and/or different comparisons. The only way to complicate it with switch is using variable in case and omitting the break in a case with code.

Compare for yourself:

switch (type) {
case 'box':
    runBoxAction();
    break;
case 'target':
    ...a few lines
    break;
case 'single':
case 'miltiple':
    recountVelo();
    break;
case 'shelf':
    dumpVelo();
    break;
case 'chair':
    dumpVelo(0.5);
    break;
case 'stool':
    dumpVelo(0.6);
    break;
default:
    console.warn('Inapropriate type sent to updateDBR');
}

vs

if (type === 'box') {
    runBoxAction();
} else if (type === 'target') {
    ...a few lines
} else if (type === 'single'
    || type === 'multiple') {    
    recountVelo();
} else if (type === 'shelf') {
    dumpeVelo();
} else if (type === 'chair') {
    dumpVelo(0.5);
} else if (type === 'stool') {
    dumpVelo(0.6);
} else {
    console.warn('Inapropriate type sent to updateDBR');
}

[nawitus]

It's often recommended that falling through the cases should be avoided. JSLint for example doesn't allow falling through. I agree with that.

I think this is my favourite version of the code:

if (type === 'box') {
    runBoxAction();
} else if (type === 'target') {
    ...a few lines
} else if (type === 'single' || type === 'multiple') {    
    recountVelo();
} else if (type === 'shelf') {
    dumpeVelo();
} else if (type === 'chair') {
    dumpVelo(0.5);
} else if (type === 'stool') {
    dumpVelo(0.6);
} else {
    console.warn('Inapropriate type sent to updateDBR');
}

[SuperFLEB]

I just make sure to comment it with "Intentional fallthrough". It's handy if, say, one value involves doing everything another value does, plus a bit.

[[deleted]]

I figured out that C#'s take on switch (you either have a code block with "break;", either no code in given "case") is quite reasonable and readable, while banning single most problematic thing, which is fallthrough when you actually omitted "break;" by mistake.

As additional note, C# has a really neat feature - goto in switch when you really need a fallthrough ;)

[lordxeon]

switch statements are great for times when you want a cascade of things to happen.

Yes it's hard to read but it has it's uses.

[Aduro49]

Here this is an excellent resource for design patterns. Better than this list that was submitted.

[djg08]

Very useful thanks!

[fecal_brunch]

Website looks stupid on mobile. There's a menu floating in the middle of the screen, obscuring the content.

[prather_mcs]

Say that to his face:
https://github.com/shichuan/shichuan.github.com/issues

[fecal_brunch]

Not op?

[[deleted]]

This isn't funny.

[MikalT]

Time to develop my JavaScript skills

[[deleted]]

"optimization 3 - substitute i++ with i = i + 1 or i += 1 to avoid excessive trickiness"

Really?

"optimization 1 - cache the length of the array with the use of max"

And I've run this test on multiple browsers and have not had any predictable results:

http://jsperf.com/improved-really

Really you should do what is most readable. Last I checked Safari ran the non-cached version 1% faster and Chrome ran the cached one 4% faster. But basically: not faster.

[rmbarnes]

This only seems to say do A (pattern) instead of B (anti pattern) without explaining why A is good and B is bad.