1
\$\begingroup\$

Below is a simple "class" for displaying messages. It stores the output html div and then displays messages to it as needed.

It works fine. For readability, and encapsulation purposes, I'd like the componenets of the "class" in a contianer of sorts or a javascript object? What is the simplest way to to do this.

Or...is there a simple way to do this?

Currently the only container is the comments I've surrounded the code with.

/**
 *      Module  :       Model
 *      Name    :       -Message
 *      Input   :       div via the constructor
                        message type via display
 *      Output  :       TextStream via display to Control.sendInner
 *      Notes   :       Symmetric, client holds message location so needs extra variable
 */

var Message = function( div ) 
{
    this.div = document.getElementById( div ); 
};

Message.prototype.messages = 
{ 
    name:       'Please enter a valid name',
    email:      'Please enter a valid email',
    pass:       'Please enter passoword, 6-40 characters',
    url:        'Pleae enter a valid url',
    title:      'Pleae enter a valid title',
    tweet:      'Please enter a valid tweet',
    empty:      'Please complete all fields',
    empty_bm:   'Please complete all fields',
    same:       'Please make emails equal',
    taken:      'Sorry, that email is taken',
    validate:   'Please contact <a class="d" href="mailto:support@.com">support</a> to reset your password'
};

Message.prototype.display = function( type ) 
{
    Control.sendInner( this.div, this.messages[type] ) 
};      


/**      Message End        */
\$\endgroup\$
1
\$\begingroup\$

For readability purposes, you could do something like this to create class definitions:

// utility function
UTIL = {
  createClass: function(o) {
    var F = o.constructor || function() { };
    for(var i in o) {
      F.prototype[i] = o[i];
    }
    return F;
  }
};

// class definition
Message = UTIL.createClass({

  constructor: function(div) { ... },

  messages: { ... },

  display: function() { ... }

});
\$\endgroup\$
1
\$\begingroup\$

You could wrap your whole file in a namespace, as described here.

Of all the possibilities, this is the one I like the most:

var YourNamespace = (function () {
   var Message = function (div) {
      ...
   }
   var aPrivateFunction = function () { ... }
   ...
   return {
      'Message': Message
   };
})();

This lets you define private functions, like aPrivateFunction, not visible outside YourNamespace. You can access Message as YourNamespace.Message.

\$\endgroup\$
1
\$\begingroup\$

The simplest way is to do something like this.

var My = {};

My.Message = function ( div ) 
{
    this.div = document.getElementById( div ); 
};

My.Message.prototype.messages = 
{ //... 
};

Here is another way that is unusual enough that linters (and peer-reviewers) will complain, but really it's harmless.

var My = new function(){

    this.Message = function ( div ) 
    {
        this.div = document.getElementById( div ); 
    };

    this.Message.prototype.messages = 
    { //... 
    };

}();
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy