@whitesev/domutils 1.9.0 → 1.9.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-const version = "1.9.0";
+const version = "1.9.2";
 
 class WindowApi {
     /** 默认的配置 */
@@ -1704,7 +1704,7 @@ class ElementEvent extends ElementAnimate {
                     }
                     for (const handler of handlers) {
                         $elItem.removeEventListener(eventName, handler.handlerCallBack, {
-                            capture: handler["option"]["capture"],
+                            capture: handler.option.capture,
                         });
                     }
                     const events = Reflect.get($elItem, symbolItem);
@@ -1718,36 +1718,6 @@ class ElementEvent extends ElementAnimate {
         // 异步回调
         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,52 +1725,90 @@ class ElementEvent extends ElementAnimate {
             {
                 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();
     }
     /**
      * 主动触发事件
@@ -3575,6 +3583,41 @@ class DOMUtils extends ElementHandler {
             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 +3626,29 @@ class DOMUtils extends ElementHandler {
      * > 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 });
                 }
             }
         }
@@ -3918,10 +3964,6 @@ class DOMUtils extends ElementHandler {
     }
 }
 const domUtils = new DOMUtils();
-domUtils.emit(document, "test");
-domUtils.emit(document, "click");
-domUtils.emit(document, ["test", "click"]);
-domUtils.emit(document, ["test", "click"], true);
 
 export { domUtils as default };
 //# sourceMappingURL=index.esm.js.map