javascript 使 JS 本地函数全局可访问

Making JS local function globally accessible

提问by tarka

I have a function inside a function that I need to access 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'm trying to access autoSave() (that in return requires the stage var from the parent function). I understand why I can't access it, but Im struggling to see how I can alter the code to make it accessible.

我正在尝试访问 autoSave() （作为回报，它需要父函数的阶段变量）。我明白为什么我无法访问它，但我正在努力了解如何更改代码以使其可访问。

My first thought was simply to declare a 'higher scoped' var and assign the function to it. The problem is (as far as I can see) that this doesn't actually allow me to execute the autoSave() at the requested time.

我的第一个想法是简单地声明一个“更高范围”的 var 并将函数分配给它。问题是（据我所知）这实际上不允许我在请求的时间执行 autoSave()。

Apologies for the 'basic natur of this question, I'm new to JS and I think this is going to be fundamental!

为这个问题的“基本性质”道歉，我是 JS 新手，我认为这将是基本的！

回答by Grim

You can make your function globally accessible and still keep reference to variables in the scope in which it was created. Simply create and assign it in window scope - e.g. instead of defining it as:

您可以使您的函数全局可访问，并且仍然保留对创建它的范围内的变量的引用。只需在窗口范围内创建和分配它 - 例如，而不是将其定义为：

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

declare it as:

将其声明为：

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

you will now be able to call it anywhere (provided the initStage method has been called to declare it first, of course).

您现在可以在任何地方调用它（当然，前提是已经调用了 initStage 方法来声明它）。

回答by Will Hawker

You can assign the autoSave function to the this object, i.e.

您可以将 autoSave 功能分配给 this 对象，即

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

    return this;
}

Now you can call

现在你可以打电话

initStage().autoSave();

回答by pbaris

As you can see herethe autoSaveis called with no problem. I believe that the problem is in the rest of the code. You have });in the bottom of the script which doesn;t open anywhere

正如你在这里看到的autoSave，调用没有问题。我相信问题出在代码的其余部分。你});在脚本的底部没有打开任何地方

The code is as simple as possible

代码尽可能简单

window.onload = function() {
    initStage();
};

function initStage() {
    alert('a');

    function autoSave() {
        alert('b');
    }

    autoSave();
}

回答by Ajain Vivek

You Can Access Your local function as mentioned 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 Demo here : http://jsbin.com/efojom/1/edit

在此处查看演示：http: //jsbin.com/efjom/1/edit

回答by Torsten Walter

Generally I would suggest something like this: You can use your personal namespace to make functions and objects available.

通常我会建议这样的事情：您可以使用您的个人命名空间来使函数和对象可用。

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