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

20230310----重返学习-DOM元素的操作-时间对象-定时器

news 2025/10/23 21:03:29

day-024-twenty-four-20230310-DOM元素的操作-时间对象-定时器

复习

  • 获取元素
    • id
      • document.getElementById()
    • 类名
      • document.getElementsByClassName()
    • 标签名
      • document.getElementsByTagName()
    • name属性
      • document.getElementsByName()
    • 选择器
      • document.querySelector()
      • document.querySelectorAll()
    • 简写
      • document.documentElement
      • document.head
      • document.body
  • 获取屏幕宽高
    • screenWidth = document.documentElement.clientWidth||document.body.clientWidth
    • screenHeight = document.documentElement.clientHeight||document.body.clientHeight
  • 节点类型
    • 元素节点
    • 属性节点
    • 文本节点
    • 注释节点
    • 文档节点
  • 节点与元素节点是不一样的
  • 获取关联节点
    • parentNode 父节点 节点只可能是元素节点
    • childNodes 子节点
    • children 子元素节点
    • firstChild 第一个子节点
    • firstElementChild 第一个子元素节点
    • lastChild 最后一个子节点
    • lastElementChild 最后一个子元素节点
    • previousSibling 上一个兄弟节点
    • previousElementSibling 上一个兄弟元素节点
    • nextSibling 下一个兄弟节点
    • nextElementSibling 下一个兄弟元素节点

如果一个属性名称或方法单词拼写忘记了

  • 直接用dir打印出该对象，看它身上的属性，得大概知道那个属性或方法的样子
  • 打开MDN文档查看一下该方法或属性，得大概知道它的开头

DOM

  • 增删改

    • document.createElement(tagName) 创建元素节点
    • document.createTextNode(textContent) 创建文本节点

  • 节点插入

    • 父节点.appendChild(当前节点)

    • 父节点.insertBefore(当前节点, 后方参照节点)

      var  insertedNode = parentNode.insertBefore(newNode, referenceNode)
//newNode：将要插入的节点
//referenceNode：被参照的节点（即要插在该节点之前）
//insertedNode：插入后的节点
//parentNode：父节点

  • 创建了DOM元素，如果没插入到页面，那么页面上就不会显示

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>DOM元素增删改</title></head><body><div class="box">box</div></body>
</html><script>//创建一个元素节点var elementNode = document.createElement("div");console.dir(elementNode);//创建一个文本节点var textNode = document.createTextNode("文本节点");console.dir(textNode);//将新目标节点插入到父元素的末尾const box = document.getElementsByClassName("box")[0];box.appendChild(elementNode);box.appendChild(textNode);//在于父元素中的后方参照节点前面插入新目标节点//1.获取到父节点;const parentNode = document.getElementsByClassName("box")[0];//2.获取到后方参照节点;const beforeNode = elementNode;//3.创建p节点;const element1 = document.createElement("p");//4.创建文本节点;const text1 = document.createTextNode("p Text");// 5.将文本节点放到p标签里面element1.appendChild(text1);//6.p节点插入到div节点前面parentNode.insertBefore(element1, beforeNode);// 父节点.insertBefore(新节点，参照的节点)
</script>

  • DOM元素对象.innerHTML

    • 不能直接插入DOM节点对象

  • DOM元素对象.innerText

    • 不能直接插入DOM节点对象

  • cloneNode() 克隆节点

    • cloneNode()用于把某一个节点进行克隆
      • element.cloneNode(); 浅克隆，只是克隆了一个节点，里面的内容还有样式都没克隆
      • element.cloneNode(true); 深克隆，把节点包含的所有内容进行克隆

  • removeChild() 删除节点

    • parentNode.removeChild(item)

  • 属性节点操作属性值

    • getAttribute() 获取对应属性的属性值
      • targetElement.getAttribute(‘class’)
    • setAttribute() 设置对应属性的属性值
      • 必须要有两个参数，只有一个参数会报错
      • targetElement.setAttribute(‘fang1’,‘fangtofang1’)
    • removeAttribute() 删除对应属性
      • targetElement.removeAttribute(‘name’)

  • 中括号语法操作DOM属性

    • elementObject.fang3='fangtofang3'或elementObject['fang3']='fangtofang3' 设置对应属性的属性值
    • elementObject.fang3或elementObject['fang3'] 获取对应属性的属性值
    • delete elementObject.fang4或delete elementObject['fang3']

  • 属性节点操作与中括号语法操作有区别，不能混用

    • 属性节点的操作是放在标签身上的
      • 基于Attribute dom方法增删改，是修改html结构来完成的（此种方法设置的在结构上可以看到）
    • 中括号语法的操作是放在DOM元素对象上的
      • 基于键值对方式 增删改：修改当前对象的堆内存空间完成的（在堆内存空间可以看到）
    • 以上两种方式不能混用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>复习</title></head><body><div class="box" name="fang">box原生内容<p class="item">box原生子元素</p></div></body>
</html><script>const box = document.getElementsByClassName("box")[0];const shallowCloning = box.cloneNode();console.log(shallowCloning,'默认浅克隆');const deepCloning = box.cloneNode(true);console.log(deepCloning,'传了true，就是深克隆');const item = document.getElementsByClassName("item")[0];const parentNode = document.getElementsByClassName("box")[0];parentNode.removeChild(item)const targetElement = document.getElementsByClassName('box')[0]const attributeValue = targetElement.getAttribute('class')console.log(attributeValue,'获取的是对应属性的属性值')const idAttribute = targetElement.getAttribute('id')console.log(idAttribute,'不存在的属性是null')targetElement.setAttribute('fang1','fangtofang1')// targetElement.setAttribute('fang2')//报错 必须要有两个参数targetElement.removeAttribute('name')console.log([targetElement],'setAttribute只是设置在标签上，对应对象上并没有设置')console.log(targetElement.fang1,'中括号语法拿不到用setAttribute()设置的自定义属性')const elementObject = document.getElementsByClassName('box')[0]elementObject.fang3 = 'fangtofang3'const fang3 = elementObject.fang3elementObject.fang3 = 'fang'elementObject.fang4 = 'fangtofang4'delete elementObject.fang4console.dir(elementObject)
</script>

案例

  • 利用a标签上的search属性与hash属性来处理url字符串

时间对象

  • 时间对象的作用
    • Date 对象用于处理日期和时间。
  • 创建时间对象
    • new Date()
    • 时间对象是一个对象
  • 相关方法
    • getFullYear();获取年
    • getMonth();获取月 0到11 代表1月到12月
    • getDate();获取日期
    • getDay();星期几 （0—6）代表周日到到周六
    • getHours();时
    • getMinutes();分
    • getSeconds();秒
    • getMilliseconds();毫秒
    • getTime();获取当前日期到1970年1月1号 00：00:00 之间的毫秒差
    • toLocaleString();// 获取到的是年月日，时分秒"2019/12/25 上午10:15:50"
    • toLocaleDateString();// 获取到是字符串的年月日，例如：“2019/12/25”
    • toLocaleTimeString();/ 获取到的是字符串的时分秒上午10:18:28
  • 看到new就是构造函数，如果不传参数，函数的小括号可以省略。
  const date = new Date();console.log(date, "当前时间");const dateType = typeof new Date();console.log(dateType, "时间对象的类型"); //'object'const dateObject = new Date("Sat Jul 09 2022 01:02:03 GMT+0800 (中国标准时间)");console.log([dateObject]); //"Sat Jul 09 2022 01:02:03 GMT+0800 (中国标准时间)";//因为调用toString()隐式转化了。// console.dir(dateObject)//可以看到它就是一个对象。console.log(dateObject.getFullYear()); //2022console.log(dateObject.getMonth()); //6console.log(dateObject.getDate()); //9console.log(dateObject.getDay()); //6 [0,6] [周日 到 周一 到 周六]console.log(dateObject.getHours()); //1console.log(dateObject.getMinutes()); //2console.log(dateObject.getSeconds()); //3console.log(dateObject.getMilliseconds()); //0console.log(dateObject.getTime()); //1657299723000console.log(dateObject.toLocaleString()); //2022/7/9 01:02:03console.log(dateObject.toLocaleDateString()); //2022/7/9console.log(dateObject.toLocaleTimeString()); //01:02:03

当日静态时间

  function getTimeString() {function addZero(num) {return num > 9 ? num : `0${num}`;}const time = new Date();const year = time.getFullYear();const month = time.getMonth() + 1;const date = time.getDate();const hours = time.getHours();const minutes = time.getMinutes();const seconds = time.getSeconds();const milliseconds = time.getMilliseconds();const weekIndex = time.getDay();const weeksList = ["日", "一", "二", "三", "四", "五", "六"];const day = weeksList[weekIndex];const nowTime = `${addZero(year)}年${addZero(month)}月${addZero(date)}日 ${addZero(hours)}时${addZero(minutes)}分${addZero(seconds)}秒${addZero(milliseconds)} 周${day}`;return nowTime;}console.log(getTimeString())

定时器

  • 定时器是异步任务，只要当同步代码执行完毕之后，才能执行。

  • 定时器的参数说明

    • 定时器可以传递多个参数
      1. 执行的函数
      2. 时间
      3. 后面的参数就是执行函数在执行的时候传递的实参

  • setInterval() 间隔多少时间后，去执行某些事情，是多次调用

      // setInterval(function(){},1000)const timer1 = setInterval(() => {console.log("setInterval()，每过一次时间间隔就执行一次", 1);}, 1000);const theFunction = () => {console.log("定时器可以传递多个参数：1、执行的函数 2、时间 3、后面的参数就是执行函数在执行的时候传递的实参 定时器是有返回值的，返回值代表定时器处于当前页面中的第几个", 2);}const timer2 = setInterval(theFunction, 1000);

  • setTimeout() 一定的时间后，去执行某些事情，是单次调用

      // setTimeout(function(){},1000)const timer2 = setTimeout(() => {console.log("setTimeout()，第一次时间执行一次，之后都不再执行", 1);}, 1000);const theFunction = (arg1,arg2) => {console.log("定时器可以传递多个参数", arg1,arg2);//"定时器可以传递多个参数",'入参一','入参二'}const timer2 = setTimeout(theFunction, 1000,'入参一','入参二');

  • 每个定时器都会返回一个定时器编号

    • 返回值代表当前定时器是当前页面中的第几个定时器

      • 定时器编号是延时定时器与重复执行定时器共用的。

        • 但清除定时器时，延时定时器与重复执行定时器都各自要调用各自对应的方法

    • 可以用对应的清理定时器的方法来清除该定时器。

        const timer1 = setInterval(() => {console.log("setInterval()");}, 1000);const timer2 = setTimeout(() => {console.log("setTimeout()");}, 1000);console.log("timer1--->", timer1);console.log("timer2--->", timer2);clearInterval(timer1);clearTimeout(timer2);

  • 清除定时器

    • clearInterval()

      • 用来清除setInterval()所生成的定时器

          const timer1 = setInterval(() => {console.log("setInterval()");}, 1000);clearInterval(timer1);

    • clearTimeout()

      • 用来清除setTimeout()所生成的定时器

          const timer2 = setTimeout(() => {console.log("setTimeout()");}, 1000);clearTimeout(timer2);

进阶参考

  1. async/await原理揭秘
  2. JS中attribute和property的区别 - DOM元素上的属性两种设置方法的区别

相关文章：

20230310----重返学习-DOM元素的操作-时间对象-定时器

day-024-twenty-four-20230310-DOM元素的操作-时间对象-定时器 复习 获取元素 id document.getElementById() 类名 document.getElementsByClassName() 标签名 document.getElementsByTagName() name属性 document.getElementsByName() 选择器 document.querySelector()docum…...

编程日记 2023/3/11 19:07:37

江苏专转本转本人后悔排行榜

江苏专转本转本人后悔排行榜 一、复习的太迟&#xff1a; 后悔指数:五颗星。 复习越到最后&#xff0c;时间一天天变少&#xff0c;要复习的内容还有很多&#xff0c;很多人都后悔没有早早开始&#xff0c;总想着多给我两月一定会考上的。 担心时间不够用&#xff0c;那就努力利…...

编程日记 2023/3/11 19:06:35

【算法时间复杂度】学习记录

最近开算法课&#xff0c;开几篇文章记录一下算法的学习过程。 关于算法的重要性 学习计算机当程序员的话&#xff0c;在编程过程中是绕不开算法这个大矿山的&#xff0c;需要我们慢慢挖掘宝藏。 算法&#xff08;Algorithm&#xff09;是指用来操作数据、解决程序问题的一组…...

编程日记 2023/3/11 19:05:34

汽车车机芯片Linux系统内核编译问题总结

谈到车机，很多人会想到华为问界上装的大屏车机，号称车机的天花板，基于鸿蒙OS的，而今天谈到的车机芯片用的是linux内核Kernel，对于它的编译，很多人一时会觉得头大，的确如果工具不是很齐全，就会遇到这样那样的问题，但是过程都会有错误提示，按照错误提示基本可以解决，而…...

编程日记 2023/3/11 19:04:31

Android13 音量曲线调整

Android13 音量曲线调整 Android13 上配置文件的路径&#xff1a; /vendor/sprd/modules/audio/engineconfigurable_apm/工程目录/system/etc/audio_engine_config/audio_policy_engine_stream_volumes.xml /vendor/sprd/modules/audio/engineconfigurable_apm/工程目录/sys…...

编程日记 2023/3/11 19:03:29

OpenHarmony通过MQTT连接 “改版后的华为IoT平台”

一、前言 本篇文章我们使用的是BearPi-HM_Nano开发板：小熊派的主板+E53_IA1扩展板 源码用的是D6_iot_cloud_oc，点击下载BearPi-HM_Nano全量源码 那么为什么要写这篇呢？ 前段时间看到OpenHarmony群里，经常有小伙伴问接入华为IoT平台的问题，他们无法正常连接到华为IoT平台等…...

编程日记 2023/3/11 19:02:26

SQS (Simple Queue Service)简介

mazon Simple Queue Service (SQS)是一种完全托管的消息队列服务&#xff0c;可以让你分离和扩展微服务、分布式系统和无服务应用程序。 在讲解SQS之前&#xff0c;首先让我们了解一下什么是消息队列。 消息队列 还是举一个电商的例子&#xff0c;一个用户在电商网站下单后付…...

编程日记 2023/3/11 19:01:25

高速PCB设计指南系列(三)

第一篇 高密度(HD)电路的设计 本文介绍&#xff0c;许多人把芯片规模的&#xff22;&#xff27;&#xff21;封装看作是由便携式电子产品所需的空间限制的一个可行的解决方案&#xff0c;它同时满足这些产品更高功能与性能的要求。为便携式产品的高密度电路设计应该为装配工艺…...

编程日记 2023/3/11 19:00:23

【C++】C++11——左右值|右值引用|移动语义|完美转发

文章目录一、左值与右值1.概念2.引用3.注意二、右值引用的意义1.左值引用意义2.右值引用和移动语义3.容器新增三、万能引用四、完美转发一、左值与右值 1.概念 左值是什么&#xff1f;右值是什么&#xff1f; 左值是一个表示数据的表达式&#xff08;如变量名或解引用的指针&…...

编程日记 2023/3/11 18:59:20

[ROC-RK3399-PC Pro] 手把手教你移植主线Buildroot（基于2023.02-rc3版本）

&#x1f347; 博主主页&#xff1a;Systemcall小酒屋&#x1f347; 博主简介&#xff1a;Neutionwei&#xff0c;C站嵌入式领域新星创作者之一&#xff0c;一枚热爱开源技术、喜欢分享技术心得的极客&#xff0c;注重简约风格&#xff0c;热衷于用简单的案例讲述复杂的技术&am…...

编程日记 2023/3/11 18:58:16

重温线性代数

前言 对于普通的数学工作者而言&#xff0c;掌握矩阵、线性空间的基本性质和用法比领会抽象的概念更实用。数学专业的同学需要全面深入学习近世代数的理论和演绎法则&#xff0c;例如模的概念和运算。 总之&#xff0c;我个人认为&#xff0c;不论是微积分、还是线性代数&…...

编程日记 2023/3/11 18:57:14

2023河北沃克HEGERLS甘肃金昌重型仓储项目案例｜托盘式四向穿梭车智能密集存储系统在工业行业的创新应用

项目名称&#xff1a;自动化仓储托盘式四向穿梭车智能密集立体库项目 项目合作客户&#xff1a;甘肃省金昌市某集团企业 项目施工地域&#xff1a;甘肃省金昌市 设计与承建单位&#xff1a;河北沃克金属制品有限公司&#xff08;自主品牌&#xff1a;海格里斯HEGERLS&#x…...

编程日记 2023/3/11 18:56:11

软件测试的案例分析 - 闰年5

文章目的 显示不同的博客能获得多少博客质量分 &#xff08;这是关于博客质量分的测试 https://www.csdn.net/qc) 这个博客得了 83 分。怎么才能得到更多分数&#xff1f; 正文 我们谈了不少测试的名词, 软件是人写的, 测试计划和测试用例也是人写的, 人总会犯错误。错误发生…...

编程日记 2023/3/11 18:55:06

Linux文件基础I/O

文件IO文件的常识基础IO为什么要学习操作系统的文件操作C语言对于函数接口的使用接口函数介绍如何理解文件文件描述符重定向更新给模拟实现的shell增加重定向功能为什么linux下一切皆文件&#xff1f;文件的常识 1.空文件也要在磁盘占据空间 2.文件 内容 属性 3.文件操作 对…...

编程日记 2023/3/11 18:54:04

HTML看这一篇就够啦，HTML基础大全，可用于快速回顾知识，面试首选

HTML 1 基础 1.1 DOCTYPE <!DOCTYPE> 文档类型声明&#xff0c;作用就是告诉浏览器使用哪种HTML版本来显示网页。 <!DOCTYPE html> 这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页. 注意: 声明位于文档中的最前面的位置&#xff0c;处于 标签之前。 …...

编程日记 2023/3/11 18:53:01

Altium Designer(AD)软件使用记录05-PCB叠层设计

目录Altium Designer(AD)软件使用记录05-PCB叠层设计一、正片层和负片层的介绍1、正片层(Signal)2、负片层(Plane)3、内电层的分割实现二、正片层和负片层的内缩设计1、负片设置内缩20H原则2、正片铺铜设置内缩1、设置规则2、重新铺铜三、AD的层叠设计四、叠层设计需要注意的问…...

编程日记 2023/3/11 18:51:57

ArcGIS动态表格批量出图

一.产品介绍&#xff1a;ArcGIS动态表格扩展模块Mapping and Charting Solutions&#xff0c;可用于插入动态表格&#xff0c;与数据驱动结合&#xff0c;出图效率无敌。注&#xff1a;优先选择arcgis10.2.2。 二、下载连接&#xff1a; https://www.xsoftnet.com/share/a001CX…...

编程日记 2023/3/11 18:50:53

ChatGPT真神奇，但是也真焦虑

ChatGPT火爆ChatGPT的火爆程度不用说也知道。就目前来说&#xff0c;已经开始冲击各行业了&#xff0c;比如客服、智能助手、语言学习、自然语言处理等等等。。ChatGPT冲击冲击最高的可能就是中间这个段位的了。高段位无法取代&#xff0c;但是低段位&#xff0c;通过使用ChatG…...

编程日记 2023/3/11 18:49:52

mos管驱动与米勒平台介绍、消除

mos驱动设计 1.选择适当的驱动芯片 为了控制MOSFET&#xff0c;需要使用专门的驱动芯片。选择合适的芯片需要考虑MOSFET的电压和电流需求。常见的驱动芯片包括IR2110、IR2184、MIC4424等。 2.设计电路 在驱动电路中&#xff0c;需要加入一些电路元件来保证MOSFET的顺畅工作…...

编程日记 2023/3/11 18:48:46

20230311英语学习

Philosophy of Food: Guidelines for an Authentic Approach to Eating 饮食哲学&#xff1a;值得思考的问题 Whats Philosophical About Food? Philosophy of food finds its basis on the idea that food is a mirror.Eating mirrors the making of a self, that is, the …...

编程日记 2023/3/11 18:47:44

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/10/20 10:43:45

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/10/8 22:39:15

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/10/18 14:54:04

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/10/21 10:23:30

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/10/21 3:50:52

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/10/21 23:39:44

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/10/22 20:37:26

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/9/28 20:37:50

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/10/23 2:27:01

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11