嵌套javascript数组：跨模块边界访问

如果有人能提供一个跨ES6模块边界填充和访问的嵌套数组的工作示例，我将不胜感激，也就是说，使用从依赖模块调用的setter和（特别是）getter方法

无论我的尝试基于哪种设计模式，setter方法都可以很好地工作，但是跨模块边界调用的getter方法总是会引发以下问题：

TypeError: nested_array[at_whatever_depth] is undefined

我不相信用复杂的例子来污染潜在的简单原则，但这里是我试图做的。。我会非常满足于一些更简单的东西，实际上是有效的

以前，数组填充在与使用它的代码相同的范围内。接下来是一次“模块化”的尝试。代码只是准备一个导入的音乐字体（“glyphs”）进行显示

这个特殊的例子或多或少可以追溯到我开始的地方：状态模块方法。（其他人尝试了？稍微高级一点的篮子和展示模块，以及许多变化…）

有问题的调用是music\u glyphs\u store.getGlyphByName（）及其变体。我知道我试图检索的glyph存储在数组中：依赖模块根本无法访问它们

下面是原始svg文件中典型字体元素的外观

<glyph glyph-name="scripts.sforzato" unicode="&#xe100;" horiz-adv-x="219"
d="M-206.864 126.238c-8.498 -2.679 -12.964 -10.131 -12.964 -17.821c0 -6.455 3.146 -13.0777 9.696 -17.1846c1.8 -1.1369 -9.04799 1.8 139.074 -37.9895l103.026 -27.7105l71.6682 -19.279c12.269 -3.31579 22.358 -6.11053 22.358 -6.25263
c0 -0.142105 -10.089 -2.93684 -22.358 -6.25264l-71.6682 -19.2789l-103.026 -27.7105c-154.231 -41.4474 -137.132 -36.7106 -140.4 -38.8895c-5.625 -3.7263 -8.44299 -9.80721 -8.44299 -15.8892c0 -6.056 2.795 -12.113 8.396 -15.848
c3.147 -2.07201 6.077 -3.08401 9.87399 -3.08401c3.061 0 6.685 0.658005 11.442 1.94801l161.053 43.2942c228.488 61.4133 240.486 64.527 240.486 65.2851c0 0.0888996 -0.164993 0.1455 -0.164993 0.26c0 0.0702 0.0619965 0.1623 0.263 0.297099
c5.63699 3.7421 8.45499 9.80522 8.45499 15.8684c0 6.06316 -2.81799 12.1263 -8.45499 15.8684c-3.17401 2.0842 2.27299 0.521 -46.137 13.5474l-194.447 52.2947l-161.053 43.2947c-4.795 1.316 -8.506 1.94601 -11.581 1.94601
c-1.907 0 -3.57001 -0.243004 -5.093 -0.714005z" />

然后（在某个时候，从文件中加载并解析原始xml字符串）：

无论目的是什么，其思想是，存储的值稍后可以通过调用上述方法来恢复。例如：

console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("brace446"));
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("accidentals.natural.arrowdown"));
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("noteheads.s2slash"));

pub.getGlyphByName = function(glyph_name) {
  return pub.state[(glyph_name)];
},

与ES6模块约定不同，我后来尝试消除重复的（“超级”）状态模块包装器（目标：更好地选择性地暴露内部变量和函数），但没有效果。在窗口（全局）范围声明数组根变量也不会带来任何改进

所有这一切的动机都是将现有代码（包含传统html）迁移到Webpack，使用其模块导出/导入方法，从而也利用了node.js的优势。虽然打破了许多以前的工作代码，但我对长期的好处持乐观态度

---

问题似乎在于动态分配内存的可见性/范围。我开始怀疑嵌套数组是否可以在不同的网页环境中使用。我是不是在剥一棵枯树的皮？

我想你把数组和对象搞混了。数组是顺序列表，其中每个单元格的索引为整数。您的代码将glyph_name和unicode推送到状态数组中，状态数组将其放置在数组的下一个元素中，但随后您将使用glyph_name和unicode作为索引引用数组。我认为您希望使用对象而不是数组。更改行：

pub.state = [];
pub.state[glyph_name] = [];
pub.state[unicode] = [];

到

---

虽然不正确，但我留下这个答案是为了说明什么是“数组滥用”（正如@Bergi在评论中指出的）

---

这里一直令人不安的是，原始代码工作得很好。它只是在集成到Webpack时中断。这表明，在结构上，事情可能或多或少是好的，但在早期的实现中，可能存在相关的问题

通过一个小实验，我发现通过将

glyph_name

括在圆括号中，我可以成功地跨模块边界检索数组值。例如：

console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("brace446"));
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("accidentals.natural.arrowdown"));
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("noteheads.s2slash"));

pub.getGlyphByName = function(glyph_name) {
  return pub.state[(glyph_name)];
},

但是1）我不完全明白发生了什么，2）它看起来很脆弱

实际（外部、相关模块）调用将保持原始问题中的状态

---

-->立即解决的问题，但只能通过滥用数组来解决。

数组通常没有“setter”或“getter”方法。如果没有看到所涉及的代码，我怀疑任何人都不会解决这个问题。setter+getter包装函数。如果我发布代码，这将只是许多失败尝试中的一个。在可能的情况下，我更喜欢看一个经过验证的例子，甚至不清楚“嵌套数组”是什么意思；如果导出对任何类型对象的引用，则导入模块可以访问整个对象图。当您需要对象时，请发布导入模块的代码，并使用

music\u glyphs\u store

对象，以便我们了解哪些不起作用。“用于建立数组键的unicode值会自动转换为某种形式的文本值”-是的，所有属性名称都是字符串，任何值都强制为一个。“如果unicode值用圆括号括起来，在检索过程中也会发生类似的情况”-否。括号在功能上完全没有改变。（如果他们这样做了，那就是你正在使用的引擎或工具链中的一个bug）。@Bergi-你是对的。如果使用unicodes，则括号无效。但是，使用glyph_name（带括号），调用可以跨模块边界工作。这是一个改进，即使我不太明白为什么。为了清晰（最小/完整/可验证），我认为我需要删除几乎所有对Unicode的引用。这可能会使某些注释无效。这些注释仍然有效。鉴于您没有提供任何调用方法的示例，我不知道您所说的“glyphs”或“unicodes”是什么意思。我怀疑在原始实现中使用unicode值的原因是，这是识别/引用音乐glyphs（符号）的“标准”方式。我强烈怀疑字形名称在不同的音乐字体实现中可能会有所不同。从长远来看，这被证明是正确的（我的代码组合比原始问题中显示的要复杂一些，我在针对您的建议的测试中犯了一个错误）。

pub.state = {};
pub.state[glyph_name] = {};
pub.state[unicode] = {};

pub.getGlyphByName = function(glyph_name) {
  return pub.state[(glyph_name)];
},