Question

Below in Message I use the pattern and it works fine. There is only one instance of message[] and it is private. Display is public as that is how I use the object.

Regarding the second object – Effects

A default way,

I was going to update Effects to this pattern simply because I want to make it the default way I write Object Oriented JavaScript.

Are there other / better things to take into consideration or is this a good starting point for writing objects.

In C++ a default starting point might be:

class MyClass
{
private:
protected:
public:
};

Also, A potential inefficiency

Effects simply fades in or fades out an element. I make the timer a property of element to avoid flickering. Doing this only allows one opacity level to be set per element.

However, this leads me to believe that at times I have multiple effects instances running on the same element. They just happen to be doing the exact same thing because they share the same timer.

/**
 *Message
 *  element - holds the element to send the message to via .innerHTML
 *  type - determines the message to send
 */

var Message = ( function () 
{
    var messages = 
    {
        name:         'Please enter a valid name',
        email:        'Please enter a valid email',
        email_s:      'Please enter a valid email.',
        pass:         'Please enter passoword, 6-40 characters',
        url:          'Please enter a valid url',
        title:        'Please enter a valid title',
        tweet:        'Please enter a valid tweet',
        empty:        'Please complete all fields',
        same:         'Please make emails equal',
        taken:        'Sorry, that email is taken',
        validate:     'Please contact <a class="d" href="mailto:[e-mail]">support</a> to reset your password',
    };
    var Message = function (element) 
    {
        this.element = element;
    };
    Message.prototype.display = function( type ) 
    {
        this.element.innerHTML = messages[ type ];
        new Effects().fade( this.element, 'down', 4000 );
    };
    return Message;
}());

Effects

/**
 *Effects - build out as needed
 *  element - holds the element to fade
 *  direction - determines which way to fade the element
 *  max_time - length of the fade
 */

var Effects = function(  ) 
{
    this.fade = function( element, direction, max_time ) 
    {
        element.elapsed = 0;
        clearTimeout( element.timeout_id );
        function next() 
        {
            element.elapsed += 10;
            if ( direction === 'up' )
            {
                element.style.opacity = element.elapsed / max_time;
            }
            else if ( direction === 'down' )
            {
                element.style.opacity = ( max_time - element.elapsed ) / max_time;
            }
            if ( element.elapsed <= max_time ) 
            {
                element.timeout_id = setTimeout( next, 10 );
            }
        }
    next();
    }
};

Answer 1

Here is one way to implement a module with an internal constructor constructMessage(element) that is also exposed publicly, private variable $messages, and the private function internalDisplay(type, effects).

Notice that effects is a parameter to the function display(type, effects). This eases unit-testing because you can then pass in mock Effects.

The code is a common way to do namespaces and private members in JavaScript. As you can see, your “class” can have private functions that you selectively expose to the outside.

Finally, the module and “class” names aren’t the best, but they are good enough for this simple example.

var MessageModule = MessageModule || (function () {

    function constructMessage(element) {

        var messages = {
            name:         'Please enter a valid name', 
            email:        'Please enter a valid email', 
            email_s:      'Please enter a valid email.', 
            pass:         'Please enter passoword, 6-40 characters', 
            url:          'Please enter a valid url', 
            title:        'Please enter a valid title', 
            tweet:        'Please enter a valid tweet', 
            empty:        'Please complete all fields', 
            same:         'Please make emails equal', 
            taken:        'Sorry, that email is taken', 
            validate:     'Please contact support to reset your password' 
        };

        function internalDisplay(type, effects) {
            element.innerHTML = messages[type];
            effects.fade(element, "down", 4000);
        }

        return {
            display: internalDisplay
        };
    }

    return {
        Message: constructMessage
    };
})();