#夏日挑戰賽# OpenHarmony基于JS對某位dom元素的刺探(上)

本文正在參加星光計劃3.0–夏日挑戰賽

前言

為了以後的幸福生活，我決定，來一場對某個dom元素的刺探，在OpenHarmony下應用開發，基于JS對某位dom元素的刺探（ps：某位dom元素兄弟，别怪我，要怪就怪某文檔，真的太...找不到我想要的東西）

好像虛拟dom上台後，咱原生大兄弟就被送進宮了，但他也是曾經練過，用過，愛過。從對性能來看原生才是最猛的，但心智負擔太大，這是大佬專屬席位（一般和發量有關）。虛拟dom理論上可以逼近原生，但...理論嘛...扯遠了...下面開始正題。

事件起源

某一天，阿毛同學來到了openHarmony世界，很快他就迎來了一位很眼熟的帶路人"Hello world"，不過他很快就把帶路人踹開了，想當年就是這貨帶他入坑的。憑我多年開發經驗，有文檔老哥在就行了，不過這次，開發的時候感覺有點不靠譜，想找的找不到。更麻煩的是，他遇到一位控制台老哥，跟隔壁某位姓谷的控制台老哥比就很emo...了（谷：全靠同行襯托）

例如：現在我觸發了點選事件，但我忘記了事件相關的具體屬性，于是我就是直接控制台輸出，然後就可以看到我想要的方法或屬性，不過顯然是我想多了。

此時控制台老哥說：那我給你一個對象吧，然後甩給你了一個對象，你很開心，然後真的是對象

[Object Object]

-_-||

好家夥直接給

toString

後的結果，經過多次測試後，我悟了，你有你的toString，我有我的挂牆梯，是時候請出祖傳藝能！

JSON.stringify()

JSON.stringify()

和

JSON.parse()

兩位在深拷貝界，除了遇到

function、undefined

等幾位大佬外，基本是無敵，這次請兩位出來确實是迫不得已，下次深拷貝我就請

深度遞歸兄弟

出來幹活

JSON.stringify()

遇到

function

和

undefined

後，在隔壁谷某的控制台如下圖

顯然 屬性

j

和函數

c

不見了

經過JSON.stringify()後的事件響應的對象

//經過`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...我試了一下。。沒效果，可能是我用錯了

代碼圖

結果圖

後續

en...字數有點多了，dom還沒寫完，後面應該還有一篇。。。