@whitesev/domutils 1.9.0 → 1.9.2

package/dist/index.umd.js

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMUtils = factory());
 })(this, (function () { 'use strict';
 
-  const version = "1.9.0";
+  const version = "1.9.2";
 
   class WindowApi {
       /** 默认的配置 */
@@ -1710,7 +1710,7 @@
                       }
                       for (const handler of handlers) {
                           $elItem.removeEventListener(eventName, handler.handlerCallBack, {
-                              capture: handler["option"]["capture"],
+                              capture: handler.option.capture,
                           });
                       }
                       const events = Reflect.get($elItem, symbolItem);
@@ -1724,36 +1724,6 @@
           // 异步回调
           let resolve = void 0;
           const that = this;
-          /**
-           * 检测文档是否加载完毕
-           */
-          function checkDOMReadyState() {
-              try {
-                  if (that.windowApi.document.readyState === "complete" ||
-                      (that.windowApi.document.readyState !== "loading" &&
-                          !that.windowApi.document.documentElement.doScroll)) {
-                      return true;
-                  }
-                  else {
-                      return false;
-                  }
-              }
-              catch {
-                  return false;
-              }
-          }
-          /**
-           * 成功加载完毕后触发的回调函数
-           */
-          function completed() {
-              removeDomReadyListener();
-              if (typeof callback === "function") {
-                  callback();
-              }
-              if (typeof resolve === "function") {
-                  resolve();
-              }
-          }
           /**
            * 监听目标
            */
@@ -1761,52 +1731,90 @@
               {
                   target: that.windowApi.document,
                   eventType: "DOMContentLoaded",
-                  callback: completed,
+                  callback: () => {
+                      ReadyChecker.completed();
+                  },
               },
               {
                   target: that.windowApi.window,
                   eventType: "load",
-                  callback: completed,
+                  callback: () => {
+                      ReadyChecker.completed();
+                  },
               },
           ];
-          /**
-           * 添加监听
-           */
-          function addDomReadyListener() {
-              for (const item of listenTargetList) {
-                  that.on(item.target, item.eventType, item.callback);
-              }
-          }
-          /**
-           * 移除监听
-           */
-          function removeDomReadyListener() {
-              for (const item of listenTargetList) {
-                  that.off(item.target, item.eventType, item.callback);
-              }
-          }
-          /**
-           * 执行检查
-           */
-          function check() {
-              if (checkDOMReadyState()) {
-                  /* 检查document状态 */
-                  setTimeout(completed, 0);
-              }
-              else {
-                  /* 添加监听 */
-                  addDomReadyListener();
-              }
-          }
-          if (args.length === 0) {
-              return new Promise((__resolve__) => {
-                  resolve = __resolve__;
-                  check();
-              });
-          }
-          else {
-              check();
-          }
+          const ReadyChecker = {
+              init() {
+                  if (args.length === 0) {
+                      return new Promise((__resolve__) => {
+                          resolve = __resolve__;
+                          ReadyChecker.check();
+                      });
+                  }
+                  else {
+                      ReadyChecker.check();
+                  }
+              },
+              check() {
+                  if (ReadyChecker.isReady()) {
+                      /* 检查document状态 */
+                      setTimeout(() => {
+                          ReadyChecker.completed();
+                      }, 0);
+                  }
+                  else {
+                      /* 添加监听 */
+                      ReadyChecker.onCompleted();
+                  }
+              },
+              /**
+               * 检测文档是否加载完毕
+               */
+              isReady() {
+                  try {
+                      if (that.windowApi.document.readyState === "complete" ||
+                          // @ts-expect-error
+                          (that.windowApi.document.readyState !== "loading" && !that.windowApi.document.documentElement.doScroll)) {
+                          return true;
+                      }
+                      else {
+                          return false;
+                      }
+                  }
+                  catch {
+                      return false;
+                  }
+              },
+              /**
+               * 成功加载完毕后触发的回调函数
+               */
+              completed() {
+                  ReadyChecker.offCompleted();
+                  if (typeof callback === "function") {
+                      callback();
+                  }
+                  if (typeof resolve === "function") {
+                      resolve();
+                  }
+              },
+              /**
+               * 添加监听
+               */
+              onCompleted() {
+                  for (const item of listenTargetList) {
+                      that.on(item.target, item.eventType, item.callback);
+                  }
+              },
+              /**
+               * 移除监听
+               */
+              offCompleted() {
+                  for (const item of listenTargetList) {
+                      that.off(item.target, item.eventType, item.callback);
+                  }
+              },
+          };
+          return ReadyChecker.init();
       }
       /**
        * 主动触发事件
@@ -3581,6 +3589,41 @@
               return parseHTMLByCreateDom();
           }
       }
+      /**
+       * 将字符串转为Element元素数组
+       * @param html
+       * @param useParser 是否使用DOMParser来生成元素，有些时候通过DOMParser生成的元素有点问题
+       * + true 使用DOMPraser来转换字符串
+       * + false （默认）创建一个div，里面放入字符串，然后提取childNodes
+       * @example
+       * // 将字符串转为Element元素数组
+       * DOMUtils.toElements("<a href='xxxx'></a>")
+       * > [<a href="xxxx"></a>]
+       * @example
+       * // 使用DOMParser将字符串转为Element元素数组
+       * DOMUtils.toElements("<a href='xxxx'></a>",true)
+       * > [<a href="xxxx"></a>]
+       */
+      toElements(html, useParser = false) {
+          const that = this;
+          // 去除html前后的空格
+          html = html.trim();
+          function parseHTMLByDOMParser() {
+              const parser = new DOMParser();
+              return Array.from(parser.parseFromString(html, "text/html").body.childNodes);
+          }
+          function parseHTMLByCreateDom() {
+              const $el = that.windowApi.document.createElement("div");
+              that.html($el, html);
+              return Array.from($el.childNodes);
+          }
+          if (useParser) {
+              return parseHTMLByDOMParser();
+          }
+          else {
+              return parseHTMLByCreateDom();
+          }
+      }
       /**
        * 序列化表单元素
        * @param $form 表单元素
@@ -3589,26 +3632,29 @@
        * > xxx=xxx&aaa=
        */
       serialize($form) {
+          if (!($form instanceof HTMLFormElement)) {
+              throw new TypeError("DOMUtils.serialize 参数必须是HTMLFormElement");
+          }
           const elements = $form.elements;
           const serializedArray = [];
-          for (let i = 0; i < elements.length; i++) {
-              const element = elements[i];
-              if (element.name &&
-                  !element.disabled &&
-                  (element.checked ||
-                      ["text", "hidden", "password", "textarea", "select-one", "select-multiple"].includes(element.type))) {
-                  if (element.type === "select-multiple") {
-                      for (let j = 0; j < element.options.length; j++) {
-                          if (element.options[j].selected) {
+          for (let index = 0; index < elements.length; index++) {
+              const $el = elements[index];
+              if ($el.name &&
+                  !$el.disabled &&
+                  ($el.checked ||
+                      ["text", "hidden", "password", "textarea", "select-one", "select-multiple"].includes($el.type))) {
+                  if ($el.type === "select-multiple") {
+                      for (let j = 0; j < $el.options.length; j++) {
+                          if ($el.options[j].selected) {
                               serializedArray.push({
-                                  name: element.name,
-                                  value: element.options[j].value,
+                                  name: $el.name,
+                                  value: $el.options[j].value,
                               });
                           }
                       }
                   }
                   else {
-                      serializedArray.push({ name: element.name, value: element.value });
+                      serializedArray.push({ name: $el.name, value: $el.value });
                   }
               }
           }
@@ -3924,10 +3970,6 @@
       }
   }
   const domUtils = new DOMUtils();
-  domUtils.emit(document, "test");
-  domUtils.emit(document, "click");
-  domUtils.emit(document, ["test", "click"]);
-  domUtils.emit(document, ["test", "click"], true);
 
   return domUtils;