In this section we describe the steps that Mozile goes through as it loads itself and its modules into a web page.
Mozile loading starts when the user accesses a web page which includes an HTML script
tag with a src
attribute which points to the mozile.js
file. Most browsers will immediately access the JavaScript file and evaluate its contents, although some may wait until the full HTML page is loaded.
The mozile.js
file includes the code from all the Mozile modules, and has been compressed by removing all comments and unnecessary white space. The compression saves bandwidth for users downloading Mozile from your web site, but makes it very difficult for a person to read the code. The mozile-src.js
file contains the same code as mozile.js
, but has not been compressed. Both of these files are generated from the original modules in the src
directory, which are divided into small parts and include lots of comments. When developing you should make changes to the original module files and not to the mozile.js
and mozile-src.js
files.
The most important module of all is mozile/src/core.js
. It defines the root mozile
object and the basic functions required to load other modules. For example, mozile.load()
uses XMLHttpRequest
to get the text contents of files. mozile.findRoot()
is used to set the mozile.root
variable if it hasn't already been set. mozile.loadModule()
translates a module name like "mozile.edit.InsertionPoint" into the file path "mozile.root/src/edit/InsertionPoint.js". Then it fetches the file using mozile.load()
and uses the JavaScript eval()
function to evaluate the contents of the loaded file as code.
eval()
function call is made inside the mozile.loadModule()
function. Because of JavaScript's scope rules, a global variable foo
defined in a JavaScript file bar.js
will become a local variable of mozile.loadModule
, and not a global variable as might be expected. This is another good reason to always use the mozile
object as a "namespace", since mozile.foo
defined in bar.js
will evaluate to mozile.foo
, as expected.JavaScript's eval()
function evaluates from the beginning of the string to the end. When a mozile.require()
call is encountered, it is immediately executed. mozile.require()
will call mozile.loadModule()
, which uses mozile.findModule()
to check whether the named module has been defined already. If "mozile.edit.InsertionPoint" is given, then mozile.findModule()
will test whether mozile
, mozile.edit
, and mozile.edit.InsertionPoint
are all defined. If any one of these is not defined, then the mozile.edit.InsertionPoint
module will be loaded. Once the required module (and all of its requirements, and so on) have been loaded, the evaluation of the original string will continue.
When mozile.js
has been completely loaded Mozile is ready to go. It's possible to call mozile.loadModule()
or mozile.require()
after this point to load modules dynamically, for example as part of a conditional statement. The mozile.load()
function can be used to load other text files, although there are security limitations on the XMLHttpRequest
system in most browsers which prevent loading files from web sites other than the one the page belongs to. For loading XML files you can also use the mozile.xml.load()
function.
The mozile.js
is ideal for deployment of Mozile, because it is a single small file. But when developing Mozile it is usually more convenient to load the src/core.js
file, set the mozile.root
, and load the required modules dynamically. For example,
Example 2.1. Configure Mozile using core.js
<script type="text/javascript" src="path/to/src/core.js"></script> <script type="text/javascript"> // Specify the "mozile" directory. mozile.root = "path/to/"; // Add modules as required. mozile.require("mozile.dom"); mozile.require("mozile.xml"); mozile.require("mozile.xpath"); mozile.require("mozile.util"); mozile.require("mozile.edit"); mozile.require("mozile.event"); mozile.require("mozile.save"); mozile.require("mozile.gui"); mozile.require("mozile.gui.htmlToolbar"); </script>