开发者

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

开发者 https://www.devze.com 2022-12-23 00:01 出处:网络
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 avail

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?


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;
}   


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.


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.


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号