Views
CFJAVASCRIPT
Contents |
Description
The CFJAVASCRIPT tag helps you better, and more efficiently, manage your client javascript files. It performs a number of functions that reduces both load and bandwidth on your server and offer an overall faster experience to your users.
It can both join up multiple Javascript files as well as running a highly optimized minimizer on the result Javascript.
For example, it can take the standard JQuery1.3 build of 115KB and reduce it to 55KB
It permits you to write your Javascript as verbose as you wish, ensuring it is easy to maintain and read, but when it gets delivered to the client, the engine can optimize it for you.
This tag can be operated in one of two modes; it can take a series of external files and combine and optimize them into one, or it can take a block of Javascript and throw it straight out to the browser like <script>
Syntax
<cfjavascript src="">
or
<cfjavascript>
myfunction = function(){
// Some JS in here that will optimized on the page
};
</cfjavascript>
Attributes
| Attribute | Req/Opt | Default | Description |
|---|---|---|---|
| src | optional | Either a single path or a CFML array of paths's to different Javascript files. All relative to the document root. If not specified, then a closing tag is required and the content inside the tag will be optimized | |
| minimize | optional | true | turn on or off the javascript minimizer engine |
| munge | optional | true | if the javascript minimizer engine is turned on, this controls if the optimizer is allowed to change internal names |
Notes
This tag allows you to minimize the number of calls made to your server for JS resources. If you have say 5 Javascript files you always load, then you can bring them altogether and reduce that hit to a single request. This tag will also aggressively cache on the browser the resulting Javascript file so repeated full requests should not be made.
If any of the underlying javascript files change, or you change the optimizer, then JS is rebuilt and the browsers will reload on their next call.
CFJAVASCRIPT utilises the popular Yahoo! UI Library: YUI Compressor [1] for when the minimizer is turned on.
Usage
For example you may have:
<html> <head> <script src="/common/jquery.js"></script> <script src="/common/jquery.autocomplete.js"></script> </head> <body></body> </html>
this would result in 2 requests to the browser, resulting in approximately 160KB being downloaded.
alternatively you can replace it by, which reduces the request to 1, and only 59KB being downloaded.
<html> <head> <cfset jsFiles = ArrayNew(1)> <cfset ArrayAppend( jsFiles, "/common/jquery.js" )> <cfset ArrayAppend( jsFiles, "/common/jquery.autocomplete.js" )> <cfjavascript src="#jsfiles#" minimize="true"> </head> <body></body> </html>
The CFJAVASCRIPT will create a single <script></script> block within the HTML page that the browser will then request.
Engine
+ OpenBD 1.0.2
