What JavaScript patterns do you use most?

Question

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?

Answer 1

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.

Answer 2

Currying:

function hide(id)
{
   return function()
   {
      var el = document.getElementById(id);
      if ( el ) el.style.display = '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++...

Answer 3

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.

Answer 4

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
        privateFunction();
    };
};
namespace.Classname.prototype = {
    aMethod: function() {
        this.privilegedFunction();
    }
    ,anotherMethod: function(){}
}
var class = new namespace.Classname();

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

Answer 5

"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) {
                        clearTimeout(executionTimer);
                }

                executionTimer = setTimeout(function() {
                        // YOUR CODE HERE
                }, delay);
        };
}();