From 80643fe310c9ee8c4927684708a65d18ca869fc4 Mon Sep 17 00:00:00 2001
From: Leopen <790480953@qq.com>
Date: Sat, 3 Sep 2022 12:58:31 +0800
Subject: [PATCH 1/3] =?UTF-8?q?test:=20=E4=BF=AE=E6=94=B9=E4=BA=86?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E8=AF=B4=E6=98=8E=EF=BC=9A=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E4=B8=AA...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tests/unit/example.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js
index 4bc26e0..82e981b 100644
--- a/tests/unit/example.spec.js
+++ b/tests/unit/example.spec.js
@@ -12,7 +12,7 @@ describe('HelloWorld.vue', () => {
   })
 })
 describe('HelloWorld.vue', () => {
-  it('校验第一个按钮的spm是否为aa.dd.ff', async () => {
+  it('校验第二个按钮的spm是否为aa.dd.ff', async () => {
     const wrapper = shallowMount(HelloWorld, { attachTo: document.body })
     const button = wrapper.findAll('button')
     await button[1].trigger('click')

From 948cff1bce7060fd8c59746c02a9e527613a9531 Mon Sep 17 00:00:00 2001
From: Leopen <790480953@qq.com>
Date: Sat, 3 Sep 2022 16:04:17 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E7=AE=80?=
 =?UTF-8?q?=E6=98=93=E7=9A=84spm=EF=BC=8C=E9=80=9A=E8=BF=87=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue | 38 ++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..a59c95a 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>
+    <span>show spm:{{ spmText }}</span>
     <div data-spmb="bb">
       <button data-spmc="cc">Click it</button>
     </div>
@@ -10,16 +10,34 @@
   </div>
 </template>
 
-<script>
-// TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
-export default {
-  name: 'HelloWorld',
-  data: ()=>{
-    return {
-      spmText: 'xx.xx.xx'
-    }
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+let spmText = ref()
+
+const getSpmKey = (dataset) =>
+  dataset
+    ? Object.keys(dataset)?.find((propName) => propName.startsWith('spm'))
+    : undefined
+const getEventFlowNodes = (event) =>
+  event.path || (event.composedPath && event.composedPath()) || []
+const getSpmValue = (spmNode) => spmNode.dataset[getSpmKey(spmNode.dataset)]
+const isSpmNode = (node) => !!getSpmKey(node.dataset)
+const isButton = (node) => node.nodeName === 'BUTTON'
+
+const calculateSpmTextValue = (e) => {
+  const eventNodes = getEventFlowNodes(e)
+  if (isButton(e.target) && isSpmNode(e.target)) {
+    spmText.value = eventNodes
+      .filter(isSpmNode)
+      .map(getSpmValue)
+      .reverse()
+      .join('.')
   }
 }
+
+onMounted(() => document.addEventListener('click', calculateSpmTextValue))
+onUnmounted(() => document.removeEventListener('click', calculateSpmTextValue))
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -41,4 +59,4 @@ li {
 a {
   color: #42b983;
 }
-</style>
+</style>
\ No newline at end of file

From 5b74d2695fed29408d58ed6c47a59fe8567c637e Mon Sep 17 00:00:00 2001
From: Leopen <790480953@qq.com>
Date: Sat, 3 Sep 2022 16:13:36 +0800
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E6=8A=BD=E5=8F=96spm=E7=9A=84?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=B8=BA=E7=8B=AC=E7=AB=8Bhooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue | 28 ++--------------------------
 src/hooks/use-spm.js          | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 26 deletions(-)
 create mode 100644 src/hooks/use-spm.js

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index a59c95a..126b162 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -11,33 +11,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { useSpm } from '../hooks/use-spm'
 
-let spmText = ref()
-
-const getSpmKey = (dataset) =>
-  dataset
-    ? Object.keys(dataset)?.find((propName) => propName.startsWith('spm'))
-    : undefined
-const getEventFlowNodes = (event) =>
-  event.path || (event.composedPath && event.composedPath()) || []
-const getSpmValue = (spmNode) => spmNode.dataset[getSpmKey(spmNode.dataset)]
-const isSpmNode = (node) => !!getSpmKey(node.dataset)
-const isButton = (node) => node.nodeName === 'BUTTON'
-
-const calculateSpmTextValue = (e) => {
-  const eventNodes = getEventFlowNodes(e)
-  if (isButton(e.target) && isSpmNode(e.target)) {
-    spmText.value = eventNodes
-      .filter(isSpmNode)
-      .map(getSpmValue)
-      .reverse()
-      .join('.')
-  }
-}
-
-onMounted(() => document.addEventListener('click', calculateSpmTextValue))
-onUnmounted(() => document.removeEventListener('click', calculateSpmTextValue))
+const { spmText } = useSpm()
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/hooks/use-spm.js b/src/hooks/use-spm.js
new file mode 100644
index 0000000..2f5a51d
--- /dev/null
+++ b/src/hooks/use-spm.js
@@ -0,0 +1,33 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useSpm() {
+  let spmText = ref()
+
+  const getSpmKey = (dataset) =>
+    dataset
+      ? Object.keys(dataset)?.find((propName) => propName.startsWith('spm'))
+      : undefined
+  const getEventFlowNodes = (event) =>
+    event.path || (event.composedPath && event.composedPath()) || []
+  const getSpmValue = (spmNode) => spmNode.dataset[getSpmKey(spmNode.dataset)]
+  const isSpmNode = (node) => !!getSpmKey(node.dataset)
+  const isButton = (node) => node.nodeName === 'BUTTON'
+
+  const calculateSpmTextValue = (e) => {
+    const eventNodes = getEventFlowNodes(e)
+    if (isButton(e.target) && isSpmNode(e.target)) {
+      spmText.value = eventNodes
+        .filter(isSpmNode)
+        .map(getSpmValue)
+        .reverse()
+        .join('.')
+    }
+  }
+
+  onMounted(() => document.addEventListener('click', calculateSpmTextValue))
+  onUnmounted(() =>
+    document.removeEventListener('click', calculateSpmTextValue)
+  )
+
+  return { spmText }
+}