From Wikipedia, the free encyclopedia

Advanced JavaScript Importing & Loading Extension is the browser-independent extension that provides JavaScript with namespace and dynamic script loading support. It is an open-source solution developed and maintained by Michael Lee and is released under the MPL 1.1, LGPL 2.1, and GPL 2.0 tri-license.

[edit] Background

JavaScript's ease of use as a web development language has led to the availability of countless scripts. Most scripts are well designed for the problem they address, but poorly designed for coexistence and interoperability. As web development has advanced, it has become standard practice to combine many such scripts within a single web page, site, or application. Such combination often introduces scope control issues that can require substantial time and effort to identify, understand, and resolve.

Many development languages such as Java, C#, and C++ provide language constructs specifically aimed at managing scope and interoperability. These constructs typically implement the concept of namespaces and namespace member access. JavaScript, as defined by the ECMAScript Language Specification (3rd Edition), does not provide such constructs.^[1]

In November 2003 Michael Lee created JSPackaging as a cross-browser JavaScript namespace solution. JSPackaging provided JavaScript with language constructs that allowed defining a namespace, accessing its members, and loading externally defined arbitrary or namespaced modules from any local or network accessible location.

In September 2005 Michael enhanced JSPackaging with Model-View-Controller support and released it under the name Ajile. The name Ajile was chosen as a play on the word agile, meaning fast, light and nimble; an accurate description of the solution and its effect.

Ajile implements the Model-View-Controller design pattern for client-side web development to facilitate:

• Total separation of display and business logic.
• Easy interaction of display and business logic in a loosely coupled fashion.
• Minimized impact whenever the display and/or business logic changes.
• Focused display troubleshooting and targeted business logic debugging.

Ajile's MVC implementation allows scripts and web pages to be completely separated by becoming each page's main controller. As the main controller, Ajile links pages with external scripts that define the page's behavior and data models. These external scripts can be arbitrary non-namespaced scripts or modules that make use of any or all of Ajile's features.

[edit] Features

Ajile enhances JavaScript's effectiveness as a web application development language by providing the following powerful and easy to use features:

• Namespacing
• Dynamic Script Loading
• Packaging
• Module Including
• Module Importing
• Module Importing with Aliases
• Module Import and Include Notification
• Runtime Dependency Enforcement
• Cache Management
• Memory Management
• Source Code Cloaking

[edit] Compatibility

Ajile is compatible with the following specifications and web browsers:

[edit] Specifications

• ECMA-262, Edition 3+
• JavaScript 1.3+
• JScript 3.0+

[edit] Desktop Browsers

• Camino 1.0.1+
• Firefox 0.7+ , Mozilla Firebird 0.6+, Mozilla Phoenix 0.1+
• iCab 3.0.3+
• Internet Explorer 4.01+
• Mozilla 0.9.1+
• Netscape 6+
• OmniWeb 5.6+
• Opera 5+
• Safari 1.2+
• SeaMonkey 1.0+
• Shiira 1.2.2+
• Sunrise 0.89+

[edit] Mobile Browsers

• Blazer 3.0 on Treo 600
• Opera Mini 2.0+
• Safari on iPhone

[edit] Usage

Ajile can be used with both inline scripts and external scripts, but is most effective when using external scripts. To begin using Ajile:

• First include Ajile within a web page as follows:

<script type="text/javascript" src="path/to/com.iskitz.ajile.js"></script>

• Next, create an external script file with the same name as the web page (i.e. MyPage.js if the web page is named MyPage.htm); doing this triggers Ajile's MVC support. Ajile will now automatically load this external script whenever the web page is loaded.

• When Ajile is used without external scripts its MVC support should be explicitly disabled by changing its script tag in the web page as follows:

<script type="text/javascript" src="path/to/com.iskitz.ajile.js?mvcoff,mvcshareoff"></script>

• Ajile is now ready for use. Please read the following sections for details on its use within your web page's scripts.

[edit] Loading a Script

Ajile provides the Load directive for loading arbitrary scripts. The following example demonstrates its use:

Load ("http://ajile.iskitz.com/examples/scripts/LoadExample.js");

In the above example the LoadExample.js script is dynamically loaded into the current web page. The Load directive provides a way for a script (inline or external) to programmatically load any JavaScript file or code fragment. It eliminates the need to continuously modify web pages everytime their script list changes. The Load directive gives scripts the power to define exactly which scripts get loaded at runtime.

[edit] Defining a Namespace

Ajile provides the Namespace directive for defining namespaces. The following example demonstrates its use:

Namespace ("com.iskitz.ajile.examples");
 
com.iskitz.ajile.examples.NamespaceExample = function()
{
   alert("This is the NamespaceExample!");
};

In the above example the com.iskitz.ajile.examples namespace is created and the NamespaceExample module is added to it. A reversed domain name is used as the namespace to assure that the module is uniquely named. The ability to uniquely identify modules is especially important when using multiple modules from varied sources within the same page or site.

When working with modules within an Intranet or non-Internet environment, it may be sufficient to use simpler namespaces. Ajile provides the flexibility to create as simple or as complex a namespace as desired.

[edit] Packaging a Module

Once a module has been created as shown in the Defining a Namespace section, it is important to package the module so that it can be included or imported. Ajile supports the use of Fully-Qualified File Name and Directory-Based packaging.

[edit] Fully-Qualified File Name

To package the NamespaceExample module shown in the Defining a Namespace section using the Fully-Qualified File Name approach, save the module's source code in a file named: com.iskitz.ajile.examples.NamespaceExample.js Next, place that file in the same directory as the Ajile module as follows:

< ajile path >/com.iskitz.ajile.examples.NamespaceExample.js

.

NOTE: Ajile supports naming the file using any valid operating system filename character in place of the dot (.) character except immediately before the file's extension i.e.: com_iskitz_ajile_examples_NamespaceExample.js

[edit] Directory-Based

To package the NamespaceExample module shown in the Defining a Namespace section using the Directory-Based approach, save the NamespaceExample module's source code in a similarly named file within the Ajile module's directory as shown here:

< ajile path >/com/iskitz/ajile/examples/NamespaceExample.js

.

[edit] Importing a Module

As effective as namespaces can be in promoting interoperability, they can complicate development by requiring the use of long module names. Ajile addresses this issue by providing the Import directive.

The Import directive provides these key benefits:

• Simple names to reference uniquely named JavaScript modules.
• Simple definition of JavaScript module dependencies.
• Simple programmatic loading of external JavaScript modules.

[edit] Example

The following code demonstrates how the Import directive is used:

Import ("com.iskitz.ajile.examples.Complex");
 
function testImport()
{
   var complex = new Complex();
   complex.sayHello();
}

The Import directive in the code above indicates that there is a dependency that must be imported. The externally defined com.iskitz.ajile.examples.Complex.js JavaScript module is automatically imported and made accessible via its short name, Complex. The imported Complex module is then used by the testImport function.

[edit] Complex Module

The following is the content of the Complex module:

Namespace ("com.iskitz.ajile.examples");
Import    ("com.iskitz.ajile.examples.Simple");
 
com.iskitz.ajile.examples.Complex = function()
{
   var simple = new Simple();
 
   this.sayHello = function sayHello()
   {
      var message = "Hello World!\n\nThis is a " + this.toString()
                  + " object that imported and is\nusing a "
                  + simple.toString() + " object!";
 
      alert(message);
   };
 
   this.toString = function toString()
   {
      return "[Complex]";
   };
};

The Import directive in the code above automatically imports the externally defined com.iskitz.ajile.examples.Simple.js JavaScript module then makes it available via its short name Simple.

[edit] Simple Module

The following is the content of the Simple module:

Namespace ("com.iskitz.ajile.examples");
 
com.iskitz.ajile.examples.Simple = function()
{
   this.toString = function toString()
   {
      return "[Simple]";
   };
};

[edit] Importing with Aliases

When importing multiple modules it is possible to encounter naming conflicts. Ajile provides the ImportAs directive as a solution to this problem.

The ImportAs directive provides two benefits in addition to those provided by the Import directive:

• Flexibility to import a module using any un-used short name.
• Ability to handle naming conflicts by assigning aliases to similarly named modules.

[edit] Example

The following code demonstrates how the ImportAs directive can be used to handle module naming conflicts:

Import   ("com.iskitz.ajile.examples.Complex");
ImportAs ("AComplex", "com.iskitz.ajile.examples.ambiguity.Complex");
 
function testAmbiguity()
{
   var complex = new Complex();
   complex.sayHello();
 
   var aComplex = new AComplex();
   aComplex.sayHello();
 
   return false;
}

In the code above, two modules with the identical short name Complex are imported. The Import directive automatically imports the externally defined com.iskitz.ajile.examples.Complex.js JavaScript module as is. The ImportAs directive also automatically imports the externally defined com.iskitz.ajile.examples.ambiguity.Complex.js JavaScript module but performs the extra step of assigning it the AComplex alias.

By assigning the AComplex alias to the imported com.iskitz.ajile.examples.ambiguity.Complex module, the testAmbiguity() function is able to reference both modules without encountering naming conflicts.

[edit] AComplex Module

The following is the content of the AComplex module:

Namespace ("com.iskitz.ajile.examples.ambiguous");
Import    ("com.iskitz.ajile.examples.Simple");
 
com.iskitz.ajile.examples.ambiguous.Complex = function()
{
   var simple = new Simple();
 
   this.sayHello = function sayHello()
   {
      var message = "Hello World!\n\nThis is an ambiguous " + this.toString()
                  + " object that\nimported and is using a "
                  + simple.toString() + " object!";
 
      alert(message);
   };
 
   this.toString = function toString()
   {
      return "[Complex]";
   };
};

[edit] Release History

• Ajile 1.2.1, December 30, 2007
• Ajile 1.1.5, December 25, 2007
• Ajile 0.9.9.2, October 5, 2007
• Ajile 0.9.9.1, September 28, 2007
• Ajile 0.9.9, September 16, 2007
• Ajile 0.9.8, September 4, 2007
• Ajile 0.9.5, July 30, 2007
• Ajile 0.9, July 24, 2007
• Ajile 0.7.9, March 11, 2007
• Ajile 0.7.8, December 29, 2006
• Ajile 0.7.5, December 16, 2006
• Ajile 0.7, September 28, 2006
• Ajile 0.6.5, September 11, 2006
• Ajile 0.6.2, August 2, 2006
• Ajile 0.5.5, July 11, 2006
• Ajile 0.5, June 8, 2006
• Ajile 0.4, January 22, 2006
• Ajile 0.3.7, November 1, 2005
• Ajile 0.3.6b, September 30, 2005
• JSPackaging 2.1, May 5, 2004
• JSPackaging 2.0, February 8, 2004
• JSPackaging 1.0, November 19, 2003

[edit] References

1. ^ Standard ECMA-262 ECMAScript Language Specification 3rd edition (December 1999)(December 1999). Retrieved on 2007-10-06.

[edit] Further Reading

• The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks, ISBN 0975240269

[edit] External Links

• Ajile's Official Site
• Ajile's Project Site
• Ajile's Support Site