Can I move this JavaScript function which VisualForce used out of the global namespace?

Question

Currently looking at Refreshing Chart Data Using JavaScript Remoting

Reading about JavaScript best practices, I came across the idea of keeping functions out of the global namespace, so I tried to refactor the Javascript to look like this:

   var vfStudy = vfStudy  || {};

vfStudy.refreshRemoteChart = function() 
{
    $("#statusDisplay").text("Loading...");
    retrieveChartData
    (
        function(statusElement)
        {
            return function(data)
            {
                RemotingPieChart.reload(data);
                $("#statusDisplay").text("");
            };
        }
        (statusElement)
    );
};

vfStudy.retrieveChartData = function (callback) 
{
   var year = $("#theYear").val();

   var retrieveCallback = function(result, event) 
   {
       if(event.status && result && (result.constructor === Array)) 
       {
           callback(result);
           RemotingPieChart.show();
       }
       else 
       {
           $("#remoteResponseErrors").text(event.message + ((event.type === 'exception')  ?  ('<br/>' + event.where) : ''));
       }                   
   };

   Visualforce.remoting.Manager.invokeAction ( 'Sledgehammer.VF_PieChartVFCtrl.getRemotePieData', year, retrieveCallback , { escape: true } );
};  

Moving the refreshRemoteChart into the vfStudy namespace worked as expect, but even updating data="retrieveChartData" to data="vfStudy.retrieveChartData", the VisualForce Chart would not render.

Is it possible for me to move this function out of the global namespace? If so, how?

Answer 1

Brian, I think you can address this problem by adding the following steps to your approach:

1. Before you define your namespace, create a dummy variable: var noData = new Object();
2. When defining the component, specify data="noData". This is simply to avoid JavaScript runtime errors. As you would expect, no data will be bound to the chart.
3. At the end of the page, add another script element and simply call your vfStudy.refreshRemoteChart() function

I tried this out in my DE org and was able to get it to work (I think) the way you want. You do need a few extra lines of code, but you'll end up with a clean global namespace. Please take a look at this gist for reference: https://gist.github.com/martyychang/2162c3f467927f7b3601