Почему моя функция middleContainer не определена - модули JS - PullRequest
Новая
       49

Почему моя функция middleContainer не определена - модули JS

0 голосов
/ 26 марта 2019

Я проверил свой код JS с помощью Node, и ключевое слово import помечено. Я читал и смотрю видео о том, как импортировать переменные и т. Д. Из других файлов JS.

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

Вот мой HTML-код: 

<!DOCTYPE html>

<html>

    <head>
        <title>JAPC</title>

        <meta charset="utf-8"/>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="./CSS/page_structure.css">
        <link rel="stylesheet" type="text/css" href="./CSS/navstack_structure.css">
        <link rel="stylesheet" type="text/css" href="./CSS/jpdc_structure.css">
        <link rel="icon" href="./Images/Page_Imgs/favicon-16x16.png">

        <!-- JS -->
        <script type="module" src="./JS/page_structure.js"> </script>

    </head>

    <body onload="middleContainer()">
        <div> <!--DIV 1-->
            <div id="top_container">
                <!--DIV 1.1 | Header-->
                <h1>Header</h1>
            </div>
            <!-- --------------------- -->
            <div id="middle_container">
                <!--DIV 1.2 | Body-->
            </div>
            <!-- --------------------- -->
            <div id="bottom_container">
                <h1>Footer</h1>
            </div>
        </div>
    </body>
</html>

Вот мой код JS: 

/*
    Page Structure
*/
import { top_container_config, middle_container_config, bottom_container_config} from './page_structure_config.js';

//------------------------------------------------------------------------------

function createDOMelement(element_, attributues_){
  var elem_ = document.createElement(element_);
  var k;
    for (k in attributues_){
      elem_.setAttribute(k,attributues_[k]);
  }
  return elem_;
}

//------------------------------------------------------------------------------
function topConainter(){
  var _container = "top_container";

}

//------------------------------------------------------------------------------

function middleContainer(){
  var _container_ID = "middle_container";
  var _columns = [];
  var _navVar;
  var _nv_items =[];

  //Columns
  for(var col = 0; col < middle_container_config.mc_columns.num; col++){
    _columns.push(createDOMelement("div",middle_container_config.mc_columns._DOM_));
  }

  //My Nav Var
  _navVar =  createDOMelement("div", middle_container_config.nav_stack._DOM_);

  //Inside my Nav Var
  for(var nv_i = 0; nv_i < middle_container_config.nav_stack_items.num; nv_i++){
    _nv_items.push(createDOMelement("div",middle_container_config.nav_stack_items._DOM_));
  }


  //JOIN ALL ELEMENT  - Inside OUt
  for (var a =0; a<_nv_items.length; a++){
    _navVar.appendChild(_nv_items[a]);
  }

  //Append NavVar to first column of the middle_container
  _columns[0].appendChild(_navVar);

  //add to DOM
  for(var b=0; b<_columns.length; b++){
    document.getElementById(_container_ID).appendChild(_columns[b]);
  }

  console.log(document.getElementById(_container_ID));

}

//------------------------------------------------------------------------------

function bottomContainer(){
  var _container = "bottom_container";

}

Вот картинка с вывода моего узла:

Я запускаю команду узла следующим образом:

узел page_structure.js

enter image description here

Ответы [ 3 ]

5 голосов
/ 26 марта 2019

Npm run используется для запуска команды, определенной в package.json.

https://docs.npmjs.com/cli/run-script

Вы можете запустить свой скрипт с помощью node page_structure.js

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

Проблема в том, что ваш onload слушатель не знает о функции middleContainer, потому что middleContainer не определен в глобальной области видимости.

Один из вариантов - просто определить функцию в глобальной области видимости. 

// in page_structure.js
// middleContainer defined on module scope
function middleContainer(){
  var _container_ID = "middle_container";
  ...
}
// middleContainer defined global scope
window.middleContainer = middleContainer;

Тогда <body onload="middleContainer()"> больше не должен жаловаться на неопределенность middleContainer и должен запускать функцию middleContainer.

Другой вариант - добавить прослушиватель событий onload в ваш модуль. Вместо этого вы можете удалить атрибут onload в теге <body> и определить событие onload следующим образом 

// in page_structure.js
function middleContainer(){
  var _container_ID = "middle_container";
  ...
}
// define the listener with your module scoped function to a global event listener
window.onload = middleContainer;
1 голос
/ 26 марта 2019

Вы неправильно понимаете, как работают npm и npm run. package.json - это не файл, который используется кодом, который вы написали где-либо, он используется NPM для управления / запуска проектов. Подробнее здесь: https://docs.npmjs.com/files/package.json

Если вы выполните команду npm init, для вас будет создан файл package.json. Затем вы можете добавить скрипт запуска, чтобы он выглядел примерно так: 

{
     "name" : "Some Name",
     "version" : "1.0.0",
     "scripts": {
         "start": "node page_structure.js",
         "other script": "some other bash command"
     }
}


Теперь есть package.json с определенным скриптом «start». npm run start теперь выполнит команду node page_structure.js, которая должна запустить ваш файл.

...