Question

我在函数中有一个函数需要直接访问。

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

    });

}

我正在尝试访问autoSave（）（反过来需要来自父函数的stage var）。我理解为什么我无法访问它，但我很难看到如何改变代码以使其可访问。

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

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

Answer 1

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

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

将其声明为：

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

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

Answer 2

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

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

    return this;
}

现在你可以打电话了

initStage().autoSave();

Answer 3

正如您所看到的here autoSave被调用没有问题。我相信问题出在其余的代码中。脚本底部有});，不在任何地方打开

代码尽可能简单

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

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

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

    autoSave();
}

Answer 4

您可以访问本地功能，如下所述

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

在这里查看演示：http://jsbin.com/efojom/1/edit

Answer 5

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

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

使JS本地功能可全局访问

5 个答案: