@whitesev/domutils 1.8.9 → 1.9.1

package/dist/index.system.js

@@ -3,7 +3,7 @@ System.register('DOMUtils', [], (function (exports) {
   return {
     execute: (function () {
 
-      const version = "1.8.9";
+      const version = "1.9.1";
 
       class WindowApi {
           /** 默认的配置 */
@@ -314,9 +314,10 @@ System.register('DOMUtils', [], (function (exports) {
            */
           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, "");
@@ -360,6 +361,10 @@ System.register('DOMUtils', [], (function (exports) {
           }
           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, "");
@@ -1444,17 +1449,17 @@ System.register('DOMUtils', [], (function (exports) {
               /**
                * 如果是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都是子元素选择器的元素
@@ -1502,10 +1507,10 @@ System.register('DOMUtils', [], (function (exports) {
                           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事件 */
@@ -1513,8 +1518,8 @@ System.register('DOMUtils', [], (function (exports) {
                       elementEvents[eventName].push({
                           selector: selectorList,
                           option: listenerOption,
-                          callback: domUtilsEventCallBack,
-                          originCallBack: listenerCallBack,
+                          handlerCallBack: handlerCallBack,
+                          callback: listenerCallBack,
                       });
                       /* 覆盖事件 */
                       Reflect.set(elementItem, GlobalData.domEventSymbol, elementEvents);
@@ -1530,11 +1535,11 @@ System.register('DOMUtils', [], (function (exports) {
                   },
                   /**
                    * 主动触发事件
-                   * @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);
                   },
               };
           }
@@ -1630,7 +1635,7 @@ System.register('DOMUtils', [], (function (exports) {
                       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;
                           }
@@ -1647,7 +1652,7 @@ System.register('DOMUtils', [], (function (exports) {
                               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);
@@ -1703,8 +1708,8 @@ System.register('DOMUtils', [], (function (exports) {
                               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);
@@ -1718,36 +1723,6 @@ System.register('DOMUtils', [], (function (exports) {
               // 异步回调
               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();
-                  }
-              }
               /**
                * 监听目标
                */
@@ -1755,59 +1730,97 @@ System.register('DOMUtils', [], (function (exports) {
                   {
                       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")
@@ -1816,7 +1829,7 @@ System.register('DOMUtils', [], (function (exports) {
            * 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);
@@ -1843,25 +1856,25 @@ System.register('DOMUtils', [], (function (exports) {
                   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 {
@@ -2347,14 +2360,14 @@ System.register('DOMUtils', [], (function (exports) {
                       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;
                       /* 判定为双击 */
@@ -2371,7 +2384,7 @@ System.register('DOMUtils', [], (function (exports) {
                           });
                       }, checkClickTime);
                       isDoubleClick = true;
-                      $click = selectorTarget;
+                      $click = $selector;
                   }
               }, options);
               return {
@@ -3575,6 +3588,41 @@ System.register('DOMUtils', [], (function (exports) {
                   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 表单元素
@@ -3583,26 +3631,29 @@ System.register('DOMUtils', [], (function (exports) {
            * > 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 });
                       }
                   }
               }