Note: Here is a quick overview of JavaScript that is as short as possible, but explains every major feature. I would also recommend following the 2ality website

Today JavaScript projects have the complexity, size, and structure of projects written in languages like C# and Java. Thankfully, the developer tools for debugging and logging are solid across browsers. *Opera is still a little funky about logging using “opera.postError.apply(opera, arguments);”. Looking particularly good, Google’s version of the webkit dev tools and some API’s they have in beta. I’ve started to use quint for unit testing. I’ve also been looking leveraging these frameworks: underscore.js, coffee script, raphaeljs, and closure compiler.

It’s amazing how much has changed. Now examples of good JavaScript are much easier to find. Hell, here is a step by step walkthrough of how to build your very own JavaScript framework.

So to get some practice I went and found some JS that needed cleanup. I wanted to focus on structure and namespaces and this script needed some love. View source on that page and you will notice global variables and one big pile of code.

The first thing I did was break up the logic into separate functional script files that will later be compiled and minified into one. You can see the python script I use to minify here.

1. animation.js
2. builder.js
3. core.js
4. pie.js
5. rendering.js
6. styles.js

I then added a test folder and setup the same file names but which had test cases for each script. Then an index.html file to display the test groups or “modules” as they are called in QUnit. Here is an example of a test that always passes

module("sample test");

test("a sample qunit test", function () {
    ok(true, "always fine");
});

The next thing I worked on was getting a namespace around the code. I went with the following which seems to work for my needs.

var MYAPP = MYAPP || {};

MYAPP.namespace = function (ns_string) { var parts = ns_string.split('.'), parent = MYAPP, i; // strip redundant leading global 

if (parts[0] === "MYAPP") { parts = parts.slice(1); } for (i = 0; i < parts.length; i += 1) { // create a property if it doesn't exist 

if (typeof parent[parts[i]] === "undefined") { parent[parts[i]] = {}; 

} parent = parent[parts[i]]; } return parent; }; 

Stefanov, Stoyan (2010). JavaScript Patterns (pp. 89-90). OReilly Media – A. Kindle Edition.

So after refactoring, I’ve got the pie chart setup code to the following.

var pieElm = document.getElementById('pieChart');
var pieData = $('#chartData td');

var pieChart = new SimpleHtml5.Core.Pie(pieElm, pieData);

$('#pieChart').click (pieChart, SimpleHtml5.Pie.Animation.HandleChartClick);

To customize the style I allow passing in a custom style object to override the defaults.

var customStyles = {
    chartSizePercent: 49,
    maxPullOutDistance: 10,
    pullOutFrameStep: 4,
    pullOutFrameInterval: 40,
    pullOutLabelPadding: 42
};

var pieElm = document.getElementById('pieChart');
var pieData = $('#chartData td');
var pieChart = new SimpleHtml5.Core.Pie(pieElm, pieData, customStyles);
$('#pieChart').click (pieChart, SimpleHtml5.Pie.Animation.HandleChartClick);

If you are curious about how the other parts of the chart were organized you can see the source code on github.

I can also be found on Google+ Jason Rowe and twitter @jsonrow