我使用 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 输出的图片:
我按如下方式运行 Node 命令:
node page_structure.js
最佳答案
npm run 用于运行 package.json 中定义的命令。
https://docs.npmjs.com/cli/run-script
您可以使用node page_struct.js运行脚本
关于javascript - 为什么我的函数中间容器未定义 - JS 模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55346663/