完成homework9: 通过事件代理实现一个简单的spm信息收集

src/components/HelloWorld.vue

@@ -1,25 +1,73 @@
 <template>
-  <div class="hello" data-spma="aa">
+  <div
+    class="hello"
+    data-spma="aa"
+    @click="clickHandle"
+  >
     <span>show spm:{{spmText}}</span>
-    <div data-spmb="bb">
-      <button data-spmc="cc">Click it</button>
-    </div>
-    <div data-spmb="dd">
-      <button data-spmc="ff">Click it</button>
+    <div
+      v-for="spm in spms"
+      :key="spm.spmb"
+      :data-spmb="spm.spmb"
+    >
+      <button :data-spmc="spm.spmc">Click it</button>
     </div>
   </div>
 </template>
 
 <script>
 // TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
 export default {
-  name: 'HelloWorld',
-  data: ()=>{
+  name: "HelloWorld",
+  data: () => {
     return {
-      spmText: 'xx.xx.xx'
-    }
-  }
-}
+      spmText: "xx.xx.xx",
+      spms: [
+        { spmb: "bb", spmc: "qq" },
+        { spmb: "cc", spmc: "pp" },
+        { spmb: "dd", spmc: "oo" },
+        { spmb: "ee", spmc: "nn" },
+        { spmb: "ff", spmc: "mm" },
+        { spmb: "gg", spmc: "ll" },
+        { spmb: "hh", spmc: "kk" },
+        { spmb: "ii", spmc: "jj" },
+      ],
+    };
+  },
+  methods: {
+    clickHandle(event) {
+      const spmLevelArray = ["c", "b", "a"];
+      let dom = event.target;
+      if (dom.tagName !== "BUTTON") {
+        return;
+      }
+      const spmArray = [];
+      for (let i = 0; i < spmLevelArray.length; i++) {
+        const key = spmLevelArray[i];
+        spmArray.unshift(dom.dataset["spm" + key]);
+        const spmLevel = spmLevelArray[i + 1];
+        if (!spmLevel) {
+          break;
+        }
+        dom = this.getParents(dom, spmLevel);
+        if (!dom) {
+          break;
+        }
+      }
+      this.spmText = spmArray.join(".");
+    },
+    getParents(dom, spmLevel) {
+      const parentElement = dom.parentElement;
+      if (parentElement.tagName === "BODY") {
+        return;
+      }
+      if (parentElement.dataset["spm" + spmLevel]) {
+        return parentElement;
+      }
+      return this.getParents(parentElement, spmLevel);
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

tests/unit/example.spec.js

@@ -1,21 +1,21 @@
-import { shallowMount, mount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue';
-import { warn } from 'vue';
+import { shallowMount, mount } from "@vue/test-utils";
+import HelloWorld from "@/components/HelloWorld.vue";
+import { warn } from "vue";
 
-jest.setTimeout(10000)
-describe('HelloWorld.vue', () => {
-  it('校验第一个按钮的spm是否为aa.bb.cc', async () => {
+jest.setTimeout(10000);
+describe("HelloWorld.vue", () => {
+  it("校验第一个按钮的spm是否为aa.bb.cc", async () => {
     const wrapper = shallowMount(HelloWorld, { attachTo: document.body });
-    const button = wrapper.findAll('button');
-    await button[0].trigger('click');
-    expect(wrapper.vm.spmText).toMatch('aa.bb.cc');
-  })
-})
-describe('HelloWorld.vue', () => {
-  it('校验第一个按钮的spm是否为aa.dd.ff', async () => {
-    const wrapper = shallowMount(HelloWorld, { attachTo: document.body })
-    const button = wrapper.findAll('button')
-    await button[1].trigger('click')
-    expect(wrapper.vm.spmText).toMatch('aa.dd.ff')
-  })
-})
+    const button = wrapper.findAll("button");
+    await button[0].trigger("click");
+    expect(wrapper.vm.spmText).toMatch("aa.bb.qq");
+  });
+});
+describe("HelloWorld.vue", () => {
+  it("校验第二个按钮的spm是否为aa.dd.pp", async () => {
+    const wrapper = shallowMount(HelloWorld, { attachTo: document.body });
+    const button = wrapper.findAll("button");
+    await button[1].trigger("click");
+    expect(wrapper.vm.spmText).toMatch("aa.cc.pp");
+  });
+});