I’m organizing my code into 20-60 line modules, usually in the module pattern. I want a well formed object oriented JavaScript library.
Is this the best way to do this? The code has been tested and works.
I like it because a programmer can pull modules from the library and use them as needed, they are self contained.
Here is Tool, Message, Effect and Text, all contained in NS.
Question?
Is this a good way ( best practice ) to organize my library?
Note
So far, there is 0 consensus in the comments and answers…very frustrating.
Outer Module Pattern
var NS = ( function ( window, undefined )
{
/* All Modules below here */
} )( window );
Tools
/**
*Tools
* getTimeLapse - benchmark for adding
*/
var Tool = ( function ()
{
var Tool = function ( )
{
};
Tool.prototype.getTimeLapse = function( numberOfAdds )
{
var end_time;
var start_time = new Date().getTime();
var index = 0;
while ( index <= numberOfAdds )
{
index++;
}
end_time = new Date().getTime();
return ( end_time - start_time );
};
return Tool;
} () );
Message
/**
*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:foo@foo.com">support</a> to reset your password',
};
var Message = function (element)
{
this.element = element;
};
Message.prototype.display = function( type )
{
this.element.innerHTML = messages[ type ];
};
return Message;
} () );
Effects
/**
*Effects
* element - holds the element to fade
* direction - determines which way to fade the element
* max_time - length of the fade
*/
var Effects = ( function ()
{
var Effects = function ( element )
{
this.element = element;
};
Effects.prototype.fade = function( direction, max_time )
{
var element = this.element;
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();
};
return Effects;
} () );
Text
/**
*Text
* form_elment - holds text to check
*/
var Text = ( function ()
{
var Text = function ( form_element )
{
this.text_array = form_element.elements;
};
Text.prototype.patterns =
{
prefix_url: /^(http:)|(https:)\/\//,
aml: /<(.+)_([a-z]){1}>$/,
url: /^.{1,2048}$/,
tweet: /^.{1,40}$/,
title: /^.{1,32}$/,
name: /^.{1,64}$/,
email: /^.{1,64}@.{1,255}$/,
pass: /^.{6,20}$/
};
Text.prototype.checkPattern = function( type )
{
return this.patterns[ type ].exec( this.text_array[type].value );
};
Text.prototype.checkUrl = function( type )
{
return this.patterns[ type ].exec( this.text_array.url.value );
};
Text.prototype.checkSameEmail = function()
{
return ( ( this.text_array.email.value ) === ( this.text_array.email1.value ) );
};
Text.prototype.checkEmpty = function()
{
for ( var index = 0; index < this.text_array.length; ++index )
{
if ( this.text_array[ index ].value === '')
{
return 0;
}
}
return 1;
};
return Text;
} () );
The one thing I would suggest to change to make your code cleaner and reduce its footprint is to just set the prototype property at once, so that instead of doing
You do
If you need to conserve the constructor reference, which is recommened, you should re-assign the constructor afterward. See this answer for more details.