Step 0: Use jslint
Step 1: Organise
To make this process as straightforward as possible, get your existing code into an organised fashion (i.e. a collection of vars and functions). Using jslint has probably got it into a good state already!
Step 2: The define call
It is fairly trivial to then wrap a ‘
around the code (see require.js
documentation), and turn it into
an Asynchronous Module Definition (AMD):
But if you have dependencies existing in the file (e.g. jquery), you will need to resolve them as module dependencies and refactor their usages before the module can function.
Step 3: Dependencies
Add the dependencies by name as an array in the
define() call, and corresponding parameters in the module
Existing usages of those dependencies will then need to be updated to call functions via the parameter objects (Note: to use dependencies in this way, they must also be AMD-compatible modules. Otherwise, you may need to configure a shim for the dependency).
Now your require.js module is ready to be used! But there’s more you should do before that..
Step 4: Encapsulation
One of the advantages of this module pattern is that it can be structred so that variables and functions can
be internalised and effectively defined in a ‘private’ scope. The module’s
return object can define exactly what should be publicly accessible.
In the previous code snippet, the variable
foo and both functions were all
returned by the module. This means that they would all be publicly accessible
by any client code. Instead, we want to ensure that
foo and the functions
are initially defined as private, and then expose the functions explicitly in
the return object.