Chapter 9. External JavaScript

In most development projects, it is essential to organize our code into separate files or modules to facilitate readability and reuse. PhantomJS supports a module-loading mechanism that allows us to load and use external JavaScript. It uses the CommonJS API standard (http://wiki.commonjs.org).

Modules

In earlier chapters, we discussed PhantomJS's built-in modules. Let us explore how to create our own modules and use them in our PhantomJS scripts.

First, let's create a straightforward module of a timer that can measure the duration of a given process based on calling the start and stop functions. Let us define the variables to be used. We will require timeStart, timeStop, and a duration variable to hold the duration when the stop function is called.

In a normal JavaScript, we will define our variable as the following:

var timeStart = null;

However, for our modules, we need to use the exports keyword to indicate that the variables belong to the external module, so let us change our previous code to the following:

exports.timeStart = null;
exports.timeStop = null;
exports.duration = 0;

These variables are now available in our module. We can now use them within our scripts. We can access them and set new values or display the current data. Let us do this before proceeding. We save our module and name it "timer.js". We now call our module timer. To use this module in our script, we will use the require keyword to load it. Note that the .js extension is optional.

var timer = require("./timer");

We can use a relative path to load our module as we did in the preceding line of code. If we have this main script on the same path as timer.js, then our module will be loaded. Please note that we need to specify our own module using a relative path or top-level script. Unless we specify all of this, PhantomJS will try to load the module as its own predefined module.

Now, let's add more calls in our main script to access some timer-defined variables or member fields.

var timer = require("./timer");
console.log(timer.duration);

Let us save this script as main.js and then execute it.

Modules

In the second line of the preceding code, we are able to access our module member field duration, and we are able to retrieve and print the current value of 0. Let us complete our module and add some useful functions to complete our timer module with the help of the following code:

exports.timeStart = null;
exports.timeStop = null;
exports.duration = 0;
exports.start = function() {
  this.timeStart = new Date();
};
exports.stop = function() {
  this.timeStop = new Date();
  this.duration = this.timeStop - this.timeStart;
};

Now that we have our custom module, let us digest our code. After the variable declaration, we defined the first function that will record the start of our timer. This function is also prefixed with the keyword exports, which exposes it to the code that requires our module. The function logic is just like that of any other JavaScript function. However, since we are going to reference any variable or function that is defined in our module, we will reference them with the this keyword to denote that we are accessing artifacts that belong in our module.

Now, we can make use of this module. Say we want to measure how long it takes to load a particular URL. We begin by creating typical boilerplate code to define the webpage and system modules for the arguments and finally get the first argument of the script as the URL to be loaded.

var system = require('system'),
var page = require("webpage").create();
var timer = require("./timer");

var url = system.args[1];

We also load our timer module as seen in the third line of the preceding code. After getting the URL, we start our timer and state that we are loading a URL.

timer.start();
console.log("Loading " + url);

We called our function start in the first line of the preceding code, which is defined in the timer module, and based on our code, it saves the current time as the start time that will be used to compute the duration when the stop function is called.

page.open(url, function(status) {
  timer.stop();
  console.log("Duration: " + (timer.duration/1000)+ " secs");
  phantom.exit(0);
});

In the first line of the preceding code, we load the web page. As we have learned, we can define a function that will be called after the loading of the page is done. Our anonymous callback is called when loading is completed, and we now call our timer stop function on the second line. This function saves the current time as our end time, and using the start time, this function also computes the actual duration and saves that in our duration variable.

We then display the computed duration in the third line of the preceding code by accessing the duration variable of our timer module. Executing our code will output the following:

Modules
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.17.159.163