feat: 完善挂载机制，避免重复挂载

61790964 · Allen Bai · 5404157d · 61790964 · 61790964
Commit 61790964 authored Feb 01, 2021 by Allen Bai
Hide whitespace changes
Inline Side-by-side

Showing with 97 additions and 13 deletions

h5_customize.html example/inHTML/h5_customize.html +48 -0

index.ts src/index.ts +49 -13

No files found.
--- a/example/inHTML/h5_customize.html
+++ b/example/inHTML/h5_customize.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>线上页面引入方法</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    html,
+    body {
+      background-color: rgb(35, 155, 86);
+    }
+  </style>
+</head>
+
+<body>
+  <div style="height: 200vh;border:5px slateblue solid"></div>
+  <script>
+    // 百奇商品详情页建议用这个
+    (function (e) {
+      const IPCFooterConfig = {
+        dom: '.detail-main',
+        footerStyles: {
+          position: 'static',
+          margin: '8px 0 60px 0'
+        }
+      }
+      function loadScript() {
+        var r = document.createElement("script");
+        (r.async = !0),
+          (r.src = "//yun.tuisnake.com/ipc-footer-sdk/ipc-footer-sdk.js"),
+          (r.crossOrigin = "anonymous"),
+          (r.onload = function () {
+            window.__TUIA_IPC_HELPER__ && window.__TUIA_IPC_HELPER__.mountIPCFooter(IPCFooterConfig)
+          }),
+          document.body && document.body.appendChild(r);
+      };
+      loadScript()
+    })(window);
+  </script>
+</body>
+
+</html>
--- a/src/index.ts
+++ b/src/index.ts
@@ -59,9 +59,15 @@ function getIPCByDomain(domain: string) {
 }

 type IPCFooterOptions = {
+  /** 自定义域名，默认自动从url取 */
  domain?: string
-  dom?: HTMLElement
+  /** 要挂载的dom节点，默认为body */
+  dom?: HTMLElement | string
+  /** 延迟几秒渲染，默认300毫秒 */
+  delay?: number
+  /** 页脚样式 */
  footerStyles?: Optional<CSSStyleDeclaration>
+  /** 页脚内链接的样式 */
  boardStyles?: Optional<CSSStyleDeclaration>
 }

@@ -94,11 +100,19 @@ const defaultBoardStyles: Optional<CSSStyleDeclaration> = {
  fontSize: '12px'
 }

+let currentTaskId = null
+
 /**
 * 挂载
 * @param {IPCFooterOptions} opts
 */
 async function mountIPCFooter(opts: IPCFooterOptions = {}) {
+  // 如果已经挂载了一个IPCFooter 就先卸载掉，避免重复挂载
+  unmount()
+  // 当前任务的id
+  const taskId = new Date().getTime()
+  currentTaskId = taskId
+
  let IPCNumberString = ''
  try {
    IPCNumberString = (await getIPCByDomain(opts.domain || location.host)) as string
@@ -108,7 +122,6 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) {

  const IPCFooter = document.createElement('div')
  const IPCBoard = document.createElement('a')
-  const targetDom = opts.dom || document.querySelector('body')
  IPCFooter.id = '__IPC_footer__'
  IPCBoard.id = '__IPC_board__'
  addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) })
@@ -116,7 +129,39 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) {
  IPCBoard.innerText = (IPCNumberString as string) || 'IPC备-'
  IPCBoard.href = 'https://beian.miit.gov.cn/#/Integrated/index'
  IPCFooter.appendChild(IPCBoard)
-  targetDom.appendChild(IPCFooter)
+
+  let tryCount = 6
+
+  function __mount__() {
+    let targetDom
+    if (opts.dom === undefined || opts.dom === null) {
+      targetDom = document.querySelector('body')
+    } else if (typeof opts.dom === 'string') {
+      targetDom = document.querySelector(targetDom)
+    } else {
+      targetDom = opts.dom
+    }
+
+    if (!targetDom) {
+      // 可能目标dom节点还没挂载
+      if (tryCount > 0) {
+        tryCount--
+        return setTimeout(__mount__, 500)
+      }
+      return
+    }
+
+    // 当taskId和currentTaskId不相等时，说明有新的挂载任务进行中，当前任务就abort掉
+    if (taskId !== currentTaskId) {
+      return
+    }
+
+    setTimeout(() => {
+      targetDom.appendChild(IPCFooter)
+      currentTaskId = null
+    }, opts.delay || 300)
+  }
+  __mount__()
 }

 /**
@@ -135,16 +180,7 @@ function unmount() {
 * @param {IPCFooterOptions} opts
 */
 function remount(opts: IPCFooterOptions = {}) {
-  let target = document.getElementById('__IPC_footer__')
-  if (target) {
-    unmount()
-    mountIPCFooter(opts)
-  } else {
-    setTimeout(() => {
-      unmount()
-      mountIPCFooter(opts)
-    }, 800)
-  }
+  mountIPCFooter(opts)
 }

 export default { getIPCByDomain, mountIPCFooter, unmount, remount }