js 面向对象第二课继承_extends route beforemodel-CSDN博客

本文链接：https://blog.csdn.net/qq_30834535/article/details/101222423

最开始的原型是这样的
在这里插入图片描述
继承后,多了一个取消按钮,基本继承上面的模态框的方法和属性,"取消"按钮的方法是在模态框的基础上加上的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./model.js"></script>
    <script src="./alert.js"></script>
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: silver;
        }

        .modelPop {
            width: 100px;
            height: 50px;
            background: #ffffff;
            text-align: center;
            line-height: 50px;
            position: fixed;
            left: 0;
            top: 0;
        }

        .model {
            display: none;
            width: 30%;
            background: #ffffff;
            padding: 0 10px;
        }

        .title {
            height: 44px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f8f8f8;
            box-sizing: border-box;
        }

        .contentDoc {
            padding: 30px 0;
        }

        .ensure {
            display: flex;
            justify-content: flex-end;
            padding: 10px 0;
        }

        button {
            width: 70px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="modelPop">model</div>
    <div class="model">
        <div class="title">
            <p class="titleDoc">title</p>
            <p class="cancelBtn">X</p>
        </div>
        <div class="contentDoc">content</div>
        <div class="ensure">
        //这个取消是为了继承而存在的,所以没有和上面的取消进行合并
            <button class="cancelBtnAgain">取消</button>
            <button class="ensureBtn">确定</button>
        </div>
    </div>
    <script>
        let modelPop = document.querySelector('.modelPop');
        let model = document.querySelector('.model');
        let ensureBtn = document.querySelector('.ensureBtn');
        let cancelBtn = document.querySelector('.cancelBtn');
        let cancelBtnAgain = document.querySelector('.cancelBtnAgain');
        ensureBtn.onclick = () => {
            setAlert.ensure(model)
        }
        cancelBtn.onclick = () => {
            setAlert.cancel(model)
        }
        modelPop.onclick = () => {
            model.style.display = 'block';
        }
        cancelBtnAgain.onclick = () => {
            setAlert.cancelBtnAgain(model)
        }
        let setAlert = new Alert('titleDoc','contentDoc','面向对象', '面向对象是一种编程语言');
    </script>
</body>

</html>

model.js是最开始定义的面向对象

class Model {
    constructor(title, content,titleDoc,contentDoc) {
        document.querySelector(`.${title}`).innerHTML = titleDoc;
        document.querySelector(`.${content}`).innerHTML = contentDoc;
    }
    ensure(btn) {
        btn.style.display = 'none';
    }
    cancel(btn) {
        btn.style.display = 'none';
    }
}

alert.js在model面向对象的基础上新增加"取消功能"

//extends代表继承model的属性和方法
class Alert extends Model {
    constructor(title, content,titleDoc,contentDoc) {
        super(title, content,titleDoc,contentDoc)
    }
    cancelBtnAgain(btn) {
        btn.style.display = 'none';
    }
}