导入函数的正确方法

Question

在学习了一些关于 javascript 承诺及其行为方式的非常有用的提示之后，我正在寻求一些帮助，帮助我将函数从一个 javascript 文件正确导入/导出到另一个通过 NodeJS 运行的文件中。

基本上我希望 basicNode.js 打开一个 html 文档，然后一旦打开（并且通过 open(html) 语句暗示的承诺是 100% 完成/最终确定）运行 change.js 中的函数以更改html 以显示“Hello”代替“Welcome to JavaScript”。这将提供概念证明，然后可以在我的实习期间为处理自动化报告的项目进行推断，因此非常感谢任何帮助

basic.html

<!DOCTYPE html>
<html>  
<head>  
</head>  
<body>
<p>Date/Time: <span id="datetime"></span></p>
  
<p id="here">Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="changeThis()"/>  
</form>  
</body> 
<script>
var dt = new Date();
    document.getElementById("datetime").innerHTML = dt.toLocaleString();
</script>
<script type="text/javascript" src="change.js"></script> 
<!--
<script>waitForElementToDisplay("#here",function(){alert("Hi");},1000,9000);</script> 
--> 
</html> 

更改.js

function changeThis() {
    document.getElementById("here").innerHTML = "Hello";
}

module.exports={changeThis};

basicNode.js

const open = require('open');
var { change }  = require('./change')
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
global.document = new JSDOM('./basic.html').window.document;

const main = async () => {
  await open('./basic.html');
  change.changeThis();
}

main();

编辑：经过一番修改，这就是我完成任务的方式：在 change.js 中，我设置了以下内容：

const fs = require('fs');
const html = fs.readFileSync('./basic.html');
const dom = new JSDOM(html);

function changeThis() {
console.log("called changeThis() function, should alter the html")
var x = dom.window.document.getElementById('here').textContent;
console.log(x);
dom.window.document.getElementById('here').innerHTML = 'Hello'
var x = dom.window.document.getElementById('here').textContent;
console.log(x);
}

module.exports.changeThis = changeThis

然后，在我的 basicNode.js 文件中调用/导入这个函数：

var change = require('./change');

change.changeThis();

Answer 1

在您的change.js-文件中，您将函数导出为命名导出。如果您只从文件中导出一个函数（这不是规则），通常使用命名导出，而命名导出主要用于从文件中导出多个函数时。

这是一个命名导出

module.exports= { changeThis };

一个命名的导出被导入为

var { changeThis }  = require('./change')

与命名导出相反的是默认导出。

module.exports = changeThis

这是导入为

var changeThis = require("./change")

---

编辑： 如果您想要读取文件，修改 DOM，然后再次将其写入文件，那么您可以这样做。

const jsdom = require('jsdom');
const { JSDOM } = jsdom;

// Read the file from the system
const fs = require('fs');
const html = fs.readFileSync('./basic.html');

// Create a jsdom and modify the file
const dom = new JSDOM(html);
dom.window.document.getElementById('here').innerHTML = 'Hello';

// write the file to disc
fs.writeFileSync(
    './basicUpdated.html',
    dom.window.document.documentElement.outerHTML
);