Patterns for Structuring JavaScript Code

Microsoft’s Dan Wahlin has produced an excellent series of posts on “Techniques, Strategies and Patterns for Structuring JavaScript Code“. These include using closures, the Prototype pattern, the Revealing Module Pattern (Dan’s favourite) and the Revealing Prototype pattern.

Dan also has a later post on Creating Multiple JavaScript Objects when using the Revealing Module Pattern.

Sometime, Dan gets things wrong in this series of posts and is corrected/advised by users in the comments. Dan always takes the comments on board and suggests ways to incorporate these thoughts and improve the code, or changes the code examples as a result of the feedback. Dan’s lack of ego and willingness to improve things adds more value to these pages – so make sure you read the comments!

Update: This series of blog posts is now available as a video course on Pluralsight.

Jimmy Cuadra has a nice tip on organizing your JavaScript code into simple namespaces here. This article also includes an idea for handling the “this” context when using the JavaScript prototype pattern (by emulating the Prototype.js library’s bind() function). Jimmy suggests the bind() function, while messy looking, may become an ECMAScript standard in v5.

Essential JavaScript Design Patterns – Addy Osmani. This is a fantastic, free, online ebook. Very much respected and very up to date (at the time of writing). This is Volume 1.5. Addy says he is working on Volume 2.

JavaScript Programming Patterns – Another great reference, with useful advice, from Klaus Komenda

The Correct Syntax for the inline <script> tag.

HTML

In HTML, the content type between the <script> tags is treated as CDATA which means that entities enclosed within it will not be parsed.

<script type="text/javascript">
// Your unescaped Javascript here...
</script>

Note: It is no longer necessary to enclose the contents in comment tags i.e. “// <!–  (Javascript here)  //–>”. This was once a common practise in order to hide the Javascript from very old browsers which didn’t recognise Javascript and would attempt to display it as text. Since the demise of Mosaic, Netscape 1 and Internet Explorer 2 circa 1996 this is no longer an issue.

XHTML

In XHTML, the content between the <script> tags is treated as #PCDATA which means that it will be parsed. So, to avoid having to encode the data between the tags we enclose it in a CDATA section.

Some older browsers don’t recognise the CDATA tag so we “hide” them by prefixing them with Javascript comments “//”.

The end result is that the page will validate as XHTML and will still work in older browsers.

<script type="text/javascript">
//<![CDATA[
// Your unescaped Javascript here...
//]]>
</script>

Note: In either case, we no longer use the deprecated “language” attribute.

The ClientSide API for the ASP.NET Validation Controls

Page_IsValid – A global boolean variable indicating if the page is valid.

Page_Validators – An array containing all the validation controls on the page.

ValidatorValidate(Validator) – Calls the validation function for a specified Validation control. Validator is an actual control reference, not an id.

This will update the global Page_IsValid boolean variable.

Page_ClientValidate() – Calls the validation routine for all validation controls in the Page_Validators array. This will update the global Page_IsValid boolean variable.