当前位置: 首页 > news >正文

web:js的模块导出/导入

一般web页面中,html文件通过标签script引用js文件。但是js文件之间的引用要通过import/exprot进行导入/导出,同时还要在html文件中对js文件的引用使用type属性标注。

在下面的例子中,

html页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title>
</head><body><form><input id="username" name="username" type="text"><input id="age" name="age" type="text"><input id="b1" type="submit" value="提交"><input id="b2" type="button" value="单击事件"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><th>001</th><th>张三</th><th>90</th><th>优秀</th></tr><tr id='last' align="center"><th>003</th><th>赵四</th><th>85</th><th>良好</th></tr></table><!-- 调用的js文件使用到export,import等高级技能时,必须使用属性type='module'标注。 --><script src="../../js/常见事件优化/常见事件优化.js" type="module"></script>
</body>
</html>

html调用“常见事件优化.js”文件。

// 导入变量,方法。
import {content, printConsoleLog} from "./打印日志.js";console.log(content);// 定义函数。
let mouseEnter = function (event) {// window.alert('鼠标进入事件');// console.log('鼠标进入事件');printConsoleLog('鼠标进入事件');
};function mouseLeave(event) {// window.alert('鼠标离开事件');// console.log('鼠标离开事件');printConsoleLog('鼠标离开事件');printConsoleLog(event.type);
};const button = document.querySelector('#b1');
button.addEventListener('click', function () {// window.alert('点击submit按钮');// console.log('点击submit按钮');printConsoleLog('点击submit按钮');
});// 根据id获取控件,绑定事件。
const inputController = document.querySelector('#last');
inputController.addEventListener('mouseenter', mouseEnter);
inputController.addEventListener('mouseleave', mouseLeave);

被导入的“打印日志.js”文件,文件中通过export关键字标注导出被调用的方法和变量。


export function printConsoleLog(msg) {console.log(msg);
}export let content = 'abc';

http://www.lryc.cn/news/608059.html

相关文章:

  • 开疆智能Profinet转Modbus网关连接信捷PLC从站配置案例
  • K8S部署ELK(二):部署Kafka消息队列
  • 深入 Go 底层原理(六):垃圾回收(GC)
  • ubuntu22.04离线一键安装gpu版docker
  • 开源列式分布式数据库clickhouse
  • pyqt5显示任务栏菜单并隐藏主窗口,环境pyqt5+vscode
  • CS课程项目设计7:基于Canvas交互友好的五子棋游戏
  • 从AI智能体出发,重构数据中台:迈向Agentic时代的数据能力体系
  • Docker容器中文PDF生成解决方案
  • Oracle 11gR2 Clusterware应知应会
  • 分布式事务----spring操作多个数据库,事务以及事务回滚还有用吗
  • Oracle 11g RAC集群部署手册(二)
  • Token系列 - 再谈稳定币
  • mac 安装pytho3 和pipx
  • 讲一讲Spring核心三大组件IOC、Bean、AOP
  • 我的世界模组开发教程——物品item(1)
  • Vuex 4.0:Vue.js 应用的状态管理新篇章
  • 深度学习核心:神经网络-激活函数 - 原理、实现及在医学影像领域的应用
  • K8S部署ELK(一):部署Filebeat日志收集器
  • SCI 绘图实用 RGB 配色方案:多组比较
  • [Windows] 微软.Net运行库离线合集包 Microsoft .Net Packages AIO v13.05.25
  • Vue3+ts自定义指令
  • 从毫秒到真义:构建工业级RAG系统的向量检索优化指南
  • 入门MicroPython+ESP32:ESP32烧录MicroPython固件
  • Python进阶(5):类与继承
  • Unity_数据持久化_XML存储相关
  • 探索:Uniapp 安卓热更新
  • 智能合约漏洞导致的损失,法律责任应如何分配
  • 医疗后台管理系统开发实践
  • 分类任务当中常见指标 F1分数、recall、准确率分别是什么含义