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

Question

我用 Node 测试了我的 JS 代码，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";

}

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

我运行我的节点命令如下：

node page_structure.js

Answer 1

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

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

您可以运行您的脚本 node page_structure.js

Answer 2

您误解了 npm 和 npm run 的工作原理。 package.json 不是您在任何地方编写的代码使用的文件，它被 NPM 用于 manage/run 项目。在这里阅读更多：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 应该运行您的文件。

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 事件侦听器添加到您的模块。相反，您可以删除 <body> 标记上的 onload 属性并按如下方式定义 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;

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

Why my function middleContainer is undefine - JS modules

html

javascript

file-not-found

node.js

web