last day (20 days later) » 

11:07 PM
1
A: Getting Javascript files using Rawgit

Peter BehrFor RawGit, you get content-type: application/javascript;charset=utf-8 as expected, and GitHub gives Content-Type: text/plain; charset=utf-8. That seems to be the only difference. I checked your example and found that when using RawGit (and getting a script response), the success callback wouldn...

 
Thank you very much for your great effort, but there's still something I don't understand: if the problem with my code is that jQuery is executing my script without even running the callback, how would avoid this behavior (I don't want the script to be executed, just the callback, since I'm using eval() on the string containing the script from there)?
 
When $.get() receives data it's told is JavaScript, it calls $.globalEval() with that content as an argument, which runs eval() on the data in the global scope. That is the default behavior, it doesn't seem you can change it. Your problem is that when your script is executed in the global scope, it throws an error because there's (at least one) reference to a variable that's undefined in the global scope, and so the rest of $.get(), which includes running callbacks on the result, fails silently. There are a few different ways to fix this.
 
Yes, the calls to undefined functions and variables are because the code uses a library called Processing.js, which contains a lot of predefined functions for drawing and animating elements in the canvas tag. That's why I need to code to be executed only inside the callback. I guess I'll keep making the Ajax code receive the code as a text file, which solves the problem. Thank you for explaining the issue to me, it was making me go crazy. I'll give you the bounty
 
Why are you loading the script dynamically?
 
Because I needed the callback function that's executed with the Ajax call. What else would you suggest?
 
11:07 PM
A quick workaround would be to set dataType: 'text' in the request parameters, as described here: stackoverflow.com/questions/14248491/…. Then you might be relatively confident that regardless of the headers with which the script is served, jQuery will think it's text and let you use it as a simple string.
 
Good idea, thank you very much
 
A few more thoughts. You don't need the with keyword (it's strongly discouraged), when you call eval() it uses the scope of the block it's in which includes processingInstance and variables defined above it. But I ask why you need to load it dynamically because it seems to me that you can include the script statically in markup (underneath libraries) and then put the callback in its own script, statically after all the others. Scripts load in parallel and execute in the sequence they appear. If you want to be extra sure, use something like $(document).ready() around the final script.
In my mind, the use case for dynamically loading scripts seems to be: you have a lot of big scripts which do/don't need to be loaded based on user behavior. Or, you are very concerned about performance and want to load lots of scripts asynchronously (but then you need to be careful about scope). Unless one of those applies, simpler is way better. And avoiding eval() is always a good idea. Thank you for the bounty!
 
Regarding your thoughts towards using the with keyboard: I tried what you suggested but it didn't automatically incluede processingInstance in the scope, so it didn't work. I'm aware of the problems surrounding with (I know it causes problems when you want to access variables in the global scope), but I'm using it anyway because I don't access any global varibales in my script, so with causes no problems
Regarding your suggestion to load the script statically: I would like to do it, but I don't understand your explanation of how to do it, would you mind explaining again?
 
Moving this to chat. I mean:
<script type="text/javascript" src="[library url]"></script>
<script type="text/javascript" src="[general game script]"></script>
<script type="text/javascript" src="[script which invokes a game instance, AKA callback]"></script>
This inside your HTML. That's "static". Considering you have some problems with scope, it might take some work for you to get this to work, but this is by far the easiest way.
(If your game script relies on certain libraries to be present, you should check if those libraries are in scope before it executes. There are other more sophisticated ways of managing dependencies, but unless you have a LOT of libraries you don't need to worry about them.)
So for example, pretend that Processing.js puts an object like $P into scope, which owns methods like $P.manipulateData() or whatever. At the top of your general game script, you'll test whether it's defined:
if (typeof $P === 'undefined') { console.log('Processing.js not loaded'); return; }
Or otherwise handle that error case in a way which doesn't throw an exception (which as we have seen might cause something else to fail silently) and gives you useful feedback. And you can use the same technique in your "callback" script.
It's good to treat your large game script as a general library, conceptually, that requires other library objects as dependencies (it can get those from global scope or actually be give them during instantiation), and results in the exposure of a central object. You then instantiate a copy of that object and save it in a variable reference, and manipulate it however you want.
If you needed to, you could replace that instance with another one, or have multiple instances of that object, all attached to different canvas elements in the same page. Flexible and modular.
Hope that makes sense.
 
11:32 PM
Also, about with: I wasn't paying attention to this earlier, but now that I look at the Processing.js documentation I suggest you do this:
`var sketchProc = function (processing) {
processing.size(400, 400);
processing.frameRate(30);
}
var canvas = $('#game'); // use jQuery since you have it
var processingInstance = new Processing(canvas, sketchProc);`
Then, your game script can manipulate the instance of the Processing() object called processingInstance. Or even better, that it's invoked with a generic Processing() instance (using a closure) which it manipulates in its own scope. For example:
var p = new Processing(canvas, sketchProc); var game = new Game(p); // inside Game()` you do stuff to processing.
Sorry, that is, // inside Game() you refer to variable p, the Processing instance you passed it
What you were getting instead with with was that it looked for some place in the whole scope where you'd defined processingInstance, and finding var processingInstance = ... and giving the entire scope of that to the with block, which I think means that the block had the same scope as the Processing() object, which is why size() was defined if you used with and not otherwise. This might work usually but is also a recipe for disaster if your game script accidentally
redefined something that was already defined in Processing().
Instead, initializing a Processing() object takes a sketchProc() function which has an argument (could be called anything, argument names are generic) that receives a Processing() instance when that function is called. That argument name is then defined in the scope of sketchProc(). Since it refers to an instance of Processing(), it has a method .size() and so on. But just looking for size() will not work because it's looking for the name in global scope first,
and then any scope enclosing that sketchProc() function.
Anyway, this is the documentation's fault. In Java, scope doesn't work that way. But a lot of the documentation uses Java examples, which is really confusing.
 

  last day (20 days later) »