面对对象和tab栏切换

最新推荐文章于 2024-10-02 05:39:15 发布

九九七七

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量92

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_54455551/article/details/124181201

版权

这篇博客探讨了JavaScript的面向对象特性，包括封装、继承和多态，并通过实例展示了如何使用这些特性创建Person和Student类。此外，还介绍了一个封装的Tab组件，用于切换显示不同内容，展示了事件监听和元素操作。通过这两个示例，阐述了在前端开发中如何利用面向对象思想提高代码复用性和可维护性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            面向对象的三大基本特性
            封装 将对应的属性和行为（方法）抽取并且构成一个对象
                封装的作用：对内部数据起到一定的保护作用
                    提高内聚，降低耦合 
            继承 class类的继承 enrends继承关键词
                继承的作用：减少了代码的冗余 提高了书写代码的效率 复用率
            多态 （js里面没有多态，原因js是一个弱类型语言，可以不带参数，但是有重写（子类调用父类的方法）和重载（指多个同名但参数不同的方法，js没有））
         */
        class Person{
            constructor(){
                this.name = "张三"
                this.eat = function(){
                    console.log("吃饭")
                }
            }
            eat(){

            }
        }
        class Student extends Person{//使用Studnt来继承Person 获取父类的一切非私有的方法和属性
            constructor(){
                super()//在子类的构造器中如果需要使用this关键字 必须先写super()，里面装需要传（传到父类）的参数
                this.age = 18
            }
        }
        let student = new Student() 
        console.log(student.age)//访问自己的age属性 18
        console.log(student.name)//父类的name属性 继承与父类Person name属性也属于student对象
        student.eat()//eat继承与父类

        // 重写 是多态的特性 子类调用父类的方法
        // 重载 在一个类里面有多个重名的方法
    </script>
</body>
</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>Document</title>
    <style>
    .con{
        width: 350px;
        border:1px solid rgba(67, 172, 230, 1);
        background: rgba(73, 180, 253, 0.32);
        padding:10px;
        box-sizing: border-box;
    }
    .tabCon{
        font-size: 14px;
        color:#fff;
        font-weight: bold;
        margin-top: 15px;
    }
    .norLabel{
        text-align:center;
        color:#FE9393;
    }
    .tabWraps{
        font-size: 0;
        border:1px solid rgba(67, 172, 230, 1);
        background: rgba(73, 180, 253, 0.32);
        position:relative;  
        width: 294px;
        padding: 4px 14px; 
    }
    .tabWraps::before{
        content:'';
        position:absolute;
        width:2px;
        height: 19px;
        background:rgba(69, 255, 248, 1);
        top:6px;
        left: 50%;
    }
    .tabWraps li{
    width: 43%;
    height: 22px;
    line-height: 22px;
    text-align:center;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular,
    SourceHanSansCN;
    font-weight: 400;
    color: #FFFFFF;
    display:inline-block;
    border-radius: 4px;
    }
    .tabWraps .tabActive{
    background:rgba(69, 205, 255, 1);
    border:1px solid rgba(69, 255, 248, 1);
    }
    .tabWraps li:nth-child(2){
        margin-left: 36px;
    }
    </style>
</head>
<body>
    <div class="con">
        <ul class="tabWraps">
            <li class="tabActive">内容一</li>>
            <li>内容二</li>>
        </ul>
        <div class="tabCon">
            <div class="detailCon" style="display: none;">
                我是内容一
            </div>
            <div class="detailCon" style="display:none">
                我是内容二
            </div>
        </div>
    </div>
    <script>
        // 封装tab对象
        class Tab{
            constructor(liList,detailCons){
                // 获取上边栏
                this.liList = liList
                // 获取下边栏
                this.detailCons = detailCons
                // 切换的方法
                this.__proto__.changeTab = function(index){
                    // 遍历 取消class
                    for(let i= 0;i<liList.length;i++){
                        liList[i].className = ""
                        detailCons[i].style.display = "none"
                    }
                    // for(let li of liList){
                    //     li.className = ""
                    // }
                    liList[index].className = "tabActive"
                    // for(let div of detailCons){
                    //     div.style.display = "none"
                    // }
                    detailCons[index].style.display = "block"
                }
            }
        }
        let liList = document.querySelectorAll(".tabWraps>li")
        let detailCons = document.querySelectorAll(".detailCon")
        let tab = new Tab(liList,detailCons)
        for(let i in liList){
            liList[i].onmouseenter = function(){
                tab.changeTab(i)
            }
        }
    </script>
</body>
</html>