|
@@ -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);
|