当前位置: 首页 > 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.xdnf.cn/news/1231921.html

相关文章:

  • 从零打造大语言模型--处理文本数据
  • OAuth 2.0 的安全升级版授权协议 OAuth 2.1 详解
  • 基于深度学习的医学图像分析:使用MobileNet实现医学图像分类
  • FFmpeg+javacpp中纯音频播放
  • ffmpeg命令和ffplay命令详解
  • 高效轻量的C++ HTTP服务:cpp-httplib使用指南
  • Linux进程间通信——system V信号量
  • Agents-SDK智能体开发[4]之集成MCP入门
  • 【整数转罗马数字】
  • 探索延迟生效变量类:一种灵活的状态管理机制
  • linux进度条程序
  • WD5208S,12V500MA,应用于小家电电源工业控制领域
  • Z20K118库中寄存器及其库函数封装-WDOG库
  • 深入 Go 底层原理(十):defer 的实现与性能开销
  • hcip---ospf知识点总结及实验配置
  • 淘宝获取商品SKU详情API接口操作指南
  • Python爬虫实战:研究SimpleCV技术,构建图像获取及处理系统
  • 注意点:不同对象(更准确地说,不同类型/类)的魔法方法(Magic Methods,也叫特殊方法,以双下划线`__`开头和结尾)通常是不一样的。
  • 字节Seed发布扩散语言模型,推理速度达2146 tokens/s,比同规模自回归快5.4倍
  • 深入 Go 底层原理(三):Goroutine 的调度策略
  • [论文阅读] 人工智能 + 软件工程 | GitHub Marketplace中CI Actions的功能冗余与演化规律研究
  • Text2SQL:如何通过自然语言直接获取数据,打破技术壁垒?
  • 【Android】通知
  • Docker 的网络模式
  • 红黑树(RBTree)
  • 【LeetCode 热题 100】(四)子串
  • 前端-移动Web-day3
  • 云环境K8s集群WebSocket连接失败解决方案
  • 【REACT18.x】使用vite创建的项目无法启动,报错TypeError: crypto.hash is not a function解决方法
  • 基于 LightGBM 的二手车价格预测