77 lines
1.8 KiB
JavaScript
77 lines
1.8 KiB
JavaScript
|
/**
|
||
|
|
* 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 }))
|
||
|
|
// }]
|
||
|
|
// }
|