Geek Answers Handbook

Creating a local JS function worldwide

I have a function inside a function that I need to handle directly.

//############################################################# //# Global vars //############################################################# var canvasWidth = 585; var canvasHeight = 780; //############################################################# //# Init the canvas //############################################################# window.onload = function() { initStage(); }; //############################################################# //# Init the main stage //############################################################# function initStage() { //************************************************************* //* Create a stage to work with //************************************************************* var stage = new Kinetic.Stage({ container: "container", width: canvasWidth, height: canvasHeight }); var layerOne = new Kinetic.Layer(); var imageObj = new Image(); //************************************************************* //* Load the image into a layer on the stage //************************************************************* ... Some Code ... //************************************************************* //* Set the hidden field value to the canvas dataURL //************************************************************* function autoSave(){ stage.toDataURL({ callback: function(dataUrl){ document.getElementById("mapping-form:hiddenDataURL").value = dataUrl; console.log("Auto Save excecuted"); }, mimeType: 'image/jpeg', quality: 1.0 }); } //************************************************************* //* Function called to add text to the stage //************************************************************* ... Some Code ... layerTwo.add(txt); stage.add(layerTwo); }); }

I am trying to access autosave () (which requires the var step from the parent function). I understand why I can't access it, but I'm struggling to figure out how I can change the code to make it available.

My first thought was to simply declare a var "extended scope" and assign a function to it. The problem (as far as I can see) is that this actually does not allow me to execute autoSave () at the specified time.

I apologize for the "core point of this question, I am new to JS, and I think it will be fundamental!

+4
source share
5 answers

You can make your function globally accessible and still refer to variables in the scope in which it was created. Just create and assign it in the window area - for example. instead of defining it as:

 function autoSave() { // ... code ... }

declare it as:

 window.autoSave = function() { // .... code .... }

you can now call it anywhere (provided that the initStage method has been called to declare it first).

+8
source

You can assign an autosave function to this object, i.e.

 function initStage() { ... Some Code ... this.autoSave = function(){ ... Some Code ... } return this; }

Now you can call

 initStage().autoSave();
+4
source

As you can see here autoSave is called without problems. I believe the problem is with the rest of the code. Do you have }); at the bottom of a script that doesn't open anywhere

Code as simple as possible

 window.onload = function() { initStage(); }; function initStage() { alert('a'); function autoSave() { alert('b'); } autoSave(); }
0
source

You can access your local function as below

 var myFunc = function () { //Local Scope this.scopeLocal = function () { alert("yipee!!! You Can Call Me"); } } var myfunc = new myFunc();//Create a Object window.onload = function () { myfunc.scopeLocal(); // Call it Globally };

Check out the Demo: http://jsbin.com/efojom/1/edit

0
source

In general, I would suggest something like this: You can use your personal namespace to create accessible functions and objects.

 // make a scope wrapper to keep vars local (function () { // your module vars available within this scope var canvasWidth = 585; var canvasHeight = 780; // create a namespace var myspace = { stage: new Kinetic.Stage({ container: "container", width: canvasWidth, height: canvasHeight }, autoSave: function () { this.stage.toDataURL({ callback: function(dataUrl){ document.getElementById("mapping-form:hiddenDataURL").value = dataUrl; console.log("Auto Save excecuted"); }, mimeType: 'image/jpeg', quality: 1.0 }); } }; var layerOne = new Kinetic.Layer(); var imageObj = new Image(); layerTwo.add(txt); myspace.stage.add(layerTwo); // finally export to global namespace only what you really need window["myspace"] = myspace; }); // then from anywhere, just call this myspace.autosave(); myspace.stage;
0
source

More articles:


All Articles