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

阿毛0920

发布于 2022-7-22 08:53

浏览

2收藏

前言

为了以后的幸福生活，我决定，来一场对某个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()遇到function和undefined后，在隔壁谷某的控制台如下图
#夏日挑战赛# 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个出来，还是说这是后面处理后的结果，不懂这些原理…