Care for JavaScript

Building and developing frameworks along with following web standards and some form of a design pattern will help combat against careless coding. Another artifact of building a framework will be more rapid development times and more cohesive packages. At the time of this writing the de facto example of a JavaScript framework is prototype which is protected under open source licenses; MIT and CC-SA (Creative Commons – Share Alike). Caring for the JavaScript also means caring for the HTML it will be run in. Avoid JavaScript only methods that cause the browser to render abnormally, have your code degrade gracefully, if a browser is not JavaScript enabled.

Be Patient with JavaScript

Sometimes it is not necessary to load all the JavaScript in the head of the document or the body onload event. Do not make it standard practice to place all code at the beginning; rather look closely at what code could be placed at the end of the document, at the beginning, or when the page has completely loaded. Delay loading of JavaScript whenever possible, being patient with it will make your browser very happy. And remember to load only what you need. Why load code that is not necessary for the page?

Put JavaScript on a Diet

Once the code is written and the unexpected features have been fixed, you are ready to place your JavaScript on a diet. Remove excess whitespace and comments, use semicolons to break lines in code, and abbreviate variable and object names. This process can be done manually or automatically with vendor packages. Two resources for automatically reducing the JavaScript file size are JavaScript Crunchinator and ESC. Remember to always backup your files before placing it on a diet. To potentially further reduce file size and keep prying eyes from easily reading the source, using an obfuscation tool is recommended. Here is an example of one such tool, you can find many more on the interweb.

Have JavaScript Files Carpool

Roughly 80% of the users’ response time is spent of the client-side. The greater number of JavaScript resources needed in turn produces a greater number of HTTP requests needed. A way to reduce the number of requests is to combine the JavaScript files to a single script. The fewer number of HTTP requests used, the better response time the user will observe.

The most common way to define a regexp pattern is to define a variable instance with a pattern you want to match, along with any modifiers you wish to use. This can be achieved with the following:

1

var pattern = new RegExp("yourpattern", ["g"|"gi"|"i"|"x"]);

Understand that the second parameter is just an example, and not to be applied to all your patterns.

Understanding Modifiers:

Modifiers are parameters that a newly instantiated RegExp class use to define how to parse a particular pattern from its string. The most common modifiers used are g, i, m, x, U, and a combination of g, and i.

g means Global Match, i means Case Insensitive, m means Multiple Lines, x means Allow Comments and White Space in pattern, and U means Ungreedy pattern.

For example, if you wish to match foo in a large document that contained words like Foo, foo, and foobar, you would apply the following pattern:

1

var pattern = new RegExp("foo", ["g"|"gi"|"i"]);

Modifiers can also be applied with the string you wish to match, like /foo/g or /\s/g

Handling Regular Expression Methods:

There are seven definitive methods most commonly used when handling RexExp and String classes. Writing the pattern is only half the battle, knowing how to use them is the desired end game.

RegExp.exec(string) will apply the RegExp to a string and return an array of matches.

1

var exec= new RegExp(/foo/i).exec("foo foofighter Foo foobar")

RegExp.compile will take a non literal notation pattern, and compile it to RegExp native for faster execution. No example needed as this method is not used very often.

RegExp.test(string) will return true if the given string matches the RegExp pattern, returns false if not

1

var test = new RegExp(/foobar/).test("Foo bar foo Bar")

String.match(pattern) will match the string with the given pattern. If the modifier g is applied, it will return an array of matches. If not applied, it will either return the first match, or null for no matches.

1

var match = "Foobar is a foofighter, foo".match(/(foo)(oo+)/g)

String.search(pattern) will return the numeric beginning of the index of the matched pattern, will return -1 if no match is found.

1

var search = "Apples and oranges are not foos and bars".search(/foos/)

String.replace(pattern, string) will find the matched pattern and replace it with the supplied string, and returns the newly formed string.

1

var str = "Foobar is the big foobar.".replace(/foobar/gi, "apples")

String.split(pattern) splits the string into an array, splitting at the matched pattern.

1

var split = "Foo bar is a great word".split(/\s/g)

Backreferences:

Simple put, backreferences are references to the same variable in a previously successful match. \n where n is any positive nonzero integer telling the engine which successful match to reference. The following code will match any html tag:

1

var tags = new RegExp(/<(\S+).*>(.*)<\/\1>/)

Character Sets:

Character sets match any of the contained characters, and can be written in ranges. Examples of acceptable patterns are:

1
2
3

var halfchars = new RegExp(/a-l/)
var allnums = new RegExp(/0-9/)
var allcharsnonums = new RegExp(/^0-9/)

Quantifiers:

Quantifiers match the preceding subpattern n number of times. Acceptable subpatterns include, single characters, escaped sequences, patterns enclosed in parentheses, and character sets.

1

var matches = new RegExp(/o{1,2}/).match("Foobar foofighting toooo many times with the Fockers")

Example Regular Expression Patterns:

Trimming whitespace from the beginning and end of a string would look like the following:

1

var trim = new RegExp(/^[ \s]+|[ \s]+$/)

Validating an IP address would use the following pattern to capture the group of numbers between each [ . ].

1

var vip = new RegExp(/\b(?:\d{1,3}\.){3}\d{1,3}\b/)

Matching a date would look like the following

1

var date = new RegExp(/(\d{1,2}\/\d{1,2}\/\d{4})/)

The following pattern loosely validates email addresses:

1

var email = new RegExp(/\w@(a-zA-Z_]+?.[a-zA-Z]{2,6}/)