JavaScript organization | Module pattern w/ modules
javascript
Solution
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.
Problem
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; } () ); ```