Вложенные массивы javascript: доступ через границы модуля - PullRequest
0 голосов
/ 21 марта 2019

Буду признателен, если кто-нибудь предоставит рабочий пример вложенного массива, заполненного и доступного через границы модуля ES6, то есть с помощью методов установки и (особенно) методов получения, называемых из зависимого модуля .

Независимо от того, на каком шаблоне проектирования я основываю свои попытки, методы установки работают нормально, но методы получения вызывают через границы модуля s неизменно провоцируют следующее:

TypeError: nested_array[at_whatever_depth] is undefined

Я не убежден в загрязнении потенциально простых принципов сложными примерами, но вот примерно то, что я пытаюсь сделать ... Я был бы мега доволен чем-то более простым, что на самом деле работает ..

Ранее массив был заполнен в той же области видимости, что и код, который его использовал. Далее следовала попытка «модульности». Код просто готовит импортированный музыкальный шрифт («глифы») для отображения.

Этот конкретный пример восходит к более или менее тому, с чего я начал: подход к модулю состояний (Другие пытались? Несколько более продвинутый модуль корзины и раскрытия, и много вариантов на нем ..).

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. Возможно, я лаю на мертвое дерево?

Ответы [ 2 ]

1 голос
/ 21 марта 2019

Я думаю, что вы путаете массив и объекты.Массивы представляют собой последовательные списки, где индекс каждой ячейки является целым числом.Ваш код помещает glyph_name и unicode в массив состояний, который помещает его в следующий элемент массива, но затем вы ссылаетесь на массив, используя glyph_name и unicode в качестве индекса.Я думаю, что вы хотите использовать объекты вместо массивов.Измените строки:

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

на

pub.state = {};
pub.state[glyph_name] = {};
pub.state[unicode] = {};
0 голосов
/ 23 марта 2019

Несмотря на неправильность, я оставляю этот ответ на месте, чтобы проиллюстрировать, что (как указал @Bergi в комментариях) квалифицируется как «злоупотребление массивом».


Постоянно тревожная вещь здесь былачто оригинальный код работал нормально.Это сломалось только при интеграции в Webpack.Это говорит о том, что структурно все может быть более или менее нормально, но в более ранней реализации, вероятно, были связанные проблемы.

После небольшого эксперимента я обнаружил, что могу успешно получить значения массива по модулюграницы , заключив glyph_name в круглые скобки.Например:

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

НО 1) Я не совсем понимаю, что происходит, и 2) это выглядит хрупким ..

Фактический (внешний, зависимый модуль) вызов останетсякак в первоначальном вопросе.

-> Непосредственная проблема решена, но только путем злоупотребления массивами ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...