Search code examples
javascriptjqueryjscriptecmascript-5

Writing ECMAScript5 compliant code

I want to build a library in JavaScript/JScript/ECMAScript...whatever you want to call it, which will target modern standards (HTML5, CSS3, ESv5) with that in mind, any browser that supports the standard! Now I know there are already plenty of useful libraries out there, i.e. jQuery and MooTools. Of course they're great and I already use those where necessary, but I should not be forced to jump on the same bandwagon as every other developer just because it's popular!

So for the sake of the following questions, let us not concern ourselves with 3rd party libraries such as jQuery and MooTools. Lets get down to nitty-gritty JavaScript/JScript/ECMAScript.

Firstly, I asked a question prior to this (What's the difference between JavaScript, JScript & ECMAScript?), as I did not know what the difference was.

Thankfully I concluded the following:

ECMAScript is the language specification. JavaScript and JScript are dialects of ECMAScript.

JavaScript is Mozilla's implementation of ECMAScript.

JScript is Microsoft's implementation of ECMAScript.

OK, that was a nice simple answer wasn't it? But here's some questions which stem from that:

  1. is "JavaScript" supported in non-mozilla browsers, and to what extent?
  2. is "JScript" supported in non-microsoft browsers, and to what extent?

Based on those two questions, I did a little digging and ran a simple test on IE9, FF14 and GC19.

Here is the test code:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 5 Template</title>
        <script language="JavaScript1.3">
            jsver = "1.3";
        </script>
        <script language="JavaScript1.4">
            jsver = "1.4";
        </script>
        <script language="JavaScript1.5">
            jsver = "1.5";
        </script>
        <script language="JavaScript1.6">
            jsver = "1.6";
        </script>
        <script language="JavaScript1.7">
            jsver = "1.7";
        </script>
        <script language="JavaScript1.8">
            jsver = "1.8";
        </script>
        <script type="text/javascript">
            document.write("<B>Your browser supports JavaScript version " + jsver + ".</B>")
        </script>
    </head>
    <body>
    </body>
</html>

The results were: IE9 = JSv1.3, FF14 = JSv1.8, GC19 = JSv1.7

OK, then I ran this test, which tests for ECMAScript version 5 support: http://kangax.github.com/es5-compat-table/#showold

Again using the same browsers (IE9, FF14, GC19), ESv5 seems to be fairly well supported!

Now comes the tricky bit! I come from a Microsoft background, and write software using languages like C#, ASP.NET etc, so naturally, my IDE of choice is Visual Studio (currently 2010). When I look through the JavaScript intellisense I see things like ActiveXObject, Array, Object, etc.

  1. Should I trust VS2010's intellisense?
  2. Where can I find a reference of ESv5 supported objects and features?
  3. How do I detect if a browser supports a particular object or feature?
  4. Is there anything better than VS2010 out there that will help me write compliant ESv5 code?
  5. Is it safe to override implementations of existing objects like Object, Number, Boolean etc, or should I just extend the existing implementation?

Finally, concerning myself with jQuery. Let's say I can't be bothered to write the core compliancy & functionality myself, can I just write my library to sit on top of jQuery...or is this just a copout?

Solution

  • 1) Nope. Certainly it won’t restrict to just valid ECMAScript.

    2) http://kangax.github.com/es5-compat-table/ is always useful.

    3) You can just check to see if it’s defined. E.g.

    typeof(Array.isArray) === 'function'; // true in newer browsers, false in IE8

    4) Your best bet is to read the spec! Using "use strict"; in your code will also catch some classes of errors and it good practise. More explanation on strict mode at http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

    5) Certainly I wouldn’t replace the original objects. If you’re going to extend properties I’d first double-check that a compliant implementation doesn’t already exist. E.g. PrototypeJS added (before browsers implemented it) a document.getElementsByClassName. When browsers started implementing it natively they found out that sites using Prototype were still using the slow JS-based version. The fix was just to wrap Prototype’s definition in a if (document.getElementsByClassName == undefined) { }