学习记录-js进阶-模块封装

模块封装功能描述

  1. 封装好基本模块,想使用可以创建实例化对象后调用
  2. 模块具有对应的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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值