Create javascript function from string

Question

I want to load a javascript function from a text file over ajax (using jQuery) but cannot seem to be able to get it right.

This is my javascript function which I want to load from a text file (abc.js):

function my_alert() { alert 1; }

This is how I use ajax to read the file:

$.getScript('abc.js', function (script) { 
    var loaded_function = ???
});

How do I assign loaded_function so that I can call my_alert using loaded_function.my_alert() ?

EDIT

The reason I do not want to create new <script> tags or use $.getScript is that my_alert then lives in the global context. I want it to only live inside the { } function scope.

Is this possible?

Answer 1

How do I assign loaded_function so that I can call my_alert using loaded_function.my_alert()?

Use the module pattern for this

# this is the module
function my_alert(){

    // Private section
    var loaded_function = ...

    // Public section which any instance can have access to  
    return{
       loaded_function: loaded_function
    };
}

---

Demo code:

var my_alert = (function() {

    // Private section
    function private() {
        console.log('Private function ...')
    }

    // Public section which any instance can have access to
    return {
        public: private
    };
})();

my_alert.public();

---

Load JS file and store it:

(function(url, callback){

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            // Your file data is now in the :
            // this.responseText;
        }
    }

    xhr.open("GET", url, true);
    xmlHTTP.send();

})("url");

Answer 2

You either use eval (which is dangerous) like this:

$.getScript('abc.js', function (script) { 
    var loaded_function = eval(script);
});

or you can can use the normal assigning method

*this method will work only if the script contains a function definition like

function myFunction(){/* some code*/}

the code will be :

$.getScript('abc.js', function () { 
    var loaded_function= myFunction;   //not = myFunction()
});

Answer 3

It's a good practice to wrap your function in an object. This way you could have eg:

var exposed = {
myFunc: function () {}
}

So, 'script' should be the function and assigning it to a var should expose its scope.

var loaded_function = script.exposed

To call it:

loaded_function.myFunc();

Answer 4

You can use this code:

$.get('abc.js', function(script) {
    var loaded_function = {};
    var function_list = [];
    // save names of defined functions
    for (var key in window) {
        if (typeof window[key] == 'function' && !window[key].toString().match(/\[native code\]/)) {
            function_list.push(key);
        }
    }
    // use global eval https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
    var geval = eval;
    geval(script);
    for (var key in window) {
        if (typeof window[key] == 'function' && !window[key].toString().match(/\[native code\]/) &&
            function_list.indexOf(key) == -1) {
            loaded_function[key] = window[key];
            delete window[key];
        }
    }
    console.log(loaded_function.my_alert);
}, 'text');