Design Patterns for Javascript

Namespacing: Don't forget to use objects as a pseudo-package (most frameworks do this, you should also):

var YourCompany = {};

YourCompany.util = {};

YourCompany.util.myFunction = function() { /* ...  */ }

You don't necessarily need to set it up that way, and use whatever naming conventions you prefer, but the namespacing will help you out a lot (makes it easier on refactoring search-and-replace too, when you decide to move something).

some people don't realize that JS is fully object oriented. You can create something that works just like a class:

function Car() {
    this.publicField = "bad";
    var privateField = "good";
    var self = this;

    this.publicMethod = function() {
        alert("I can access " + this.publicField + " and " + privateField);
    }

    function privateMethod() {
        alert("I can access " + self.publicField + " and " + privateField);
    }
}

you can instantiate those classes:

var car = new Car();

and it supports inheritance:

function Vehicle() { /* define class */ }

function Truck() { /* define class */ }
Truck.prototype = new Vehicle();

and can even add methods to existing classes:

Array.prototype.remove = function() {
}

If you'd like to learn more about JavaScript's OO support, I highly recommend the Rhino book.

Using jQuery is a great start. JavaScript in a browser augments the frontend, there isn't a MVC "pattern" or anything to follow. There are some "best practices" that help keep the code clean.

• Separate functions for separate things. Bindings in one, actions in another. Make use of this as well as classes for actions.
• Remember that JavaScript allows a great deal of flexibility, passing closures around as they are created can help simplify your bindings and lighten the code.
• Shield from the global scope, only expose what is necessary.
• Use JSLint to keep your code up to standards.

For server side / non-browser JavaScript (like Node.js) there are several great frameworks for building off of. It might be worth while browsing through the source to see if you pick up on any thing.

I moved this to a more in-depth entry for the interested.

This has been my experience: It's very difficult to 'design' JS stuff. The best I've been able to do is group like functions together in the same file, and only include that file where necessary. I try to follow standard coding conventions, etc when coding, but JS is so fluid that it's not always possible, especially when trying to generically manipulate page elements. I'd say just do the best you can to organize.

Here is an example of using namespaces is JavaScript that may help you out. It makes it so your code requires only one global variable, cleaning up the global space a good bit.

I'd recommend using namespacing and then a file structure that mirrors the namespace. For example, using Brad's answer, I'd have Truck.js, Car.js and Vehicle.js. This should give you a codebase that is easier to maintain, organise and unit test. However, you should have some kind of build process which concatenates and minfies your multiple JS files ready for production.

With an organised codebase of prototypal objects you should be in a position to implement most design patterns. There are also some good books on this subject. This presentation by Nicholas Zackas is also useful to get some insight in how to build good Javascript apps.

Also, in Javascript, I think its also important to distinguish between patterns and techniques. You need to be familiar with various commonly used techniques which JS natively lacks, such as namespacing. But these are techniques not patterns; techniques which make it easier to build patterns such as those defined by the Gang of Four.

Sorry this such a brief summary. But I'd strongly recommend the resources I mentioned to get greater insight.