模块封装功能描述
- 封装好基本模块,想使用可以创建实例化对象后调用
- 模块具有对应的js功能,使用时只需要改变其css样式即可
实现效果
模块封装实现步骤
1. 准备阶段
理解构造函数,原型和异常的概念
构造函数,原型
//创建
const 函数名(首字母大写)=function(ele){ //创建构造函数,内部放公用的自定义属性
this.ele=ele
}
函数名.prototype.方法名=function(){ //创建自定义方法,用原型创建
方法体
}
//调用
const obj=new 函数名(ele) //先创建实例化对象,在调用方法
obj.方法名()
异常
代码 | 含义 |
---|---|
try{内容} | 放可能出错的内容,可配合catch将异常打印出来 |
catch(对象){内容} | 对象存储的为异常语句,发现异常后不停止运行 |
throw new Error(‘语句’) | 抛出异常语句,使用后停止运行 |
finally{语句} | 无论是否有异常,都会执行,throw也不会停止finally运行 |
html框架
<button id="delete">删除</button>
<button id="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示 <i>x</i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
2. 创建模块
创建构造函数
const Modal = function (title = '', message = '') { //设置默认值,防止信息变为undefined
this.title = title
this.message = message
}
用原型创建自定义方法
Modal.prototype.open = function () {
if (this.title == '' || this.message == '') {
throw new Error('参数不完整')
} else {
const modal = document.querySelector('.modal')
!modal || modal.remove() //判断当前页面是否存在modal,防止多次渲染
const div = document.createElement('div')
div.className = 'modal'
const content = `<div class="header">${this.title}<i>x</i></div>
<div class="body">${this.message}</div>`
div.innerHTML = content
document.body.appendChild(div)
document.querySelector('.header i').addEventListener('click', () => {
div.remove() //点击x号移除
})
}
}
判断输入内容,如果为空,则抛出异常
if (this.title == '' || this.message == '') {
throw new Error('参数不完整')
}
3.引用模块
创建实例化对象
const a = new Modal()
const b = new Modal('登录权限', '您没有登录权限操作')
创建点击事件,引用方法
document.querySelector('#delete').addEventListener('click', () => {
a.open()
})
document.querySelector('#login').addEventListener('click', () => {
b.open()
})
完整实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>面向对象封装消息提示</title>
<style>
.modal {
width: 300px;
min-height: 100px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
position: fixed;
z-index: 999;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #fff;
}
.modal .header {
line-height: 40px;
padding: 0 10px;
position: relative;
font-size: 20px;
}
.modal .header i {
font-style: normal;
color: #999;
position: absolute;
right: 15px;
top: -2px;
cursor: pointer;
}
.modal .body {
text-align: center;
padding: 10px;
}
.modal .footer {
display: flex;
justify-content: flex-end;
padding: 10px;
}
.modal .footer a {
padding: 3px 8px;
background: #ccc;
text-decoration: none;
color: #fff;
border-radius: 2px;
margin-right: 10px;
font-size: 14px;
}
.modal .footer a.submit {
background-color: #369;
}
</style>
</head>
<body>
<button id="delete">删除</button>
<button id="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示 <i>x</i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
<script>
const Modal = function (title = '', message = '') {
this.title = title
this.message = message
}
Modal.prototype.open = function () {
if (this.title == '' || this.message == '') {
throw new Error('参数不完整')
} else {
const modal = document.querySelector('.modal')
!modal || modal.remove()
const div = document.createElement('div')
div.className = 'modal'
const content = `<div class="header">${this.title}<i>x</i></div>
<div class="body">${this.message}</div>`
div.innerHTML = content
document.body.appendChild(div)
document.querySelector('.header i').addEventListener('click', () => {
div.remove()
})
}
}
const a = new Modal()
const b = new Modal('登录权限', '您没有登录权限操作')
document.querySelector('#delete').addEventListener('click', () => {
a.open()
})
document.querySelector('#login').addEventListener('click', () => {
b.open()
})
</script>
</body>
</html>