Saturday, October 27, 2018

JavaScript organization | Module pattern w/ modules



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 support 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;
} () );

Answer



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




Object.prototype.method1 = function(){};
Object.prototype.method2 = function(){};


You do



Object.prototype = {
method1: function(){},
method2: function(){}

};


If you need to conserve the constructor reference, which is recommened, you should re-assign the constructor afterward. See this answer for more details.


No comments:

Post a Comment

plot explanation - Why did Peaches&#39; mom hang on the tree? - Movies &amp; TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...