Question

如果有人可以提供一个嵌套数组的工作示例，可以跨ES6模块边界进行填充，并且可以通过ES6模块边界进行访问，我将不胜感激，也就是说，可以使用setter和（尤其是）从属模块中称为的getter方法。

无论我以哪种设计模式为基础，setter方法都可以正常工作，但是getter方法在整个模块边界上调用总是会引发以下情况：

TypeError: nested_array[at_whatever_depth] is undefined

我不相信使用复杂的示例来污染潜在的简单原理，但这只是我要尝试做的事情。.我会大量使用实际上更容易实现的东西（strongstrong）。

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

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

var music_glyphs_store = (function () {

  var pub = {};

  pub.state = [],

  pub.setGlyphByName = function (glyph_name, horiz_adv_x, path) {
    pub.state.push(glyph_name);
    pub.state[glyph_name] = [];
    pub.state[glyph_name]["glyph_name"] = glyph_name;
    pub.state[glyph_name]["horiz-adv-x"] = horiz_adv_x;
    pub.state[glyph_name]["d"] = path;
  },

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

  return pub; // expose externally
})();

export { music_glyphs_store };

有问题的调用是对music_glyphs_store.getGlyphByName（）及其变体的调用。我知道我要检索的字形存储在数组中：依赖模块根本无法访问它们。

这是典型的字体元素在原始，原始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" />

以下是呼叫的设置方式：

import { music_glyphs_store } from "./music_glyphs_store.js";
import * as d3 from "d3";

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

d3.selectAll(note_glyphs.getElementsByTagName("glyph")).each(function(d, i) {

    var glyph_name = this.getAttribute("glyph-name");
    var horiz_adv_x = this.getAttribute("horiz-adv-x");
    var path = this.getAttribute("d");

    music_glyphs_store.setGlyphByName(glyph_name, horiz_adv_x, path);
});

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

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

遵照ES6模块约定，我后来尝试消除重复的（“多余的”）状态模块包装器（目标：更好地有选择地公开内部变量和函数），但无济于事。在窗口（全局）范围内声明数组根变量也没有任何改善。

所有这些的动机是使用模块的导出/导入方法将现有代码（带有常规的html包含项）迁移到Webpack，从而也利用了node.js的优势。在破坏许多以前可以工作的代码的同时，我对长期收益感到乐观。

问题似乎在于动态分配的内存的可见性/范围。我开始怀疑嵌套数组是否可以在各种Webpack上下文中使用。我也许正在吠叫一棵枯树吗？

Answer 1

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

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

到

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

Answer 2

尽管不正确，但我保留了此答案以说明什么（如@Bergi在评论中指出的）符合“数组滥用”的条件。

这里始终令人不安的是，原始代码运行良好。它仅在与Webpack集成时中断。从结构上讲，这也许可以解决问题，但是在较早的实施中，可能存在相关的问题。

通过一个小实验，我发现可以通过将10:21 Gradle sync started 10:21 Project setup started 10:21 Gradle sync finished in 2 s 333 ms (from cached state) 10:21 Gradle sync failed: setup project failed: com/android/tools/idea/run/activity/StartActivityFlagsProvider (2 s 561 ms)括在圆括号中来成功地跨模块边界检索数组值。例如：

glyph_name

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

实际（外部，从属模块）调用将与原始问题中的一样。

->解决了直接的问题，但是仅通过滥用阵列即可。

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

2 个答案: