javascript 在html文件中使用import语句处理JS类？

oyxsuwqo 于 2023-11-15 发布在 Java

关注(0)|答案(2)|浏览(194)

我有三个档案。

Connections.js
Main.html.
ScriptFile.js
我在这里只复制了一小部分代码。
Connection.js有一个类

import {net} from 'net';
export class connect {
Testfunction() {return "something"}
}

字符串
main.html有一个函数

<html> 
<head>
        <script src= 'Connections.js'></script>
        <script src= 'ScriptFile.js'></script> 
</head>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p> 
</body>
</html>

型
ScriptFile.js

import { connect } from "./Connections.js";
const ObjConnect = new connect()
function myFunction() {
    document.getElementById("demo").innerHTML = ObjConnect.Testfunction();

  }

型
我如何使“文本”在我的html文件中更改为“东西”当我点击它？

JavaScript

来源：https://stackoverflow.com/questions/71948612/handle-js-classes-with-import-statements-in-html-file

2条答案

按热度按时间

sg3maiej1#

首先，您在文件名处有一个拼写错误。它是Connection，而不是main.js中的Connections

案例1.使用模块

main.html

<html>
  <head>
    <script type="module" src="Connection.js"></script>
    <script type="module" src="ScriptFile.js"></script>
  </head>
  <body>
    <p id="demo">Click me to change my text color.</p>
  </body>
</html>

字符串

ScriptFile.js

import { connect } from './Connection.js';

const ObjConnect = new connect();
function myFunction() {
  document.getElementById('demo').innerHTML = ObjConnect.Testfunction();
}

document.getElementById('demo').addEventListener('click', myFunction);

型

Case2.使用脚本

main.html

<html>
  <head>
    <script src="Connection.js"></script>
    <script src="ScriptFile.js"></script>
  </head>
  <body>
    <p id="demo" onclick="myFunction()">Click me to change my text color.</p>
  </body>
</html>

型

Connection.js

class connect {
  Testfunction() {
    return 'something';
  }
}

型

ScripFile.js

const ObjConnect = new connect();
function myFunction() {
  document.getElementById('demo').innerHTML = ObjConnect.Testfunction();
}

型

赞(0）回复(0）举报 2023-11-15

bmp9r5qi2#

我也有同样的问题，关于如何在HTML文件中使用模块（导出/导入），我发现它的工作原理是这样的：
我的JavaScript模块：

class jsGrid {
   #baseElem = ''
   #dataURL = ''
   
   constructor(elemId, url) {
      this.#baseElem = document.getElementById(elemId)
      this.#dataURL = url
      console.log(this.#dataURL)
   }

}

export { jsGrid }

字符串
请注意导出项目的大括号。
然后，在我的HTML文件中添加了一个script标记，然后关闭body标记：

<script type="module">
         import { jsGrid } from './jsGrid.js'
         let dataURL = 'https://random-data-api.com/api/v2/beers?size=25'
        
         let grid = new jsGrid('.jsGrid', dataURL)
      </script>
   </body>

型
请注意，这里使用了type属性来指定module。
愿这能帮助别人。

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 在html文件中使用import语句处理JS类？

2条答案

相关问题

热门标签

最新问答