Can an eval access external functions?

Question

My company allows us to write code in a javascript editor online. Other libraries are preloaded, so the code we write has access to these libraries.

Specifically, we can use Underscore.js and jQuery.js functions in our code. We can also use our very own library Graphie.js.

In an effort to save myself time, I have slowly built up my own personal set of functions which I copy and paste into every code I write. That set of functions is now so long that I want to fetch it externally (in order to save space, etc).

$.getScript( 'url/to/myfunctions.js' )

I tried the above code, but it was too good to be true. This jQuery function getScript seems to run myfunctions as their own independent unit. This fails because myfunctions use our Graphie.js functions within them.

$.get( 'url/to/myfunctions', eval )

This above code fetches and successfully evals my code (i configured my server to do so). Also too good to be true. Any jQuery and Underscode functions in my code actually work. But any Graphie functions in my code cause an error.

Answer 1

Instead of

$.get( 'url/to/myfunctions', eval );

try

$.get( 'url/to/myfunctions', function(code) { eval(code); } );

This way the eval function is going to be executed within the same scope as the rest of your code, rather than within the scope of jQuery. After the code has been fetched and executed, you can continue with the execution of the rest of your code:

$.get( 'url/to/myfunctions', function(code) {
  eval(code);
  callback();
});

function callback() {
  // Your code goes here
}

Explanation

For the purpose of the explanation, let's use this simplified model of the environment, in which your code is being executed:

// JQuery is defined in the global scope
var $ = {
  get: function( url, fn ) {
    var responses = {
      "url/to/myfunctions": "try {\
        if(graphie) log('Graphie is visible.');\
      } catch (e) {\
        log('Graphie is not visible. (' + e + ')');\
      }"
    }; fn( responses[url] );
  }
};

(function() {
  // Graphie is defined in a local scope
  var graphie = {};
  (function() {
    // Your code goes here
    $.get( "url/to/myfunctions", eval );
    $.get( "url/to/myfunctions", function(code) { eval (code); } );
  })();
})();

The output: <ol id="output"></ol>
<script>
  function log(msg) {
    var el = document.createElement("li");
    el.appendChild(document.createTextNode(msg));
    output.appendChild(el);
  }
</script>

As you can see, the function passed to $.get gets executed inside its body. If you only pass eval to $.get, then you don't capture the local variable graphie, which is then invisible to the evaluated code. By wrapping eval inside an anonymous function, you capture the reference to the local variable graphie, which is then visible to the evaluated code.

Answer 2

I'd advise against the use of eval. However, you can follow the following model.

First in your myFunctions.js, wrap all your code into a single function.

(function(_, $, graphie) {
   // declare all your functions here which makes use of the paramters
}) // we will be calling this anonymous function later with parameters

Then after getting the script you could do

$.get( 'url/to/myfunctions', function(fn){
    var el = document.createElement('script');
    el.type = 'text/javascript';
    el.text = fn + '(_, jQuery, Graphie);';
    document.head.appendChild(el);
});

Note that, I've put Graphie as the parameter, but I'm not sure of it. So put your correct graphie variable there.

Answer 3

Assuming that you have ajax access to this script (since that is what $.get is doing in your sample code shown), you could attempt to use jQuery's .html() to place the script which should execute it with the page's variable environment.

$.ajax({
        url: 'url/to/myfunctions.js',
        type: 'GET',
        success: function (result) {
            var script = '<scr'+'ipt>'+result+'</scr'+'ipt>';
            var div = $("<div>");
            $("body").append(div);
            div.html(script);
        }
});

Internally, this script will end up being executed by jQuery's globalEval function. https://github.com/jquery/jquery/blob/1.9.1/src/core.js#L577

// Evaluates a script in a global context
// Workarounds based on findings by Jim Driscoll
// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
globalEval: function( data ) {
    if ( data && jQuery.trim( data ) ) {
        // We use execScript on Internet Explorer
        // We use an anonymous function so that context is window
        // rather than jQuery in Firefox
        ( window.execScript || function( data ) {
            window[ "eval" ].call( window, data );
        } )( data );
    }
}

I also asked a question related to this here: Why is it that script will run from using jquery's html but not from using innerHTML?

Answer 4

Thanks to everyone's help, here is the solution that worked...

The myfunctions.js file has to be wrapped in a function:

function everything(_,$,Graphie){
    // every one of myfunctions now must be attached to the Graphie object like this:
    Graphie.oneOfMyFunctions = function(input1,input2,etc){
        // content of oneOfMyFunctions
    }
    // the rest of myfunctions, etc.
}

Then in my code I can retrieve it with:

$.get( '//path/to/myfunctions', eval )
everything(_,jQuery,mygraphievar);

Somehow, the code being evaled didn't have access to the global variable mygraphievar, which is why it had to be passed in and NOT part of the evaled code (here Amit made a small error).

Also, the everything function is executed OUTSIDE of the $.get() so that the changes to mygraphievar are made before any other code below gets executed.

One should notice that $.get() is actually an asynchronous function and will not call eval until after other code is executed. This causes the code to fail the very first time I run it, but after the first time the functions get saved in memory and then everything works correctly. The proper solution would be to write ALL of the code I want to execute in the callback function of the $.get(), but I was lazy.

One should also know that a slightly simpler solution is possible with $.getScript() but I don't have time to verify it.