JavaWeb(7)——前端综合案例1(面向对象)

这篇具有很好参考价值的文章主要介绍了JavaWeb(7)——前端综合案例1(面向对象)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、实例需求 ❗

二、 实现 🎯

 三、代码优化 💂 + 💻 = 👴🏽

四、继续优化和总结 🌕👍

五、需要注意的 ❌


一、实例需求 ❗

JS进阶-day3-184-综合案例-模态框构造函数写法

JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

 JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

 JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

二、 实现 🎯

<!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>
  // 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>

JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

 三、代码优化 💂 + 💻 = 👴🏽

        实现了注册、登录和删除按钮的事件监听器,并在点击按钮时弹出相应的模态框。对源代码进行了扩展,并且利用面相对象的思想进行了封装。

<!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>
        /* 按钮容器样式定义 */
        .button-container {
            display: flex; /* 设置容器为弹性布局 */
            justify-content: center; /* 将按钮水平居中对齐 */
            align-items: flex-start; /* 将按钮垂直顶部对齐 */
            margin-top: 20px; /* 设置容器与上方元素的垂直间距 */
        }

        /* 按钮样式定义 */
        button {
            background-color: #f3e330; /* 设置按钮背景颜色 */
            color: #090000; /* 设置按钮文字颜色 */
            margin-right: 10px; /* 设置按钮的右边距 */
            padding: 10px 20px; /* 设置按钮内边距 */
            border: 2px solid #efa75a; /* 设置按钮边框样式及颜色 */
            cursor: pointer; /* 设置鼠标悬停样式为手型 */
            border-radius: 5px; /* 设置按钮圆角 */
            font-size: 16px; /* 设置按钮文字大小 */
        }

        button:hover {
            background-color: #9668dc; /* 设置鼠标悬停时的按钮背景颜色 */
        }

        /* 模态框样式定义 */
        .modal {
            width: 300px;
            /* 模态框最小高度 */
            min-height: 100px;
            /* x 和 y 设置为 0,表示阴影不产生偏移,即在元素的中心位置。blur 设置为 10px,增加阴影的模糊程度,使其看起来更加柔和。
            color 使用 RGBA 格式,其中 rgba(0, 0, 0, 0.2) 表示黑色阴影,透明度为 0.2,使得阴影呈现半透明效果。*/
            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;
            display: flex;
            flex-direction: column;
        }

        .modal .header {
            line-height: 40px;
            padding: 0 10px;
            position: relative;
            font-size: 20px;
            background-color: #9668dc;
            color: #fff;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .modal .header i {
            font-style: normal;
            color: #fff;
            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;
            border-top: 1px solid #ccc;
        }

        .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;
        }

        /* 输入框样式定义 */
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 5px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div class="button-container">
    <button id="delete">删除</button>
    <button id="login">登录</button>
    <button id="register">注册</button>
</div>

<script>
    // 定义了一个构造函数 Modal,用于创建模态框对象。构造函数接受两个参数 title 和 message,并将它们作为模态框的标题和消息内容。
    function Modal(title = '', message = '') {
        // 公共的属性部分
        this.title = title
        this.message = message
        // 创建 modalBox 元素 因为盒子是公共的
        this.modalBox = document.createElement('div')
        this.modalBox.className = 'modal'
        // 通过 innerHTML 属性设置 modalBox 的内部 HTML 内容,其中包含了标题和消息内容
        this.modalBox.innerHTML = `
        <div class="header">${this.title} <i>x</i></div>
        <div class="body">${this.message}</div>
      `
    }

    // 打开方法 挂载到模态框的构造函数原型身上
    Modal.prototype.open = function () {
        //在 Modal 的原型上定义了一个 open 方法,用于打开模态框。该方法会将 modalBox 添加到文档中,并添加一个关闭按钮的事件监听器。
        if (!document.querySelector('.modal')) {
            document.body.appendChild(this.modalBox)
            const closeButton = this.modalBox.querySelector('i')
            closeButton.addEventListener('click', () => {
                this.close()
            })
        }
    }
    // 在 Modal 的原型上定义了一个 close 方法,用于关闭模态框。该方法会将 modalBox 从文档中移除
    Modal.prototype.close = function () {
        document.body.removeChild(this.modalBox)
    }
    // 注册按钮点击处理函数
    document.querySelector('#register').addEventListener('click', () => {
        const modalContent = `
      <div class="header">注册 <i id="closeBtn">×</i></div>
      <div class="body">
        <input type="text" id="username" placeholder="请输入用户名" />
        <input type="password" id="password" placeholder="请输入密码" />
      </div>
      <div class="footer">
        <a class="submit" href="#">注册</a>
      </div>
    `
        const m = new Modal('', modalContent)
        m.open()

        const closeBtn = m.modalBox.querySelector('#closeBtn')
        closeBtn.addEventListener('click', () => {
            m.close()
        })
        const submitBtn = m.modalBox.querySelector('.submit')
        submitBtn.addEventListener('click', () => {
            const usernameInput = m.modalBox.querySelector('#username')
            const passwordInput = m.modalBox.querySelector('#password')
            const username = usernameInput.value.trim()
            const password = passwordInput.value.trim()

            if (username && password) {
                // 在此处判断注册逻辑
                // 假设已注册
                alert('注册成功!请登录')
                m.close()
            } else {
                alert('请输入用户名和密码')
            }
        })
    })
    // 登录按钮点击处理函数
    document.querySelector('#login').addEventListener('click', () => {
        const modalContent = `
      <div class="header">登录 <i id="closeBtn">×</i></div>
      <div class="body">
        <input type="text" id="username" placeholder="请输入用户名" />
        <input type="password" id="password" placeholder="请输入密码" />
      </div>
      <div class="footer">
        <a class="submit" href="#">登录</a>
      </div>
    `
        const m = new Modal('', modalContent)
        m.open()
        const closeBtn = m.modalBox.querySelector('#closeBtn')
        closeBtn.addEventListener('click', () => {
            m.close()
        })
        const submitBtn = m.modalBox.querySelector('.submit')
        submitBtn.addEventListener('click', () => {
            const usernameInput = m.modalBox.querySelector('#username')
            const passwordInput = m.modalBox.querySelector('#password')
            const username = usernameInput.value.trim()
            const password = passwordInput.value.trim()

            if (username && password) {
                // 在此处判断登录逻辑
                // 假设已注册且用户名密码匹配
                alert('登录通过')
                m.close()
            } else {
                alert('请输入用户名和密码')
            }
        })
    })
    // 删除按钮点击处理函数
    document.querySelector('#delete').addEventListener('click', () => {
        const m = new Modal('温馨提示', '您没有权限删除!')
        m.open()
    })
</script>
</body>
</html>

注意:

JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

         button:hover 的样式将应用于 <button> 元素,而 .button:hover 的样式将应用于具有 class="button"<div> 元素。

JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

JavaWeb(7)——前端综合案例1(面向对象),前端,前端,javascript,html5,css3

四、继续优化和总结 🌕👍

当然,这段代码还可以继续优化,可以考虑以下几点:

  1. 使用模块化的方式组织代码:将样式和脚本分离成独立的文件,并使用模块化的方式加载和管理它们(就是不要写到一个HTML中)。

  2. 使用事件委托:将按钮点击事件委托给父元素,减少事件监听器的数量,提高性能。

  3. 简化代码逻辑:去除重复的代码段,优化逻辑判断,使代码更简洁易读。

  4. 使用常量替代魔法数字:将重复出现的数字定义为常量,提高代码可维护性。

于是,拆开优化后的代码如下(原功能不变):

HTML:

<!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>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
<div class="button-container">
    <button id="delete">删除</button>
    <button id="login">登录</button>
    <button id="register">注册</button>
</div>
<script src="js/main.js" type="module"></script>
</body>
</html>

CSS:

@charset "UTF-8";
/* 按钮容器样式定义 */
.button-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
}

/* 按钮样式定义 */
button {
    background-color: #f3e330;
    color: #090000;
    margin-right: 10px;
    padding: 10px 20px;
    border: 2px solid #efa75a;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

button:hover {
    background-color: #9668dc;
}

/* 模态框样式定义 */
.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;
    display: flex;
    flex-direction: column;
}

.modal .header {
    line-height: 40px;
    padding: 0 10px;
    position: relative;
    font-size: 20px;
    background-color: #9668dc;
    color: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.modal .header i {
    font-style: normal;
    color: #fff;
    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;
    border-top: 1px solid #ccc;
}

.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;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 5px;
    margin-top: 10px;
}

JS:

// 定义了一个构造函数 Modal,用于创建模态框对象
class Modal {
    constructor(title = '', message = '') {
        this.title = title;
        this.message = message;
        this.modalBox = document.createElement('div');
        this.modalBox.className = 'modal';
        this.modalBox.innerHTML = `
      <div class="header">${this.title} <i>x</i></div>
      <div class="body">${this.message}</div>
    `;
    }

    open() {
        if (!document.querySelector('.modal')) {
            document.body.appendChild(this.modalBox);
            const closeButton = this.modalBox.querySelector('i');
            closeButton.addEventListener('click', () => {
                this.close();
            });
        }
    }

    close() {
        document.body.removeChild(this.modalBox);
    }
}

// 注册、登录和删除按钮的事件监听器
const buttonContainer = document.querySelector('.button-container');

buttonContainer.addEventListener('click', (event) => {
    const targetId = event.target.id;

    if (targetId === 'register') {
        showRegisterModal();
    } else if (targetId === 'login') {
        showLoginModal();
    } else if (targetId === 'delete') {
        showDeleteModal();
    }
});

function showRegisterModal() {
    const modalContent = `
    <div class="header">注册 <i id="closeBtn">×</i></div>
    <div class="body">
      <input type="text" id="username" placeholder="请输入用户名" />
      <input type="password" id="password" placeholder="请输入密码" />
    </div>
    <div class="footer">
      <a class="submit" href="#">注册</a>
    </div>
  `;
    const modal = new Modal('', modalContent);
    modal.open();

    const closeButton = modal.modalBox.querySelector('#closeBtn');
    closeButton.addEventListener('click', () => {
        modal.close();
    });

    const submitButton = modal.modalBox.querySelector('.submit');
    submitButton.addEventListener('click', () => {
        const usernameInput = modal.modalBox.querySelector('#username');
        const passwordInput = modal.modalBox.querySelector('#password');
        const username = usernameInput.value.trim();
        const password = passwordInput.value.trim();

        if (username && password) {
            // 在此处判断注册逻辑
            // 假设已注册
            alert('注册成功!请登录');
            modal.close();
        } else {
            alert('请输入用户名和密码');
        }
    });
}

function showLoginModal() {
    const modalContent = `
    <div class="header">登录 <i id="closeBtn">×</i></div>
    <div class="body">
      <input type="text" id="username" placeholder="请输入用户名" />
      <input type="password" id="password" placeholder="请输入密码" />
    </div>
    <div class="footer">
      <a class="submit" href="#">登录</a>
    </div>
  `;
    const modal = new Modal('', modalContent);
    modal.open();

    const closeButton = modal.modalBox.querySelector('#closeBtn');
    closeButton.addEventListener('click', () => {
        modal.close();
    });

    const submitButton = modal.modalBox.querySelector('.submit');
    submitButton.addEventListener('click', () => {
        const usernameInput = modal.modalBox.querySelector('#username');
        const passwordInput = modal.modalBox.querySelector('#password');
        const username = usernameInput.value.trim();
        const password = passwordInput.value.trim();

        if (username && password) {
            // 在此处判断登录逻辑
            // 假设已注册且用户名密码匹配
            alert('登录通过');
            modal.close();
        } else {
            alert('请输入用户名和密码');
        }
    });
}

function showDeleteModal() {
    const modal = new Modal('温馨提示', '您没有权限删除!');
    modal.open();
}

        关于这段 JavaScript 代码优化后的逻辑总体上是一个模态框(Modal)的实现。

  • Modal 是一个构造函数,用于创建模态框对象。构造函数接受两个参数:title(标题,默认为空字符串)和 message(消息,默认为空字符串)。
  • 构造函数中,首先创建了一个 div 元素作为模态框的容器,并设置其类名为 'modal',然后通过设置 innerHTML 属性来定义模态框的内容,包括标题和消息。
  • open 方法用于打开模态框。如果页面上没有其他模态框存在,则将当前模态框添加到 body 元素中。同时,该方法会添加一个点击事件监听器到关闭按钮上,点击关闭按钮时调用 close 方法关闭模态框。
  • close 方法用于关闭模态框。它通过从 body 元素中移除模态框元素来实现。

接下来是注册、登录和删除按钮的事件监听器:

  • 首先,通过 querySelector 方法获取到按钮容器元素 buttonContainer
  • 然后,给 buttonContainer 添加一个 click 事件监听器,在点击事件发生时执行对应的函数。
  • 在点击事件处理函数中,根据点击的按钮的 id 执行相应的函数。

以下是各个函数的功能:

  • showRegisterModal 函数用于显示注册模态框。首先,定义了模态框的内容 modalContent,其中包含了输入框和注册按钮。然后,创建了一个新的模态框对象 modal,并调用 open 方法打开模态框。同时,给关闭按钮和注册按钮添加了点击事件监听器。在注册按钮的点击事件处理函数中,获取到用户名和密码输入框的值,并进行判断。如果用户名和密码都不为空,则假设注册成功,并弹出提示框,然后关闭模态框;否则,弹出请填写用户名和密码的提示框。
  • showLoginModal 函数用于显示登录模态框,逻辑与 showRegisterModal 函数类似。
  • showDeleteModal 函数用于显示删除模态框。它创建了一个新的模态框对象 modal,并调用 open 方法打开模态框。但是该模态框的内容固定为 "您没有权限删除!",无需添加关闭按钮和其他功能。

        总体来说,这段代码实现了一个基本的模态框组件,并通过事件监听器实现了打开不同类型模态框的功能。

五、需要注意的 ❌

        在上面的JS代码中,document.body.appendChild(this.modalBox) 用于将模态框元素 this.modalBox 添加到文档的 <body> 元素中作为子节点。

        而 document.body.append(this.modalBox)Element 接口中的方法,可以将一个或多个节点或文本追加至父节点的子节点列表的末尾。它与 appendChild 方法功能类似,但可以同时添加多个节点。

        在这个特定的情况下,因为只有一个模态框元素需要被添加到 <body> 元素中,所以使用 appendChildappend 都是可以的。它们的区别在于 append 方法可以一次性添加多个节点,而 appendChild 只能添加单个节点。

        所以,完全可以将 document.body.appendChild(this.modalBox) 替换为 document.body.append(this.modalBox),效果是一样的。文章来源地址https://www.toymoban.com/news/detail-621811.html

到了这里,关于JavaWeb(7)——前端综合案例1(面向对象)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaWeb综合案例——商品后台管理系统

    目录 1.功能介绍 2.工程准备 2.1pom.xml 2.2mybatis-config.xml 2.3SqlSessionFactoryUtils 2.4CheckCodeUtil 3.注册页面 3.1User 3.2UserMapper.xml 3.3UserMapper 3.4UserService 3.5register.html 3.6RegisterServlet 3.7CheckCodeServlet 4.登录页面 4.1login.html 4.2LoginServlet 4.3LoginFilter 5.后台主页面 5.1Brand 5.2BrandMapper 5.3BrandMapper.xml

    2024年02月07日
    浏览(44)
  • JavaWeb核心、综合案例(详细!Web开发流程)

    目录 案例说明 一、创建MavenWeb项目 二、导入相关依赖 1、导入maven编译插件 2、导入tomacat插件 3、导入servlet依赖 4、导入druid数据库连接池依赖 5、导入mysql依赖 6、导入mybatis依赖 7、导入junit依赖 8、导入mybatis核心配置文件mybatis-config.xml 三、使用Mapper代理 导入MySql映射文件 X

    2024年02月04日
    浏览(43)
  • 【javaWeb+tomcat+MySQL】综合案例-完整步骤

    目录 一、前提 二、创建一个普通的java项目 三、添加Web Application 四、添加tomcat 五、测试tomcat是否连接成功  六、在src目录下创建四个package 七、在WEB-INF下创建文件夹lib,导入两个jar包  八、把druid.properties粘贴在src目录下 八、实体类、方法类、测试类、连接类(代码部分)

    2024年02月07日
    浏览(48)
  • Java基础 --- 面向对象综合训练

    格斗游戏,每个游戏角色的姓名,血量,都不相同,在选定人物的时候(new对象的时候),这些信息就应该被确定下来。 补充: 正题: 定义数组存储3个商品对象。 商品的属性:商品的id,名字,价格,库存。 常见三个商品对象,并把商品对象存入到数组当中。 定义数组循

    2024年03月19日
    浏览(42)
  • 面向对象程序设计——多文档综合性试验

    1)创建一个多文档应用程序MyMdi,可以在这个多文档中可以输入文本、显示静态图、动态图以及显示对话框进行操作。 2)第一个视图类的基类为CEditView(CView的子类),可以录入字符串。 3)第二个文档画出静态图,包括五种以上图形。 4)在第二个文档菜单栏“画图”中点

    2024年02月09日
    浏览(38)
  • 黑马程序员最新版JavaWeb综合案例(前后端完整版)

    学习视频链接: 黑马程序员最新版JavaWeb基础教程,Java web从入门到企业实战完整版 完整代码链接: https://github.com/HaiLei-Fly/JavaWeb-brand 1、功能介绍 案例功能: 用户登录(账号密码登录) 用户注册(新用户注册账号) 查询所有(查询所有品牌数据) 新增品牌(增加新的品牌数

    2024年02月03日
    浏览(41)
  • JavaScript—面向对象、作用域

    C#:从类继承 js:从对象继承 模板(类) 原型继承(实体) 有一个对象存在,构造函数设置原型为这个对象 创建出来的对象就继承与这个对象(从对象那里继承) 此时p1、p2用的不是同一个say方法 方法与变量name、age等字段一样,占据了对象的内存 也就是说,每创建一个这

    2024年02月11日
    浏览(49)
  • Educoder/头歌JAVA——JAVA面向对象:封装、继承和多态的综合练习

    目录 第1关:封装、继承和多态进阶(一) 相关知识 面向对象思想 封装 继承 组合和继承 构造函数 super()和this() 编程要求 第2关:封装、继承和多态进阶(二) 相关知识 重写和重载 abstract(抽象类)和interface(接口) final static static的作用 多态 编程要求 第

    2024年02月04日
    浏览(55)
  • JavaScript极速入门-综合案例(3)

    预期效果 代码实现 预期效果   需求: 按要求在文本框中输入内容,点击提交按钮,输入内容显示在页面下方. 代码实现 1.提前准备如下HTML和CSS代码 2.实现提交     1.HTML是一种超文本标记语言,主要用于页面内容的显示和排版.如果需要更漂亮的样式展示和页面效果,需要搭配CSS和

    2024年03月14日
    浏览(46)
  • javascript设计模式-面向对象基础

    在JS这种弱类型的语言中,类型不匹配错误很难跟踪。可以使用接口来进行类型检查。如果强制使用,又会弱化语言的灵活性。因为有额外的代码调用,所以又会降低性能。解决方法就是在开发时进行类型检查,在开始完成后删除此部分代码。 但JS中的接口实现方式是模拟的

    2024年01月18日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包