#夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(上) 原创 精华

阿毛0920
发布于 2022-7-22 08:53
浏览
2收藏

本文正在参加星光计划3.0–夏日挑战赛

前言

为了以后的幸福生活,我决定,来一场对某个dom元素的刺探,在OpenHarmony下应用开发,基于JS对某位dom元素的刺探(ps:某位dom元素兄弟,别怪我,要怪就怪某文档,真的太…找不到我想要的东西)
好像虚拟dom上台后,咱原生大兄弟就被送进宫了,但他也是曾经练过,用过,爱过。从对性能来看原生才是最猛的,但心智负担太大,这是大佬专属席位(一般和发量有关)。虚拟dom理论上可以逼近原生,但…理论嘛…扯远了…下面开始正题。

事件起源

某一天,阿毛同学来到了openHarmony世界,很快他就迎来了一位很眼熟的带路人"Hello world",不过他很快就把带路人踹开了,想当年就是这货带他入坑的。凭我多年开发经验,有文档老哥在就行了,不过这次,开发的时候感觉有点不靠谱,想找的找不到。更麻烦的是,他遇到一位控制台老哥,跟隔壁某位姓谷的控制台老哥比就很emo…了(谷:全靠同行衬托)
例如:现在我触发了点击事件,但我忘记了事件相关的具体属性,于是我就是直接控制台输出,然后就可以看到我想要的方法或属性,不过显然是我想多了。
此时控制台老哥说:那我给你一个对象吧,然后甩给你了一个对象,你很开心,然后真的是对象
[Object Object] -_-||
 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(上)-鸿蒙开发者社区
好家伙直接给toString后的结果,经过多次测试后,我悟了,你有你的toString,我有我的挂墙梯,是时候请出祖传艺能!

JSON.stringify()

JSON.stringify()JSON.parse()两位在深拷贝界,除了遇到function、undefined等几位大佬外,基本是无敌,这次请两位出来确实是迫不得已,下次深拷贝我就请深度递归兄弟出来干活
JSON.stringify()遇到functionundefined后,在隔壁谷某的控制台如下图
 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(上)-鸿蒙开发者社区
显然 属性j和函数c不见了

经过JSON.stringify()后的事件响应的对象

 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(上)-鸿蒙开发者社区

//经过`JSON.stringify()`后的事件响应对象结果,部分省略
 {
   "type":"click",
   "target":{
      "ref":"14",
      "type":"div",
      "attr":{
	   "$data":{ "bb":"这是事件传递过来的参数"},
           "ref":"con",
           "className":"game-container",
           "debugLine":"pages/index/index:8"},
      "style":{...},
      "customComponent":false,
      "event":["click"]},
      "currentTarget":{
	    "ref":"14",
	    "type":"div",
	    "attr":{...},
            "customComponent":false,
            "event":["click"]},
      "timestamp":1658423343926
}

由上可知,事件响应的对象结果有

dom的Click事件响应对象

属性

type

这是触发的事件名称,例如我现在的就是在触发点击事件click

target

绑定该事件的dom元素

  • target.ref 这个不是attr中的ref,这个应该是元素在生成的虚拟dom时候给的标记,感觉类似于key值,如果作用同key值,那么应该是为了有助于渲染更新diff之类的,根据元素的位置有不同的值,好像都是2的倍数,在dom中也有一个内部的值和他相同叫_啥node,咱们后面说这个(这些是我推测的,不保证对)
  • target.type 这个是dom元素的标签,在也是这次被刺探的dom,div
  • target.attr 这是元素的属性,最重要的是,事件传递的通信的值就在这里
    1. target.attr.$data[xx] 这是事件触发传递过来的值 另一种写法target.dataSet[xx]
    2. target.attr.ref这是在标签中设置的ref的值如,<div ref=“bb” ></div>
    3. target.attr.className 这个是类名,从我测试的值来看,这是直接拿下来的字符串包括有动态数据 如container bb {{d}} 直接拿到的值就是这样,后面他应该还有处理吧
    4. target.attr.debugLine 好像是dom元素所在文件的路径,估计我们也用不上
  • target.attr.customComponent 看着像是用来确定是不是自定义组件啥的,我也不确定,各位客官谁知道可以补充一下吗
  • target.event 这里应该是包含了在dom元素上注册的所有事件的数组
  • target.style 这里是包含了元素的样式,不过从浏览器的渲染优化角度来说,样式最好是缩写啊,这里border颜色,宽度都各分出4个出来,还是说这是后面处理后的结果,不懂这些原理…

currentTarget

这个用于事件冒泡时,在使用事件委托时可以用到,这里面也是dom元素,是当前在绑定的元素下触发事件的元素,这个属性很有用

timestamp

时间戳,不知道有啥用,没用过

方法

stopPropagation()

阻止事件冒泡,en…我试了一下。。没效果,可能是我用错了
代码图
 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(上)-鸿蒙开发者社区
结果图
 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(上)-鸿蒙开发者社区

后续

en…字数有点多了,dom还没写完,后面应该还有一篇。。。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-7-22 09:48:05修改
6
收藏 2
回复
举报
4条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

老哥的文章很有风格呀,果断关注了。

回复
2022-7-22 10:48:07
Whyalone
Whyalone

持续关注DOM中

回复
2022-7-22 10:56:32
阿毛0920
阿毛0920 回复了 红叶亦知秋
老哥的文章很有风格呀,果断关注了。

谢谢

 

回复
2022-7-22 12:23:11
阿毛0920
阿毛0920 回复了 Whyalone
持续关注DOM中

谢谢关注

回复
2022-7-22 12:23:27
回复
    相关推荐