Tutorial — Getting Started
Part 1 of a Guide to Function Interception in JavaScript
Contents
Core Concepts
Interception Independence
The Technology
Including AspectJS in a Page's Script
Core Concepts
Normally, when one function is called by another, the interpreter directs the thread of execution through the callee, passing in any parameters required and, optionally, gathering any result that the callee returns.
The diagram illustrates this, wherein the blue line shows the path of the execution thread.
Diagram showing conventional execution path from one function to another and back, and the execution path when a prefix is in place
The concept of function interception turns upon the notion that when a function is called, another sequence of instructions executes before the callee, thus forming a 'prefix' to that function. Alternatively, the extraneous sequence can execute subsequently, in which case it forms a 'suffix'. The second diagram illustrates this concept.
Obviously, this is possible using a conventional approach where a call to the prefix and/or suffix is included in the body of MyFunc. However, this pollutes MyFunc with extra code, with all of the associated implications therein. Moreover, if this approach is repeated across many functions, this hampers development seriously, because inclusion, management, and maintenence of the prefix and suffix-calling code becomes tedious and tiresome rapidly, and is therefore error prone.
However, the use of advanced JavaScript techniques makes it possible to apply prefixes and suffixes 'behind the scenes', without the disadvantage of entangled design-elements, cluttered code, and all the problems that these cause. AspectJS encapsulates the functionality for achieving this simply, efficiently, and with great flexibility.
Note that within the scope of AspectJS, the intercepted method is called the 'interceptee', and prefixes and suffixes are referred to collectively as 'affixes'. Where the interceptee has one or more prefixes and one or more suffixes then it is said to be 'wrapped'.
Diagram showing execution path from one function through a prefix to a second function and then through the second function itself
The Technology
AspectJS is a JavaScript resource that automates and manages the application of prefixes, suffixes and wrappers to functions in a JavaScript application, and is implemented as two objects. The first, AJS, is an object-literal definition of a singleton object that constitutes the more powerful but less efficient version of the technology. Similarly, AJS_HP is an object-literal definition of a singleton object that constitutes the less capable but more efficient version.
Intercepts are applied to client-code functions by calling the methods that these objects support, and by calling the methods of the objects returned by those calls. These objects support identical methods, but the behaviour of the AJS_HP implementation is an exact subset of AJS-related functionality.
Where possible, AJS methods check the arguments that are passed to them, and throw an exception if any have bad values. It is also possible for client code to garner diagnostic information indicating the nature of a bad method-call and where the offending call was made.
Note that AJS and AJS_HP can be used interchangeably, and side by side, in the same application, although neither can set an intercept on a function where that function already has an intercept set by the other.
Interception Independence
The key factor in using AspectJS is that all intercept-management code in an application can reside in a separate .JS file, and need not clutter 'normal' application code. This allows developers to concentrate on the prime functionality of an application, while applying interceptions extraneously, arbitrarily and at a later date. This means that function interceptions can be applied and removed, while the core implementation of an application remains unperturbed and (if need be) ignorant of any interceptions. (This is the 'obliviousness' quality of Aspect-Oriented Software Development)
Further to this, it is possible to set a number of intercepts on a given method independently, meaning that a given intercept need not know about the others that are attached to a given interceptee. This allows different developers to apply supplementary functionality to an application without needing to coordinate their actions.
Diagram showing relationship between AspectJS, other libraries and HTML files in a client-side JavaScript application
Including AspectJS in a Page's Script
As with any JavaScript library, including AspectJS in an application is a simple matter of including the appropriate script-tag in the relevant HTML page, and Example One illustrates this.
Note that the listing loads the AJS object into the execution environment. To load the ASJ_HP object, change the value of the src attribute in the script tag to 'AspectJS_HP.js".
The AspectJS libraries can also be pulled into a given execution environment by means of 'on-demand' JavaScript (also known as the 'script-tag hack'). Each library can also be imported, using XMLHTTPRequest, as a JSON string that can then be 'evaled' to cause the relevant object to become part of the global scope. 

 <!-- Example 1 -->

 <html>
    <head>
       <script type = "text/javascript" src="AspectJS.js"></script>
       <script type = "text/javascript">

       // Application code

       </script>
    </head>

    <body> ... </body>

 </html>
Go forward to Part 2 of this tutorial.
Copyright © Dodeca Technologies Ltd. 2007