javascript

❑
❑
Chapter 20: Best Practices
File size — You write code in a way that makes it easy to read, which is good for maintainability
but bad for performance. The browser doesn ’ t benefit from the extra white space, indentation, or
verbose function and variable names.
Code organization — The way you organize code for maintainability isn ’ t necessarily the best
way to deliver it to the browser.
For these reasons, it ’ s best to define a build process for your JavaScript files.
A build process starts by defining a logical structure for storing your files in source control. It ’ s best to
avoid having a single file that contains all of your JavaScript. Instead, follow the pattern that is typically
taken in object - oriented languages: separate each object or custom type into its own file. Doing so
ensures that each file contains just the minimum amount of code, making it easier to make changes
without introducing errors. Additionally, in environments that use concurrent source control systems
such as CVS or Subversion, this reduces the risk of conflicts during merge operations.
Keep in mind that separating your code into multiple files is for maintainability and not for deployment.
For deployment, you ’ ll want to combine the source files into one or more rollup files. It ’ s recommended
that web applications use the smallest number of JavaScript files possible, because HTTP requests are
some of the main performance bottlenecks on the Web. Keep in mind that including a JavaScript file via
the < script > tag is a blocking operation that stops all other downloads while the code is downloaded
and executed. Therefore, try to logically group JavaScript code into deployment files.
Once you ’ ve organized your file and directory structure, and determined what should be in your
deployment files, you ’ ll want to create a build system. The Ant build tool ( http://ant.apache.org )
was created to automate Java build processes but has gained popularity with web application developers
because of its ease of use and coverage by software engineers such as Julien Lecomte, who have written
tutorials explaining how to use Ant for JavaScript and CSS build automation (Lecomte ’ s article can be
found at www.julienlecomte.net/blog/2007/09/16/ ).
Ant is ideal for a JavaScript build system because of its simple file-manipulation capabilities. For example,
you can easily get a list of all files in a directory and then combine them into a single file as shown here:
< project name=”JavaScript Project” default=”js.concatenate” >
< !-- the directory to output to -- >
< property name=”build.dir” value=”./js” / >
< !-- the directory containing the source files -- >
< property name=”src.dir” value=”./dev/src” / >
< !-- Target to concatenate all JS files -- >
< !-- Credit: Julien Lecomte, http://www.julienlecomte.net/blog/2007/09/16/ -- >
< target name=”js.concatenate” >
< concat destfile=”${build.dir}/output.js” >
< filelist dir=”${src.dir}/js” files=”a.js, b.js”/ >
< fileset dir=”${src.dir}/js” includes=”*.js” excludes=”a.js, b.js”/ >
< /concat >
< /target >
< /project >
661