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

原创于 2025-03-19 14:16:09 发布 · 383 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #javascript #开发语言

模块封装功能描述

封装好基本模块，想使用可以创建实例化对象后调用
模块具有对应的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>