Javascript访问模块化函数中定义的对象和数组

This is a bit foreign to me and I'm probably not understanding it correctly. This is what I have:

这对我来说有点陌生,我可能没有正确理解它。这就是我所拥有的:

var imgModule = (function() {
    var imgLocations = {};
    var images = [];
    imgLocations.setImage = function(img, location) {
        imgLocations[img] = location;
    }
    imgLocations.getImg = function(img) {
        return imgLocations[img];
    }
    imgLocations.setImageArray = function(img) {
        images.push(img);
    }
    imgLocations.getImageArray = function() {
        return images;
    }
    return imgLocations;
}());

I want to be able to access the imgLocations Object and images array from outside this function. The setting functions work, but

我希望能够从此函数外部访问imgLocations对象和图像数组。设置功能有效,但是

document.getElementById("but").onclick = function() {
    console.log(imgModule.imgLocations.getImageArray());
    console.log(imgModule.imgLocations.getImg(imgName));
}

Both return "undefined". How do I access these variables? And how can I improve this function? Please be patient with me and explain what I'm doing wrong :) I'm trying to learn it the right way instead of defining a global variable outside all functions.

两者都返回“未定义”。我如何访问这些变量?我该如何改进这个功能?请耐心等待我并解释我做错了什么:)我正在尝试以正确的方式学习它,而不是在所有函数之外定义一个全局变量。

4 个解决方案

#1

The reason why this isn't working, is because your imgModule is returning the imgLocations object. That being the case, imgModule will actually be the imgLocations object. So you would access your methods like so:

这不起作用的原因是因为你的imgModule正在返回imgLocations对象。既然如此,imgModule实际上将是imgLocations对象。所以你会像这样访问你的方法:

imgModule.setImage()
imgModule.getImg()
imgModule.getImageArray()
imgModule.setImageArray()

And as @gillesc stated. If you are wanting to keep the current syntax of imgModule.imgLocations.getImg() then you could return the imgLocations like so

正如@gillesc所说。如果你想保留imgModule.imgLocations.getImg()的当前语法,那么你可以像这样返回imgLocations

return {
    imgLocations: imgLocations
}

doing so would allow you to add more functionality to your module

这样做可以让您为模块添加更多功能

return {
    imgLocations: imgLocations,
    otherObject: otherObject
}
...
imgModule.otherObject.someFunctionCall();

#2

The problem is you are returning the object created and are not setting it as a property of an object.

问题是您正在返回创建的对象,而不是将其设置为对象的属性。

So in your case this is how it would work.

所以在你的情况下,这是它的工作方式。

document.getElementById("but").onclick = function() {
    console.log(imgModule.getImageArray());
    console.log(imgModule.getImg(imgName));
}

What you need to do is return it like this

你需要做的就是这样回来

return {
    imgLocations: imgLocations
}

If you want the API you are attending to create and still have access to the array which you can not do currently.

如果您想要创建的API,并且仍然可以访问当前无法执行的数组。

#3

You don't access imgModule.imgLocations, since what you return is imgLocations, you should access them as:

你不能访问imgModule.imgLocations,因为你返回的是imgLocations,你应该访问它们:

document.getElementById("but").onclick = function() {
    console.log(imgModule.getImageArray());
    console.log(imgModule.getImg(imgName));
}

#4

It seems you try to write module pattern. For deep understanding, I recommend you following article: The Module Pattern, by Addy Osmani

看来你试着编写模块模式。为了深入理解,我建议您阅读以下文章:模块模式,由Addy Osmani撰写

and pay attention to example with counter:

并注意计数器的例子:

var testModule = (function () {

  var counter = 0;

  return {

    incrementCounter: function () {
      return counter++;
    },

    resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
    }
  };

})();

// Usage:

// Increment our counter
testModule.incrementCounter();

// Check the counter value and reset
// Outputs: counter value prior to reset: 1
testModule.resetCounter();

#1