当前位置: 首页 > 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.dtcms.com/a/311600.html

相关文章:

  • 【编号413】“一带一路”25个港口城市及其周边区域海岸线分类数据
  • 译|Netflix 数据平台运营中基于机器学习自动修复系统
  • 【网络与爬虫 38】Apify全栈指南:从0到1构建企业级自动化爬虫平台
  • 【Android】使用 Intent 传递对象的两种序列化方式
  • RPG增容2.尝试使用MMC根据游戏难度自定义更改怪物属性(三)
  • 推荐系统学习笔记(六)自监督学习
  • 【语音技术】意图与语料
  • gcc-arm-none-eabi安装后,找不到libgcc.a的拉置
  • 边缘计算优化!陌讯轻量化模型实现路面裂缝误检率↓78%
  • 【大模型LLM】大模型训练加速 - 深度混合精度训练(Mixed Precision Training)原理详解
  • 数字化生产管理系统设计
  • Leetcode 11 java
  • Agentic RAG:自主检索增强生成的范式演进与技术突破
  • ADB 查看 CPU 信息、查看内存信息、查看硬盘信息
  • 计算学习理论(PAC学习、有限假设空间、VC维、Rademacher复杂度、稳定性)
  • PHP 与 MySQL 详解实战入门(2)
  • Linux中使用Qwen模型:Qwen Code CLI工具
  • stm32F407 实现有感BLDC 六步换相 cubemx配置及源代码(二)
  • JavaScript将String转为base64 笔记250802
  • 人工智能篇之计算机视觉
  • golang——viper库学习记录
  • 牛客 - 旋转数组的最小数字
  • 题单【模拟与高精度】
  • 先学Python还是c++?
  • 工具自动生成Makefile
  • 机器学习——K 折交叉验证(K-Fold Cross Validation),实战案例:寻找逻辑回归最佳惩罚因子C
  • 深入理解C++中的vector容器
  • VS2019安装HoloLens 没有设备选项
  • 大模型(五)MOSS-TTSD学习
  • 二叉树的层次遍历 II