Channels ▼
RSS

Design

Transparency on Demand

Source Code Accompanies This Article. Download It Now.


Richard is an independent software developer, trainer, and consultant based in London. He can be contacted via www.dodeca.co.uk.


The "on-demand" approach to deploying JavaScript applications incrementally confers great benefits, but nontrivial use can pollute functions with expressions that are unrelated to their essential nature. Aspect-Oriented Programming (AOP) can resolve this problem completely; yet AOP in JavaScript is an unexplored area of web development. In this article, I show the need for such techniques in web development, and explain the principles of function interception in JavaScript. In short, I present an elegant technique for loading JavaScript libraries transparently at the point of need.

JavaScript Library Inclusion

JavaScript programs are associated with HTML documents by means of script elements where, in the simplest case, opening and closing <script> tags delimit the JavaScript syntax embedded within a page. However, many pages may require the same functionality, and this mandates placing the relevant code in discrete files that bear a .JS extension. Such libraries can then be pulled into the execution environment by specifying the file name as the value for the src attribute in an empty <script> element; see Listing One.


<html>
   <head>
      <script type = "text/javascript" 
              src  = "MyLib.js"></script>
   </head>
   <body> ... </body>
</html>
Listing One

JavaScript's interpreted nature aside, this is identical to the #include mechanism supported by C/C++, but the Pareto principle (en.wikipedia.org/wiki/Pareto_principle) also indicates the seeds of trouble. Generally, 90 percent of a program's runtime is spent executing only 10 percent of its code, implying that functionality should be loaded into the execution environment only when needed lest resources be consumed redundantly. Compiled applications accommodate this by using DLLs, but without similar intervention a client-side JavaScript application can download large tracts of code that are never actually executed.

Such inefficiency should be avoided assiduously in web deployment; it consumes bandwidth unnecessarily, increases download times, and stresses both server and client needlessly. The poor performance that results can render an otherwise competent application unpopular if not unusable, and this concern can only grow as web developers become ever more adventurous in their use of JavaScript.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video