How to Make a Simple JavaScript Library

Blog Home

If you go on GitHub and enter the keyword 'library' you will see that most libraries are made in JavaScript followed by Java and then C++.

I will first explain the things that you have to do in order to develop a library. These are not steps, just things you might want to consider. In the end I will give an example of a very small library which hopefully you can use it an expand it into a better one.

Creating the appropriate files for a library,

This focuses on what is a dist and src folder etc.

This is how the file structure of a simple library that focuses on solving math problems should look like:



MathLib Repository:

+-- dist
|
|     +-- mathLib.js
|     +-- mathLib.min.js
|
+-- src
|
|     +-- statistics.js
|     +-- summations.js
|     +-- vectors.js
|
+-- README.md
+-- LICENSE.md



What is dist?

dist is a shorter version of the word 'distribution' or 'distributable'. This folder is consisted of the file (ex: mathLib.js) which includes all the code of the library. If the file is large you might conside having the same file again but compressed (ex: mathLib.min.js).

What is src?

src is a shorter version of the word 'source'. This folder is usually consisted of several scripts which all together form the script (ex: mathLib.js) in the dist folder.

Think of the script mathLib.js as a file with 3000 lines of code. The first 1000 lines are functions that help with statistics for example findAverage(), findRange() and so on. Then the next 1000 lines are function about summations and the last 1000 are about vectors. So as you can see, the script mathLib.js can be divided into 3 scripts: statistics.js, summations.js and vectors.js. All three scripts make up the src folder.

What is README.md?

README.md is the file which includes the documentation of the library. If you reached this far you probably already know this.

Finding the Appropirate License,

In short, if you are fine with:

- Developers taking your library, modifying it and then giving you attribution if they upload their new version then you want an MIT License

- Developers doing whatever they want then you want The Unlicense

Here are the rest of the licenses

Developing the Library,

We will now take the idea of mathLib and develop a part of the library. mathLib is supposed to be a library where you can use functions and methods to solve difficult math problems that would require many lines of code to achieve with just plain JavaScript.

Lets make a function called findAverage() which is self explantory and thus easier for the developers using this library to remember it.





				
					/* The function is suppoed to find the average/mean of an array like this */
					var array = [ 2, 4, 3 ]

					findAverage(array) // output => 3

					/* Now lets actually make the function */
					function findAverage( variable ) {
						// 'variable' is the variable of the array which we want to find its average
						// we want to add all the numbers in the array first:
						var sum = 0;
						// then make a for loop and add all the numbers to the 'var sum'
						for ( i = 0; i < variable.length; i++ ) {
							sum += variable[ i ]
	  					}
	  					// now the sum is 2 + 4 + 3 = 9, we now divide 9 by 3
	  					return sum/variable.length
					}
					
			

This is what one function looks like. But for a library you need more than just one function so this is one we can organise our dist/mathLib.js script:







				
					/* 
					  The mathLib.js file will be divided into 3 parts. 
					  A place for all the Statistics functions (where findAverage() is one of them), 
					  Summations and Vectors. We start of with the statistics functions
					*/
					var stat = {
						findAverage: function( variable ) {
							var sum = 0;
							for ( i=0; i < variable.length; i++ ) {
								sum += variable[ i ]
					  		}
					  		return sum/variable.length
					  		/* 
					  		  so here to use this function you need to do it
					  		  like this: stat.findAverage()
					  		*/
						}
						findRange: function( variable ) {
							/* 
							  Here you can do this by yourself. Make a function were it 
							  detects the smallest and largest number in an array and subtracts 
							  them to find the difference
							*/
						}
					}
					var sumt = {
						// and so on...
					}
					var vect = {
						// and so on...
					}
				
			

So this is it. You don't have to make your own library with this exact structure (I show another way to develop the mathLib.js file below) but it is a good start. Your src/statistics.js script will include the stat object the src/summations.js will include the sumt object and so on.

Developing the Library using Array Methods,

Here is another way to develop the dist/mathLib.js script:





				
					Array.prototype.findAverage = function() {
						/* 
					    	'this' is the variable attached to this 
					    	method ex. 'var array'
						*/
						var sum = 0;
						for ( i=0; i < this.length; i++ ) {
							sum += this[ i ]
	  					}	
	  					return sum/this.length
					}
					/* 
					  And then you would have Array.prototype.findRange() and so on.
					  To the method we just created you would do this:
					*/
					var array = [ 2, 4, 3 ]

					array.findAverage()

					// or by using the object we created previously:

					stat.findAverage(array)

					// and there are many other ways...
				
			

Just realised that someone has already made a library called mathLib.js so all the examples that I showed here have nothing do to with that library.







29/10/2017