第一个面向对象设计模式demo-弹窗

最新推荐文章于 2020-12-20 18:06:26 发布

「已注销」

最新推荐文章于 2020-12-20 18:06:26 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/wulishelley/article/details/53009013

js 专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>城市公交车-享元模式(弹框)-结构设计模式</title>
<style>
*{margin:0;padding:0;}
.dialog{position:fixed;left:0;right:0;top:0;bottom:0;display:block;width:100%;height:100%;border:0;}
.dialog .cover{
width:100%;
height:100%;
background:rgba(0,0,0,.4);
}
.dialog2 .cover{
background:rgba(255,0,0,.3);
}
.dialog .dialog-body{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:400px;
height:180px;
background:#ffffff;
border-radius:4px;
border:1px solid #f2f2f2;
text-align: center;
}
.dialog-body .hint-text{text-align: center;color:#333333;}
.dialog-body .hint-text.normal{font-size:30px;padding:40px 0;}
.dialog-body .hint-text.small{font-size:14px;padding:20px 0;}
.dialog-body .inpt{-webkit-appearance:none;border:1px solid #dddddd;outline:none;width:195px;margin:0 100px 30px;height:30px;line-height: 30px;padding-left:5px;font-size:16px;color:#333333;}
.dialog-body .inpt::-webkit-input-placeholder{color:#666666;}
.dialog-body .btn{-webkit-appearance:none;border:0;outline:none;font-size:16px;color:#ffffff;background:orange;padding:8px 15px;border-radius: 4px;border:1px solid darkorange;cursor: pointer;}
.dialog-body .btn-ok{background:darkred;border-color:darkred;}
.dialog-body .btn-cancel{background:lightgray;border-color: gray;}
.dialog-body .btn:nth-child(n){margin-left:20px;}
.dialog-body .btn:nth-of-type(1){margin-left:0;}
</style>
</head>
<body>
<script>
/*享元模式(Flyweight)。避免对象（动作）间有相同的冗余内容，抽取出来
找准内部状态（数据与方法），外部状态（数据和方法）
*/
//享元模式和组合模式结合
(function(){
function extendClass(subClass,superClass){
var F = function(){};
F.prototype = superClass.prototype;
var P = function(){};
P.prototype = new F();
P.constructor = subClass;
subClass.prototype = P;
}
//基础类，（组合模式）
function Basic(){
this.element = null;

this.init();
}
Basic.prototype.init = function(){
throw new Error("请重写该方法");
}
Basic.prototype.getElement = function(){
throw new Error("请重写该方法");
}

//内部状态公有部分数据和方法
var Flyweight =function (id,classname){
Basic.call(this);
this.id = id;
this.classname = classname||"";

this.init();
}
extendClass(Flyweight,Basic);
Flyweight.prototype.init = function(){
this.element= document.createElement("dialog");
this.element.id = this.id;
this.element.className = "dialog "+this.classname;
var cover = document.createElement("div");
cover.className = "cover";
this.element.appendChild(cover);
var dialogBody = document.createElement("div");
dialogBody.className = "dialog-body";
this.element.appendChild(dialogBody);

}
Flyweight.prototype.addBodyChild = function(child){
this.element.children[1].appendChild(child);
return this;
}
Flyweight.prototype.getElement = function(){
return this.element;
}
Flyweight.prototype.show = function(){
this.element.style.display = "block";
}
Flyweight.prototype.hide = function(){
this.element.style.display = "none";
}
//title的提示文字类
function Title(id,classname,text){
Basic.call(this);
this.text = text||"";
this.id = id;
this.classname = classname||"";

this.init();
}
extendClass(Title,Basic);
Title.prototype.init = function(){
this.element = document.createElement("h3");
this.element.id = this.id;
this.element.innerHTML = this.text;
this.element.className = "hint-text "+this.classname;
}
Title.prototype.getElement = function(){
return this.element;
};
//按钮类
function Btn(id,classname,text){
Basic.call(this);
this.id = id;
this.classname = classname||"";
this.text = text ||"";

this.init();
}
extendClass(Btn,Basic);
Btn.prototype.init = function(){
this.element = document.createElement("button");
this.element.setAttribute("id",this.id);
this.element.innerHTML = this.text;
this.element.className = "btn "+this.classname;
}
Btn.prototype.getElement = function(){
return this.element;
}
//按钮类
function Inpt(id,classname,placeholder){
Basic.call(this);
this.id = id;
this.classname = classname||"";
this.placeholder = placeholder||"";

this.init();
}
extendClass(Inpt,Basic);
Inpt.prototype.init = function(){
this.element = document.createElement("input");
this.element.id = this.id;
this.element.placeholder = this.placeholder;
this.element.className = this.classname;
}
Inpt.prototype.getElement = function(){
return this.element;
}

//测试代码一
/*var fl = new Flyweight("dialog1","dialog");
fl.addBodyChild(
new Title("t1","normal","确认删除吗").getElement()
).addBodyChild(
new Btn("ok","btn-ok","确定").getElement()
).addBodyChild(
new Btn("cancel","btn-cancel","取消").getElement()
)*/

//测试代码二
var fl = new Flyweight("dialog2","dialog2");
fl.addBodyChild(
new Title("t1","small","确认删除吗").getElement()
).addBodyChild(
new Inpt("inpt1","inpt","输入你的用户名").getElement()
).addBodyChild(
new Btn("ok","btn-ok","确定").getElement()
).addBodyChild(
new Btn("cancel","btn-cancel","取消").getElement()
)
//拼接dialog到页面的body元素上
document.body.appendChild(fl.getElement());
}());
</script>
</body>
</html>