From 6b41c0aba9ec10f33b0c5b6eada527a4cfbca8c2 Mon Sep 17 00:00:00 2001
From: blankzz <454257312@qq.com>
Date: Mon, 29 Aug 2022 01:19:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(homework9):=20=E5=AE=8C=E6=88=90=20homewor?=
 =?UTF-8?q?k9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue  | 16 ++++--------
 src/components/hooks/useSpm.js | 46 ++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 src/components/hooks/useSpm.js

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..66ad152 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="hello" data-spma="aa">
-    <span>show spm:{{spmText}}</span>
+  <div ref="wrapperRef" class="hello" data-spma="aa">
+    <span>show spm:{{ spmText }}</span>
     <div data-spmb="bb">
       <button data-spmc="cc">Click it</button>
     </div>
@@ -10,16 +10,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { useSpm } from "./hooks/useSpm";
 // TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
-export default {
-  name: 'HelloWorld',
-  data: ()=>{
-    return {
-      spmText: 'xx.xx.xx'
-    }
-  }
-}
+const { spmText, wrapperRef } = useSpm();
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/components/hooks/useSpm.js b/src/components/hooks/useSpm.js
new file mode 100644
index 0000000..a93806d
--- /dev/null
+++ b/src/components/hooks/useSpm.js
@@ -0,0 +1,46 @@
+import { ref, onMounted, onBeforeUnmount } from "vue";
+export function useSpm() {
+  const spmText = ref("xx.xx.xx");
+  const wrapperRef = ref();
+
+  onMounted(() => {
+    wrapperRef.value.addEventListener("click", handleSpmClick);
+  });
+
+  onBeforeUnmount(() => {
+    wrapperRef.value.removeEventListener("click", handleSpmClick);
+  });
+
+  function handleSpmClick(e) {
+    const target = e.target;
+    spmText.value = getSpmText(target);
+  }
+
+  function getSpmText(dom) {
+    const result = [];
+    traverseDom(dom);
+    return result.reverse().join(".");
+
+    function traverseDom(dom) {
+      if (dom.tagName.toLowerCase() === "body") {
+        return;
+      }
+
+      if (dom.dataset) {
+        const spmKey = Object.keys(dom.dataset).find((key) =>
+          /^spm.*/.test(key)
+        );
+        if (spmKey) {
+          result.push(dom.dataset[spmKey]);
+        }
+      }
+
+      traverseDom(dom.parentNode);
+    }
+  }
+
+  return {
+    spmText,
+    wrapperRef
+  }
+}