js进阶day3 综合案例（练习面向对象）

最新推荐文章于 2024-04-26 16:47:03 发布

learn 11233466

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量64

点赞数

分类专栏： js 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_52005267/article/details/130906471

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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;
      /* modal居中对齐 */
      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>

    // 封装一个小插件
    // 定义模态框构造函数 构造函数一般用this来赋值
    // 别忘了设置一个默认参数 空字符串
    function Modal(title = '', message = '') {
      // this.modalBox是一个dom对象
      // 创建了一个dom对象
      this.modalBox = document.createElement('div')
      this.modalBox.className = 'modal'
      // i中包裹着×
      this.modalBox.innerHTML = `
      <div class="modal">
        <div class="header">${title} <i>x</i></div>
        <div class="body">${message}</div>
      </div>
      `
    }
    // 所有模态框对象都有的方法
    // 当前模态框实例对象调用的open(点击删除或登录新new出来的)
    // 要给每个模态框的×添加事件 在显示每个新模态框时(页面中此时才有i 才可选中 且可分辨是哪个模态框)添加事件 
    // 为了让当前页面一时间只会显示一个模态框 创建新模态框后 显示前检测当前页面是否有之前的模态框 将其关闭
    Modal.prototype.open = function () {
      const modal = document.querySelector('.modal')
      // 使用逻辑中断 如果页面此刻没有modal则不执行后面语句 反之执行
      modal && modal.remove()
      // append追加节点
      document.body.append(this.modalBox)
      // 此处this指向调用者 即当前模态框实例对象
      this.modalBox.querySelector('i').addEventListener('click', () => {
        // 若此回调函数用普通函数 函数中this将指向调用者 即i
        // 故用箭头函数 箭头函数没有自己的this 沿用上一作用域的this 即当前模态框实例对象
        this.close()
      })
    }

    Modal.prototype.close = function () {
      this.modalBox.remove()
    }

    // id #调用
    document.querySelector('#delete').addEventListener('click', function () {
      // 传入参数
      const del = new Modal('温馨提示', '您没有权限删除')
      del.open()
    })

    document.querySelector('#login').addEventListener('click', function () {
      // 传入参数
      const add = new Modal('友情提示', '您还么有注册账号')
      add.open()
    })
    // // 1.  模态框的构造函数
    // function Modal(title = '', message = '') {
    //   // 公共的属性部分
    //   this.title = title
    //   this.message = message
    //   // 因为盒子是公共的
    //   // 1. 创建 一定不要忘了加 this
    //   this.modalBox = document.createElement('div')
    //   // 2. 添加类名
    //   this.modalBox.className = 'modal'
    //   // 3. 填充内容 更换数据
    //   this.modalBox.innerHTML = `
    //     <div class="header">${this.title} <i>x</i></div>
    //     <div class="body">${this.message}</div>
    //   `
    //   // console.log(this.modalBox)
    // }
    // // 2. 打开方法 挂载 到 模态框的构造函数原型身上
    // Modal.prototype.open = function () {
    //   if (!document.querySelector('.modal')) {
    //     // 把刚才创建的盒子 modalBox  渲染到 页面中  父元素.appendChild(子元素)
    //     document.body.appendChild(this.modalBox)
    //     // 获取 x  调用关闭方法
    //     this.modalBox.querySelector('i').addEventListener('click', () => {
    //       // 箭头函数没有this 上一级作用域的this
    //       // 这个this 指向 m
    //       this.close()
    //     })
    //   }
    // }
    // // 3. 关闭方法 挂载 到 模态框的构造函数原型身上
    // Modal.prototype.close = function () {
    //   document.body.removeChild(this.modalBox)
    // }

    // // 4. 按钮点击
    // document.querySelector('#delete').addEventListener('click', () => {
    //   const m = new Modal('温馨提示', '您没有权限删除')
    //   // 调用 打开方法
    //   m.open()
    // })

    // // 5. 按钮点击
    // document.querySelector('#login').addEventListener('click', () => {
    //   const m = new Modal('友情提示', '您还么有注册账号')
    //   // 调用 打开方法
    //   m.open()
    // })

  </script>
</body>

</html>