Отправить массив PHP в модуль JS, проблемы с импортом - PullRequest
2 голосов
/ 27 октября 2019

Я создаю веб-сайт для изучения PHP и Javascript / JQuery, у меня пока нет большого опыта, и я пытаюсь понять, какую структуру лучше реализовать

PHP создает массив строкя могу получить доступ к массиву из index.php через json_encode, затем я хочу отправить массив функции в классе, который находится в файле .mjs, проблема в том, что в файле index.php, с помощью script теги, я не могу импортировать модуль, и если я использую script type = "module" я могу использовать импорт, но я получаю эту ошибку:

Не удалось загрузить модульСценарий: сервер ответил не MIME-типом, отличным от JavaScript, "" в main.mjs :: 1

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

каталог сервера выглядит так:

  • index.php
  • js / main.mjs
  • js /index.mjs

Фрагменты кода:

index.php

    <head>
      <meta charset="utf-8">
      <title>Website</title>

      <link rel="stylesheet" type="text/css" href="style.css">
      <script src="js/jquery-3.4.1.slim.min.js"></script>
      <script src="js/main.mjs" type="module"></script>

      <script type="module">

        import {start_index} from "./js/main.mjs";
        initialize();

        function initialize()
        {
          var arr = <?php echo json_encode($images_arr); ?>;
          start_index(arr);
        }

      </script>

    </head>

main.mjs

    function start_index(arr)
    {
      import {gallery_manager} from './index.mjs';
      var gallery_mngr = new gallery_manager();
      gallery_mngr.initialize(arr);
    }

    export {start_index};

index.mjs

    class gallery_manager
    {
      constructor(){}

      var images = "";
      var placeholder = "../images/common/placeholder.png";

      public function initialize(arr)
      {
        images = arr;
        alert(images[0]);
      }

      function switchByTimer()
      {

      }

      function switchImage(new_image, direction)
      {

      }
    }

    export {gallery_manager};

Ответы [ 2 ]

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

Мне удалось исправить мой код, paulsm4 зажег искру в моем мозгу.

.mjs странно не работает, я понятия не имею, почему рекомендуется использовать это расширение для модулей javascript, так как оноуказано в справочнике MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

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

index.php

      <link rel="stylesheet" type="text/css" href="style.css">
      <script src="js/jquery-3.4.1.slim.min.js"></script>
      <script src="js/main.js" type="module"></script>

      <script type="module">

        import start_index from "./js/main.js";
        initialize();

        function initialize()
        {
          var arr = <?php echo json_encode($images_arr); ?>;
          start_index(arr);
        }

      </script>

main.js

    import gallery_manager from './index.js';

    function start_index(arr)
    {
      var gallery_mngr = new gallery_manager(arr);
      gallery_mngr.initialize();
    }

    export default start_index;

index.js

    class gallery_manager
    {
      constructor(images, placeholder)
      {
          this.images = images;
          this.placeholder = "../images/common/placeholder.png";
      }

      initialize()
      {
        alert(this.images[0]);
      }

      switchByTimer()
      {

      }

      switchImage(new_image, direction)
      {

      }
    }

    export default gallery_manager;
0 голосов
/ 27 октября 2019

ОСНОВНАЯ ПРОБЛЕМА:

Ваш веб-сервер не «понимает», что такое файл «mjs», поэтому он не отправляет соответствующий тип MIME в заголовке HTTP ответа.

ПРЕДЛОЖЕНИЕ: измените ".mjs" на "js" и посмотрите, поможет ли это. «mjs» ориентирован на NodeJS.

ВАЖНЫЕ ВОПРОСЫ:

В: Вы используете веб-сервер, верно?

В: Какой веб-сервер? Apache2 / Linux? IIS Express локальный ПК с Windows? Что-то другое?

СИЛЬНОЕ ПРЕДЛОЖЕНИЕ: ознакомьтесь с Chrome Developer Tools .

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