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

Question

这对我来说有点陌生，我可能没有正确理解它。这是我的：

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

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

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

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

Answer 1

您不访问 imgModule.imgLocations，因为您 return 是 imgLocations，您应该访问它们：

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

Answer 2

这不起作用的原因是因为您的 imgModule 正在 returning imgLocations 对象。既然如此，imgModule 实际上就是 imgLocations 对象。所以你会像这样访问你的方法：

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

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

return {
    imgLocations: imgLocations
}

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

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

Answer 3

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

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

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

你需要做的是return像这样

return {
    imgLocations: imgLocations
}

如果您想要 API 您正在参加创建并且仍然可以访问您当前无法访问的数组。

Answer 4

看来你在尝试写模块模式。为了深入理解，我推荐你阅读以下文章： The Module Pattern, by Addy Osmani

并注意计数器示例：

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();

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

Javascript accessing object and array defined in modular function

javascript

scope