Lately I find myself frequently creating singletons using the module pattern:

var singleton = (function(){

    var _privateVariable = {};
    var _privateMethod = function() {};

    return {

        publicVariable: {},
        publicMethod: function() {}


What is/are you favorite pattern/s for maintainable JavaScript?

+7  A: 

I like the singleton module pattern too, but I have a slight twist on how I use it:

var namespace = namespace || (function() {
var privateVariable = {};
var publicVariable = {};

function privateMethod() {

function publicMethod() {

return {
publicVariable: publicVariable,
publicMethod: publicMethod

This way, it almost looks like a class in other languages, and I'm just exposing what I want to expose at the bottom return statement.

Mike Stone
For what purpose are you using the " namespace || " part here?
Chris, that's aka the "default" operator. If the thing on the left is undefined (or 0, false, etc), the default value on the right is used. It prevents you from overwriting the variable if it was set earlier.
+5  A: 


function hide(id)
return function()
var el = document.getElementById(id);
if ( el ) = 'none';

// ...

window.setTimeout(hide('post-form'), 700);

It's one of the things that JS makes so easy that i miss it when i go back to C++...

+1  A: 

I also like to use MochiKit. It provides a nice suite of functional programming tools to JavaScript, and also abstracts some of the cross browser stuff away. Very useful tool, especially if you are a fan of functional programming style.

Mike Stone
+2  A: 

I have been having many problems trying to understand what is the best pattern to suite my needs. It seems like, given all the classes i need to write for all my tasks, the module pattern is less likely to work because it runs at runtime function(){}(), therefore if i had all my 30 tasks all written with the () after them, they would all run every time a page is loaded. I am not sure why this matter isn't discussed more, in fact i try to use the module pattern only for really small things that i use all over the place, otherwise I just keep myself bounded to this idea:

var namespace = {};
namespace.Classname = function() {
    // constructor    
    function privateFunction() {
        // private

    this.privilegedFunction = function() {
        // privileged
namespace.Classname.prototype = {
    aMethod: function() {
    ,anotherMethod: function(){}
var class = new namespace.Classname();

I feel like this pattern is what globally suites my development style.


"Delaying JavaScript Execution"

"If you're looking to execute javascript code whenever someone finishes (or stops temporary) scrolling, moving the mouse, or resizing the page, you may find the following segment of code useful."

var onFooEndFunc = function() {
        var delay = 50; /* milliseconds - vary as desired */
        var executionTimer;

        return function() {
                if (executionTimer) {

                executionTimer = setTimeout(function() {
                        // YOUR CODE HERE
                }, delay);
I've used something similar to pop up a `div` box a few seconds after the user pushes a button, to give visual feedback that the operation is "still working". If the page gets updated before those few seconds, the user never sees the box, but of the operation takes a long time (e.g., a complex database search on the server side), the user sees some kind of reaction from the app, so he is not tempted to refresh the page or resubmit the button.