Browse Source

快速构建dom元素的快捷js创建

kindring 3 years ago
parent
commit
c0b647cba8
2 changed files with 56 additions and 0 deletions
  1. 48 0
      js/quickDom.js
  2. 8 0
      js/封装map.js

+ 48 - 0
js/quickDom.js

@@ -0,0 +1,48 @@
+/*
+ * @Description: 通过js快速构建原生dom元素
+ * @Autor: kindring
+ * @Date: 2021-10-12 17:16:30
+ * @LastEditors: kindring
+ * @LastEditTime: 2021-10-12 18:02:44
+ * @LastDescript: 
+ */
+
+let domTree = {
+    tag: 'div',
+    attr: [
+        { name: 15 }
+    ],
+    childred: [{
+        tag: 'img',
+        attr: {
+            src: '155'
+        }
+    }, ]
+}
+class Dom {
+    construction(domTree) {
+        this.domTree = domTree
+    }
+    render(obj) {
+        let tag = obj.tag || 'div'
+        let el = document.createElement(tag)
+        Object.keys[obj.attr].forEach(_key => {
+            let _keyString = obj.attr[_key]
+            if (_keyString == '') {
+
+            }
+            el.setAttribute(_key, _keyString);
+        })
+        obj.childred.forEach(child => {
+
+            el.appendChild(this.render(child))
+        })
+        return el
+    }
+    create() {
+        return this.render(this.domTree)
+    }
+}
+let d = new Dom(domTree)
+
+console.log(d.create);

+ 8 - 0
js/封装map.js

@@ -0,0 +1,8 @@
+/*
+ * @Description: 基于高德封装map
+ * @Autor: kindring
+ * @Date: 2021-10-12 17:05:53
+ * @LastEditors: kindring
+ * @LastEditTime: 2021-10-12 17:05:53
+ * @LastDescript: 
+ */