динамически обновлять атрибуты href / src из манифеста json - PullRequest
Новая
       30

динамически обновлять атрибуты href / src из манифеста json

0 голосов
/ 25 октября 2019

Я динамически обновляю атрибуты html src / href после чтения файла manifest.json.

Но я вполне уверен, что способ, которым я это делаю, не соответствует передовым методам. Я не могу найти что-либо по этому вопросу.

Каков идеальный способ чтения моего manifest.json с целью обновления ссылок в моем html?

Что я делаю: 

  <link id="maincss" rel="stylesheet">
</head>
<body>
  <script id="mainscript"></script>
  <script>
    function readTextFile(file, callback) {
        var rawFile = new XMLHttpRequest();
        rawFile.overrideMimeType("application/json");
        rawFile.open("GET", file, true);
        rawFile.onreadystatechange = function() {
            if (rawFile.readyState === 4 && rawFile.status == "200") {
                callback(rawFile.responseText);
            }
        }
        rawFile.send(null);
    }

    readTextFile("/dist/manifest.json", function(text){
        var data = JSON.parse(text);
        document.getElementById('mainscript').setAttribute('src', '/dist/'+data.main[1]);
        document.getElementById('maincss').setAttribute('href', '/dist/'+data.main[0]);
    });
  </script>

Как видите, после прочтения файла я устанавливаю атрибут src для javascript и атрибут href для css.

Мой manifest.json: 

{"main":["mycss.798d79ab87daa2i3df123.css","main.f8aaae15e396b637e82e.js"]}

1 Ответ

0 голосов
/ 25 октября 2019

Похоже, вы пытаетесь экстернализовать свои JavaScript и CSS, чтобы вы могли изменить их вне своего приложения без необходимости повторного развертывания (или чего-то в этом роде).

Я бы сказал, что естьболее чистые решения для этого варианта использования, но, учитывая ваши настройки, я бы просто немного его очистил и сделал его немного более гибким.

Первое, что я бы исправил, это:

<link id="maincss" rel="stylesheet"> document.getElementById('maincss').setAttribute('href', '/dist/'+data.main[0]);

Возможно, это не проблема, но на самом деле это просто блокировка одного файла CSS. Что если вам нужно добавить еще один файл? или, может быть, это другой тип файла (например, стиль шрифта).

С учетом вышесказанного я бы полностью исключил элементы-заполнители. Очевидно, что способ, которым вы ссылаетесь на заполнители (mainscript, maincss), также будет исключен.

Для начала я бы реорганизовал ваш файл json, чтобы сделать его более масштабируемым, тогда я бы по существу создал "мини-загрузчик модулей "

Вот что я хотел бы сделать: 

// Fake HTTP Get that returns your manifest file
const fakeGetRequest = () => {
  return [{
      "type": "link",
      "src": "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
    },
    {
      "type": "script",
      "src": "https://code.jquery.com/jquery-3.3.1.slim.min.js"
    }
  ];
}

// Helper function to centralize the creation of the reference tag
const createRef = (src, type) => {
  switch (type) {
    case 'script':
      const script = document.createElement('script');
      script.src = src;
      return script;
    case 'link':
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = src;
      return link;
  }
  return null;
}

// Your manifest.json
const manifest = fakeGetRequest();

// Iterate over your manifest and append things where you want them
manifest.forEach(item => {
  const ref = createRef(item.src, item.type);
  switch (item.type) {
    case 'link':
      document.head.appendChild(ref);
      break;
    case 'script':
      document.body.appendChild(ref);
      break;
  }
});

Это позволило бы добавить столько ссылок на скрипты / CSS, сколько вы хотите, и ваш код будет знать, как добавлять их всегда, независимо от того, сколько вы хотите добавить. Поскольку ваш файл манифеста теперь настраивается, и у вас есть код на вашей странице, который знает, как перевести его во что-то осмысленное, поддерживая разные типы файлов, такие как изображения или что-либо еще, что вы хотели бы добавить, было бы вопросом добавления этого типа в ваш код, чтобыон знает, что с ним делать.

У меня есть только два свойства в манифесте (src и type), но реально вам, вероятно, понадобится что-то вроде порядка (возможно, есть зависимость, котораясначала нужно ссылаться), другое свойство, если вы хотите, чтобы оно было добавлено к head или body и т. д.

Долгий путь сказать, что я думаю, что у вас все в порядке,Там действительно не так много, чтобы улучшить там. Единственное, что вы могли бы значительно улучшить - это масштабируемость (при необходимости).

...