Question

我使用Node测试了我的JS代码，并且标记了 import 关键字。我已阅读并观看了有关如何从其他JS文件导入vars等的视频。

我相信我的语法是正确的，但是我不明白为什么它不能正常工作。

这是我的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

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

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

您可以使用node page_structure.js

运行脚本

Answer 2

您误解了npm和npm run的工作方式。 package.json不是您在任何地方编写的代码所使用的文件，NPM使用它来管理/运行项目。在此处阅读更多信息：here

如果您运行命令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，该命令将运行您的文件。

Answer 3

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

为什么我的函数middleContainer未定义-JS模块

3 个答案: