前言
我们在开发过程中,会用到很多已经封装好的类,来简化我们的工程------面向对象编程思想
本文介绍一个作者自己开发的一个类,因为是我接触前端以来开发的第一个类,具有纪念意义,而且功能挺普遍也很灵活,所以想着发个博客给大家分享一下。
代入切身体会一个类的开发
1,面向功能
我们此次开发的是一个类似于原生alert()函数的弹窗信息,但是原生的功能很有限,我们打算开发一个更灵活,效果更多的自定义弹窗。
网页自带的原生alert()弹窗:
我们开发新的弹窗,包括
"自定义标题title"
"自定义内容核心"
"确认"和"取消"两个不同的按钮对应两个不同的自定义"回调函数事件"

通过我们的设想,我们确定了基本功能,现在我们开发基本框架节点布局和样式。
2,构建布局
这是个比较简单的一个步骤,我们经过稍微分析,可以发现主要包括几个部分
1,主容器 box (容纳全部)
2,头部容器header (容纳 标题 和 关闭按钮)
3,主体容器:body (容纳核心内容)
4,尾部容器:tail (容纳 "确认"和"取消"两个按钮)
5,遮盖层:backdrop(用于启动弹窗后半透明遮挡网页部分,在视觉效果上将焦点集中于弹窗)
我们看代码:
html
<div class = "box">
<div class="head-box">
标题
<span class="head-icon">X</span>
</div>
<div class="body-box">
内容
</div>
<div class="foot-box-laolong">
<span class="if-ok">确定</span><span class="if-ok">取消</span>
</div>
</div>
其中我们为每个节点添加适合的样式,
这个不是我们本章的重点,我就直接给大家看我的css代码了
3,添加样式
样式中需要提的几个点有
transform: translate(-50%, -50%);
/*向左和向上移动自身50%的像素,正好用于抵消左上顶点定位到网页中央的偏差*/
align-items: center; /* 垂直居中 */
align-content: center /* 多行内容时的垂直居中 */
color: #dcfd1f;
text-indent: /* 首行缩进容器宽度的 5% */
z-index: 999;
/* 保证在大部分内容之上,但低于弹窗 */
css
.box-style {
width: 30%;
height: 20%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*向左和向上移动自身50%的像素,正好用于抵消左上顶点定位到网页中央的偏差*/
background-color: rgba(8, 113, 225, 0.483);
border-radius: 10px;
cursor: default;
z-index: 1000;
}
.head-box {
border-radius: 10px 10px 0 0;
width: 100%;
height: 20%;
background-color: rgba(8, 113, 225, 0.483);
font-size: 150%;
align-items: center;
/* 垂直居中 */
align-content: center;
/* 多行内容时的垂直居中 */
color: #dcfd1f;
text-indent: 5%;
/* 首行缩进容器宽度的 5% */
}
.head-icon {
border-radius: 10px;
margin-right: 0px;
height: 100%;
font-size: 130%;
font-weight: 800;
line-height: 100%;
width: 10%;
color: red;
text-align: center;
align-items: center;
/* 垂直居中 */
align-content: center;
/* 多行内容时的垂直居中 */
float: right;
}
.head-icon:hover {
cursor: pointer;
background-color: #494646;
color: yellow;
}
.body-box {
align-items: center;
/* 垂直居中 */
align-content: center;
/* 多行内容时的垂直居中 */
width: 100%;
height: 50%;
background-color: rgba(8, 113, 225, 0.483);
text-align: center;
color: rgb(250, 253, 253);
font-size: 200%;
border-bottom: 1px ridge rgb(1, 1, 1, 0.8);
border-top: 1px ridge rgb(1, 1, 1, 0.8);
}
.foot-box {
width: 100%;
height: 30%;
background-color: rgba(8, 113, 225, 0.483);
align-items: center;
/* 垂直居中 */
align-content: center;
/* 多行内容时的垂直居中 */
}
.if-ok {
display: inline-block;
height: 60%;
width: 20%;
background-color: #254281;
margin-left: 20%;
border-radius: 10px;
font-size: 150%;
line-height: 100%;
align-items: center;
/* 垂直居中 */
align-content: center;
/* 多行内容时的垂直居中 */
text-align: center;
color: rgba(164, 229, 233, 0.8)
}
.if-ok:hover {
background-color: #494646;
cursor: pointer;
color: yellow;
}
.back-drop {
position: fixed;
/* 固定定位,覆盖整个视口 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
/* 半透明黑色背景 */
z-index: 999;
/* 保证在大部分内容之上,但低于弹窗 */
}
4,实现功能
一,构造函数参数
首先定义一个类,包含两个字符串参数和两个回调函数参数
javascript
class NewMsgBox {
constructor(title = "", content = "", ok_fct, no_fct) {
this.title = title;
this.content = content;
this.ok_fct = ok_fct;
this.no_fct = no_fct;
}
}
二,create创键窗口div节点
我们需要两个窗口节点
窗口一:容纳弹窗所有部分
窗口二:用于外部的遮盖层
创建好节点后给其添加上写好的css样式
并且窗口一中要注册两个事件,
事件一:点击叉号关闭两个窗口
事件二:点击外部遮盖层关闭两个窗口
javascript
creatbox() {
this.newbox = document.createElement("div");
this.backdrop = document.createElement("div");
this.newbox.className = "box-style";
this.backdrop.className = "back-drop";
this.newbox.innerHTML = `
<div class="head-box">
${this.title}
<span class="head-icon">X</span>
</div>
<div class="body-box">
${this.content}
</div>
<div class="foot-box">
<span class="if-ok-laolong" id = "ok">确定</span><span class="if-ok" id = "no">取消</span>
</div>
`;
const closeBtn = this.newbox.querySelector(".head-icon");
closeBtn.addEventListener("click", () => {
this.closebox();
console.log("通过点击小红叉关闭窗口");
});
this.backdrop.addEventListener("click", (e) => {
e.stopPropagation(); //为了防止事件冒泡
this.closebox();
console.log("通过点击遮罩层关闭窗口");
});
}
三,调用打开窗口
open函数中要先创建窗口节点,才能后续调用,
并且使用document.body.appendChild将节点添加到DOM树上
并且为尾部两个按钮注册上按钮回调事件,点下制定按钮,回调运行指定函数。
javascript
open() {
this.creatbox();
document.body.appendChild(this.newbox);
document.body.appendChild(this.backdrop);
const btns = document.querySelectorAll(".if-ok");
btns.forEach(btnx => {
btnx.addEventListener("click", (e) => {
e.stopPropagation();//防止事件冒泡
if (btnx.id === "ok") {
this.ok_fct();
this.closebox();
}
else if (btnx.id === "no") {
this.no_fct();
this.closebox();
}
})
})
}
四,close子函数
用于需要关闭所有窗口的地方调用
javascript
closebox() {
this.newbox.remove();
this.backdrop.remove();
}
调用方法
自定义两个你想触发的回调函数(这里我以打印为例),
然后const yourmsgbox = new NewMsdBox()声明新类,其中四个参数
然后调用open()函数打开即可,
++你可以将open函数的调用注册到指定按钮或者事件上,这样即可实现自定义的提示和跳转++
=> 返回路径一:无动作
=>返回路径二:回调函数一
=>返回路径三:回调函数二
其中我把css文件和JavaScript文件全部封装好了,所以引用文件后调用即可
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="LaoLongMsgBoxStyle.css">
</head>
<body>
<script src="LaoLongMsgBoxClass.js"></script>
<script>
function fok() { console.log("点击了OK"); }//回调函数自定义为打印测试
function fno() { console.log("点击了no"); }
const yourmsgbox = new NewMsgBox("提示", "主信息测试中", fok, fno);
yourmsgbox.open();
</script>
</body>
</html>
封装文件和使用指南
(其中所有的样式名都加入了作者编码,防止外部调用重名函数导致的报错,按照规定调用即可)
LaoLongMsgBoxStyle.css
css
/*LaoLongMsgBoxStyle.css*/
.box-style-laolong {
width: 30%;
height: 20%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(8, 113, 225, 0.483);
border-radius: 10px;
cursor: default;
z-index: 1000;
}
.head-box-laolong {
border-radius: 10px 10px 0 0;
width: 100%;
height: 20%;
background-color: rgba(8, 113, 225, 0.483);
font-size: 150%;
align-items: center;
align-content: center;
color: #dcfd1f;
text-indent: 5%;
}
.head-icon-laolong {
border-radius: 10px;
margin-right: 0px;
height: 100%;
font-size: 130%;
font-weight: 800;
line-height: 100%;
width: 10%;
color: red;
text-align: center;
align-items: center;
align-content: center;
float: right;
}
.head-icon-laolong:hover {
cursor: pointer;
background-color: #494646;
color: yellow;
}
.body-box-laolong {
align-items: center;
align-content: center;
width: 100%;
height: 50%;
background-color: rgba(8, 113, 225, 0.483);
text-align: center;
color: rgb(250, 253, 253);
font-size: 200%;
border-bottom: 1px ridge rgb(1, 1, 1, 0.8);
border-top: 1px ridge rgb(1, 1, 1, 0.8);
}
.foot-box-laolong {
width: 100%;
height: 30%;
background-color: rgba(8, 113, 225, 0.483);
align-items: center;
align-content: center;
}
.if-ok-laolong {
display: inline-block;
height: 60%;
width: 20%;
background-color: #254281;
margin-left: 20%;
border-radius: 10px;
font-size: 150%;
line-height: 100%;
align-items: center;
align-content: center;
text-align: center;
color: rgba(164, 229, 233, 0.8)
}
.if-ok-laolong:hover {
background-color: #494646;
cursor: pointer;
color: yellow;
}
.back-drop-laolong {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
}
LaoLongMsgBoxClass.js
javascript
//LaoLongMsgBoxClass.js
class NewMsgBox {
constructor(title = "", content = "", ok_fct, no_fct) {
this.title = title;
this.content = content;
this.ok_fct = ok_fct;
this.no_fct = no_fct;
}
creatbox() {
this.newbox = document.createElement("div");
this.backdrop = document.createElement("div");
this.newbox.className = "box-style-laolong";
this.backdrop.className = "back-drop-laolong";
this.newbox.innerHTML = `
<div class="head-box-laolong">
${this.title}
<span class="head-icon-laolong">X</span>
</div>
<div class="body-box-laolong">
${this.content}
</div>
<div class="foot-box-laolong">
<span class="if-ok-laolong" id = "ok-laolong">确定</span><span class="if-ok-laolong" id = "no-laolong">取消</span>
</div>
`;
const closeBtn = this.newbox.querySelector(".head-icon-laolong");
closeBtn.addEventListener("click", () => {
this.closebox();
console.log("通过点击小红叉关闭窗口");
});
this.backdrop.addEventListener("click", (e) => {
e.stopPropagation();
this.closebox();
console.log("通过点击遮罩层关闭窗口");
});
}
open() {
this.creatbox();
document.body.appendChild(this.newbox);
document.body.appendChild(this.backdrop);
const btns = document.querySelectorAll(".if-ok-laolong");
btns.forEach(btnx => {
btnx.addEventListener("click", (e) => {
e.stopPropagation();
if (btnx.id === "ok-laolong") {
this.ok_fct();
this.closebox();
}
else if (btnx.id === "no-laolong") {
this.no_fct();
this.closebox();
}
})
})
}
closebox() {
this.newbox.remove();
this.backdrop.remove();
}
}
LaoLongMsgBoxHelp.txt
html
-----------------------------------------------------------------------------------
HELLO 欢迎使用"牢笼自定义信息交互弹窗"
调用方法后生成包含
自定义"标题" 自定义"内容" "确认"和"取消"点击后自定义不同的"回调函数"
点击"叉号"|"确认"|"取消"|"遮罩层"均可关闭弹窗
-----------------------------------------------------------------------------------
首先是两个外部文件的引入:(假设已下载外部文件与你的html文件相同根目录)
<head>中引入外部css样式
<link rel="stylesheet" href="LaoLongMsgBoxStyle.css">
</head>
<script>内顶端引入外部JavaScript交互
<script src="LaoLongMsgBoxClass.js"></script>
......下面是你的script内容
</script>
-----------------------------------------------------------------------------------
此类(NemMsgBox)的具体调用方法
const yourmsgbox = new NewMsgBox("提示", "主信息测试中", fok, fno);
其中
类名:NewMsgBox ;
参数一:"提示"; (解释:生成弹窗的标题)
参数二:"你未获得当前权限"; (解释:生成弹窗的主内容)
参数三:fok; (解释:点击弹窗中的"确定"后运行的回调函数fok,函数由用户自定义)
参数四:fno; (解释:点击弹窗中的"取消"后运行的回调函数fno,函数由用户自定义)
调用使用 yourmsgbox.open();即可。
-----------------------------------------------------------------------------------
完整使用案例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="LaoLongMsgBoxStyle.css">
</head>
<body>
<script src="LaoLongMsgBoxClass.js"></script>
<script>
function fok() { console.log("点击了OK"); }//回调函数自定义为打印测试
function fno() { console.log("点击了no"); }
const yourmsgbox = new NewMsgBox("提示", "主信息测试中", fok, fno);
yourmsgbox.open();
</script>
</body>
</html>
-----------------------------------------------------------------------------------
文件链接
通过网盘分享的文件:牢笼双回调自定义弹窗.zip
链接: https://pan.baidu.com/s/1bXPMPpeFda3ie1XSNBXy1A?pwd=LONG 提取码: LONG