Module and require(...)

When your code begins to get larger and larger, it is sometimes interesting to split it in several files. However, there is no import or include by default in JavaScript. Here is a simple way to implement such a function...

Thanks to Marijn Haverbeke in his book 'Eloquent JavaScript', we can define a simple require() function allowing to load source files located in the hard disk. This implementation is based on the Module design pattern and on the object Function.

1. Module and function require()

++++ JavaScript: require.js ++++

	/**
	* require(filename)
	* Jean-Christophe Taveau
	* Mar 2016
	* http://crazybiocomputing.blogspot.com
	*
	* Inspired from `Eloquent JavaScript 2nd Edition`
	**/
	function require(name) {
	var br = new java.io.BufferedReader(new java.io.FileReader(IJ.getDir("current")+name));
	var source = "";
	while ( (line = br.readLine()) !== null) {
	source += line +"\n";
	}
	var code = new Function('exports', source);
	var exports = {};
	code(exports);
	return exports;
	}

view raw require.js hosted with ❤ by GitHub

++++ End of JavaScript: require.js ++++

2. Example with the chessboard

How can we use this require(...) function? In a previous implementation of our 'Drawing a Chessboard' series [Link], the code is made of two parts: (i) the definition of  a class Cell and (ii) the main body of the script. If I want to reuse the class Cell somewhere else, I have to copy and paste the lines of code in a new script... that's not really convenient. Thus,  rather than having all the code in a single file, I split the code in two files:

1. A file entitled chessboard_cell.js contains the code of the class Cell. (lines 7-28)
2.  chessboard.js contains the main part of the script. (lines 30-53)

Then, modify the chessboard_cell.js by adding at the end of the code, the expression:

exports.Cell = Cell;

Now, load your chessboard.js in ImageJ (File > Open...), then add the definition of the function require(...) at the end of the code...

and modify the code by adding at the beginning, the file(s) required for your script. Here I need the chessboard_cell.js and import this file by typing...

var chess = require('chessboard_cell.js');

Thus, we define the module chess containing the class Cell. If you want to create a new object Cell (instance of...), you have to type ...

var myCell = new chess.Cell(x,y,size);

Here is the final code.

++++ JavaScript: chessboard.js ++++

	/**
	* Drawing a chessboard in JavaScript
	* Jean-Christophe Taveau
	* Mar 2016
	* http://crazybiocomputing.blogspot.com
	*/
	var chess = require('chessboard_cell.js');
	// M a i n
	var img_size = 512;
	var imp = IJ.createImage("chessboard", "8-bit Black", img_size, img_size, 1);
	var scale = img_size / 8;
	// Main loops
	for (var y=0;y<8;y++) {
	for (var x=0;x<8;x++) {
	// new instance of class Cell
	// Cell now belongs to the module chess
	var a_cell = new chess.Cell(x,y , scale);
	// Set Black or White
	a_cell.setColor(( (x+y)%2==0 ) ? 255 : 0);
	// Draw cell
	a_cell.draw(imp.getProcessor() );
	}
	}
	// Display the image
	imp.show();
	/*************** END OF SCRIPT *******************************/
	// Inspired from `Eloquent JavaScript 2nd Edition`
	function require(name) {
	var br = new java.io.BufferedReader(new java.io.FileReader(IJ.getDir("current")+name));
	var source = "";
	while ( (line = br.readLine()) !== null) {
	source += line +"\n";
	}
	var code = new Function('exports', source);
	var exports = {};
	code(exports);
	return exports;
	}

view raw chessboard.js hosted with ❤ by GitHub

++++ End of JavaScript: chessboard.js ++++