您的位置：首页 > Web前端 > JavaScript

JavaScript设计模式系列02_工厂模式做的创建HTML标签

2018-01-10 19:55 369 查看

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
</html>
<script type="text/javascript">

let htmlFactory={

};
htmlFactory.createDom=function (tagName,obj) {
let dom=document.createElement(tagName);
for(let key in obj){
//if(typeof obj[key] == "object"){//
if(key=="style"){//
for(let subKey in obj[key]){//循环style里的每个属性
dom[key][subKey] = obj[key][subKey];
}
}else{
dom[key] = obj[key];
}
}
return dom;
};

htmlFactory.img = function (obj) {
return  this.createDom("img",obj);
}

htmlFactory.input = function (obj) {
return  this.createDom("input",obj);
}

window.onload = function () {
let dImg = htmlFactory.img({"src":"img/bg.jpg","alt":"这是一个美女","style":{
"width":"100px",
"height":"200px"
}});
document.body.appendChild(dImg);
let dInput = htmlFactory.input({"type":"text","value":"请输入用户名"});
document.body.appendChild(dInput);
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript web前端开发 web应用设计模式工厂模式

相关文章推荐

新的分享

章节导航