How can get a list of the functions in a javascript file?

Question

I'm trying to cobble together a php style include function for javascript. The route I'm taking is through a XMLHttpRequest. The included file will load, but the functions in that file aren't available as their scope is limited to the function that is calling them.

I came across this article which achieves a similar goal, but requires the coder to specify which functions they require in advance, while I would like to simply include a file and automatically add the functions the window object.

Here's my progress

function twinkle(){

    getXMLHTTPObj("twinkle/test.js");

    // A simple function inside test.js
    includedFunc();

}


// XMLHttp Stuff lifted from he Apple tutorial

var req;
function getXMLHTTPObj(url) {
    req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest && !(window.ActiveXObject)) {
        try {
            req = new XMLHttpRequest();
        } catch(e) {
            req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                req = false;
            }
        }
    }

    if(req) {
        req.onreadystatechange = processReqChange;

            // Set to False so javascript waits for the included functions 
            // to become available 
        req.open("GET", url, false);
        req.send("");
    }

    return req;
}

function processReqChange() {
    // only if req shows "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            eval(req.responseText);
        } else {
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
        }
    }
}

I'm considering creating an index of functions inside each included file that can be iterated over when the file is included, but that's not really an elegant solution.

Any ideas? Is there some javascript property or function I can access to get a list of functions in the file?

Answer 1

Instead of loading the JavaScript file via AJAX, why not create a <script> tag and insert that into the page? That will allow the JavaScript to be parsed in the global scope. Take a look at how Scriptaculous' require function works

Answer 2

Change the way you declare your functions and it should solve the scoping issue. Instead of:

function add(a, b) 
{                     
    return a + b;
} 

do this:

var add = function(a, b) 
{                     
    return a + b;
}   

Answer 3

It's simple enough to use the DOM to add the required script:

function include(jsFile)
{
    var sEl  = document.createElement("script");
    sEl.type = "text/javascript";
    sEl.src  = jsFile;
    document.getElementsByTagName("head").appendChild(sEl);
}

Browsers will even download this file asynchronously, and script elements have an onload event that works in most (all?) popular browsers so you can also add a callback function if you like. The obvious downside is that functions wouldn't become available to the current script until the file is downloaded and parsed.

Answer 4

OrbMan pointed me in the right direction on this one, but the solution to this particular method of including Javascript files requires the functions be defined differently; like this

window.myFunction = function(){ 

    alert("Hey There!") 

}

A potential upside to this is that any functions in the included file that are declared the normal way are encapsulated so they are only available to the window.functions from that file... as far as I can tell.