@whitesev/domutils 1.8.9 → 1.9.1

package/dist/index.amd.js

@@ -1,6 +1,6 @@
 define((function () { 'use strict';
 
-  const version = "1.8.9";
+  const version = "1.9.1";
 
   class WindowApi {
       /** 默认的配置 */
@@ -311,9 +311,10 @@ define((function () { 'use strict';
        */
       matches($el, selector) {
           selector = selector.trim();
-          if ($el == null) {
+          if ($el == null)
+              return false;
+          if ($el instanceof Document)
               return false;
-          }
           if (selector.match(/[^\s]{1}:empty$/gi)) {
               // empty 语法
               selector = selector.replace(/:empty$/gi, "");
@@ -357,6 +358,10 @@ define((function () { 'use strict';
       }
       closest($el, selector) {
           selector = selector.trim();
+          if ($el == null)
+              return null;
+          if ($el instanceof Document)
+              return null;
           if (selector.match(/[^\s]{1}:empty$/gi)) {
               // empty 语法
               selector = selector.replace(/:empty$/gi, "");
@@ -1441,17 +1446,17 @@ define((function () { 'use strict';
           /**
            * 如果是once，那么删除该监听和元素上的事件和监听
            */
-          function checkOptionOnceToRemoveEventListener() {
+          const checkOptionOnceToRemoveEventListener = () => {
               if (listenerOption.once) {
                   that.off(element, eventType, selector, callback, option);
               }
-          }
+          };
           $elList.forEach((elementItem) => {
               /**
                * 事件回调
                * @param event
                */
-              function domUtilsEventCallBack(event) {
+              const handlerCallBack = function (event) {
                   if (selectorList.length) {
                       /* 存在子元素选择器 */
                       // 这时候的this和target都是子元素选择器的元素
@@ -1499,10 +1504,10 @@ define((function () { 'use strict';
                       listenerCallBack.call(elementItem, event);
                       checkOptionOnceToRemoveEventListener();
                   }
-              }
+              };
               /* 遍历事件名设置元素事件 */
               eventTypeList.forEach((eventName) => {
-                  elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
+                  elementItem.addEventListener(eventName, handlerCallBack, listenerOption);
                   /* 获取对象上的事件 */
                   const elementEvents = Reflect.get(elementItem, GlobalData.domEventSymbol) || {};
                   /* 初始化对象上的xx事件 */
@@ -1510,8 +1515,8 @@ define((function () { 'use strict';
                   elementEvents[eventName].push({
                       selector: selectorList,
                       option: listenerOption,
-                      callback: domUtilsEventCallBack,
-                      originCallBack: listenerCallBack,
+                      handlerCallBack: handlerCallBack,
+                      callback: listenerCallBack,
                   });
                   /* 覆盖事件 */
                   Reflect.set(elementItem, GlobalData.domEventSymbol, elementEvents);
@@ -1527,11 +1532,11 @@ define((function () { 'use strict';
               },
               /**
                * 主动触发事件
-               * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-               * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+               * @param extraDetails 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
+               * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了$selector的没有值
                */
-              emit: (details, useDispatchToEmit) => {
-                  that.emit($elList, eventTypeList, details, useDispatchToEmit);
+              emit: (extraDetails, useDispatchToTriggerEvent) => {
+                  that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
               },
           };
       }
@@ -1627,7 +1632,7 @@ define((function () { 'use strict';
                   for (let index = 0; index < filterHandler.length; index++) {
                       const handler = filterHandler[index];
                       let flag = true;
-                      if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
+                      if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
                           // callback不同
                           flag = false;
                       }
@@ -1644,7 +1649,7 @@ define((function () { 'use strict';
                           flag = false;
                       }
                       if (flag || isRemoveAll) {
-                          $elItem.removeEventListener(eventName, handler.callback, handler.option);
+                          $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
                           const findIndex = handlers.findIndex((item) => item === handler);
                           if (findIndex !== -1) {
                               handlers.splice(findIndex, 1);
@@ -1700,8 +1705,8 @@ define((function () { 'use strict';
                           return;
                       }
                       for (const handler of handlers) {
-                          $elItem.removeEventListener(eventName, handler.callback, {
-                              capture: handler["option"]["capture"],
+                          $elItem.removeEventListener(eventName, handler.handlerCallBack, {
+                              capture: handler.option.capture,
                           });
                       }
                       const events = Reflect.get($elItem, symbolItem);
@@ -1715,36 +1720,6 @@ define((function () { 'use strict';
           // 异步回调
           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();
-              }
-          }
           /**
            * 监听目标
            */
@@ -1752,59 +1727,97 @@ define((function () { 'use strict';
               {
                   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();
       }
       /**
        * 主动触发事件
        * @param element 需要触发的元素|元素数组|window
        * @param eventType 需要触发的事件
-       * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-       * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+       * @param extraDetails 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
+       * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用通过.on监听的callback()，但是这种只有一个入参，如果使用$selector则没有值
        * @example
        * // 触发元素a.xx的click事件
        * DOMUtils.emit(document.querySelector("a.xx"),"click")
@@ -1813,7 +1826,7 @@ define((function () { 'use strict';
        * DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
        * DOMUtils.emit("a.xx",["click","tap","hover"])
        */
-      emit(element, eventType, details, useDispatchToEmit = true) {
+      emit(element, eventType, extraDetails, useDispatchToTriggerEvent = true) {
           const that = this;
           if (typeof element === "string") {
               element = that.selectorAll(element);
@@ -1840,25 +1853,25 @@ define((function () { 'use strict';
               const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
               eventTypeList.forEach((eventTypeItem) => {
                   let event = null;
-                  if (details && details instanceof Event) {
-                      event = details;
+                  if (extraDetails && extraDetails instanceof Event) {
+                      event = extraDetails;
                   }
                   else {
                       // 构造事件
                       event = new Event(eventTypeItem);
-                      if (details) {
-                          const detailKeys = Object.keys(details);
+                      if (typeof extraDetails === "object" && extraDetails != null) {
+                          const detailKeys = Object.keys(extraDetails);
                           detailKeys.forEach((keyName) => {
-                              const value = Reflect.get(details, keyName);
+                              const value = Reflect.get(extraDetails, keyName);
                               // 在event上添加属性
                               Reflect.set(event, keyName, value);
                           });
                       }
                   }
-                  if (useDispatchToEmit == false && eventTypeItem in elementEvents) {
+                  if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
                       // 直接调用监听的事件
                       elementEvents[eventTypeItem].forEach((eventsItem) => {
-                          eventsItem.callback(event);
+                          eventsItem.handlerCallBack(event);
                       });
                   }
                   else {
@@ -2344,14 +2357,14 @@ define((function () { 'use strict';
                   isDoubleClick: true,
               });
           }, options);
-          const touchEndListener = this.on($el, "pointerup", selector, (evt, selectorTarget) => {
+          const touchEndListener = this.on($el, "pointerup", selector, (evt, $selector) => {
               this.preventEvent(evt);
               if (evt.pointerType === "touch") {
                   isMobileTouch = true;
               }
               clearTimeout(timer);
               timer = void 0;
-              if (isDoubleClick && $click === selectorTarget) {
+              if (isDoubleClick && $click === $selector) {
                   isDoubleClick = false;
                   $click = null;
                   /* 判定为双击 */
@@ -2368,7 +2381,7 @@ define((function () { 'use strict';
                       });
                   }, checkClickTime);
                   isDoubleClick = true;
-                  $click = selectorTarget;
+                  $click = $selector;
               }
           }, options);
           return {
@@ -3572,6 +3585,41 @@ define((function () { 'use strict';
               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 表单元素
@@ -3580,26 +3628,29 @@ define((function () { 'use strict';
        * > 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 });
                   }
               }
           }