为什么我的函数中间容器未定义 - JS模块

Question

我使用Node测试了我的JS代码，并且导入关键字被标记。我已经阅读并观看了有关如何从其他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";

}

这是我的节点输出的图片：

我运行我的node命令如下：

节点page_structure.js

Answer 1

问题是你的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;

Answer 2

Npm run用于运行package.json中定义的命令。

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

您可以使用node page_structure.js运行脚本

Answer 3

你误解了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，它应该运行你的文件。

为什么我的函数中间容器未定义 - JS模块

问题描述投票：0回答：3

3个回答

最新问题

为什么我的函数中间容器未定义 - JS模块

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3