init

Html-Javascript/移动端/DOMClass.js

@@ -0,0 +1,77 @@
+/**
+ * DOM 类
+ * 
+ * DOMObj 被抽象化的dom对象
+ * root   容器
+ * 
+ * */
+class DOMClass {
+    constructor(DOMObj, root) {
+        if (DOMObj) {
+            this.d = this.createDOM(DOMObj, root);
+        }
+    }
+    // 创建dom
+    createDOM = (DOMObj, root) => {
+        // 创建的 dom
+        let cDOM = document.createElement(DOMObj.el);
+        // 过滤非必要的操作
+        let filterArr = ["el", "elChildren"];
+
+        // 赋予属性
+        // cDOM.className = "xxx";
+        for (const key in DOMObj) {
+            if (!filterArr.includes(key)) {
+                // console.log(key);
+                cDOM[key] = DOMObj[key];
+
+                // cDOM.className = DOMObj.className;
+                // cDOM[key] //会解析 key 
+            }
+        }
+        // 赋予样式
+        for (const key in DOMObj.style) {
+            cDOM.style[key] = DOMObj.style[key];
+        }
+        // 递归
+        // 如果该盒子存在子盒子(多个或一个) 即创建子盒子 并丢进去
+        DOMObj.elChildren && DOMObj.elChildren.forEach(element => {
+            // 将 孩子 挨个传入 生成dom 并丢到 父盒子中
+            this.createDOM(element, cDOM);
+        });
+        // 如果给容器 就帮你放入
+        if (root) {
+            root.appendChild(cDOM);
+        }
+        return cDOM;
+    }
+}
+// 使用
+
+// 1. new DOMClass(option, root);
+
+
+// 2. let D = new DOMClass();
+// D.createDOM(option, root);
+
+
+
+// class N extends DOMClass {
+//     constructor() {
+//         super()
+//         this.createDOM()
+//     }
+// }
+
+
+
+// option 例子:
+// {
+//     el: "div",
+//     className: "top",
+//     elChildren: [{
+//         el: "div",
+//         className: "box-content",
+//         elChildren: dataLbt.map((ite) => ({ el: "img", src: ite.img }))
+//     }]
+// }