javascript面向对象基础(1)

时间：2019-08-22 18:47:06 阅读：62 评论：0 收藏：0 [点我收藏+]

标签：播放 ack splay mda width name 判断 nbsp button

主题

? 1）工厂模式

? 2）new运算符

? 3）构造函数

? 4）原型prototype

? 5）面相对象和面相过程编程

? 6）类和对象

## 知识点

##需求

### 1、需求一：实现多个选项卡的

- 问题一：如何写？按照以前方式写

<!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">
    <title>Document</title>
</head>
<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
</body>
<script>
    // 第一个需求 一个选项卡；
    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    btns.forEach((v,k)=>{
        v.onclick = function(){
            ps.forEach((value,key)=>{
                if(key==k){
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                }else{
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                }
            })
        }
    })

</script>
</html>

- 问题二：如何提高复用性？(函数封装)

<!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">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
</body>
<script>
    // 第二个需求 多个选项卡；
    function Tab(btns, ps) {
        btns.forEach((v, k) => {
            v.onclick = function () {
                ps.forEach((value, key) => {
                    if (key == k) {
                        // 选中项；
                        btns[key].style.background = "red";
                        ps[key].style.display = "block";
                    } else {
                        // 非选中项；
                        btns[key].style.background = "";
                        ps[key].style.display = "none";
                    }
                })
            }
        })
    }
    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    Tab(btns,ps);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2,ps2);




</script>

</html>

###2、需求变更：其中某一个实现选项卡点击切换下一页功能

- 通过传统的传参数来解决；逻辑和判断越来越复杂；

<!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">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
</body>
<script>
    // 第三个需求 3-点击按钮第一个选项卡有下一页功能
    function Tab(btns, ps, isNext = false) {
        btns.forEach((v, k) => {
            v.onclick = function () {
                psFor(k);
            }
        })

        if (isNext) {
            // 有下一页功能；
            let num = 0;
            document.querySelector(".nextPre").onclick = function () {
                num++;
                num = num > 2 ? 0 : num
                psFor(num);
            }
        }

        function psFor(k) {
            ps.forEach((value, key) => {
                if (key == k) {
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                } else {
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                }
            })
        }
    }

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    Tab(btns, ps, true);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2, ps2);




</script>

</html>

###3、需求变更：另一个实现轮播图功能

- 如何灵活的自动播放？—>需要返还函数还需要返还属性：可以通过返还对象来解决；

<!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">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
    <button class="autoPlay">点击按钮第二个选项卡有自动轮播功能</button>
</body>
<script>
    // 第四个需求 4-点击按钮第二个选项卡有自动轮播功能
    function Tab(btns, ps, isNext = false, isAutoPlay = false) {
        btns.forEach((v, k) => {
            v.onclick = function () {
                psFor(k);
            }
        })

        if (isNext) {
            // 有下一页功能；
            let num = 0;
            document.querySelector(".nextPre").onclick = function () {
                num++;
                num = num > 2 ? 0 : num
                psFor(num);
            }
        }

        if (isAutoPlay) {
            // 控制自动轮播
            let num = 0;
            document.querySelector(".autoPlay").onclick = function () {
                setInterval(() => {
                    num++;
                    num = num > 2 ? 0 : num
                    psFor(num);
                }, 1000);
            }
        }

        function psFor(k) {
            ps.forEach((value, key) => {
                if (key == k) {
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                } else {
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                }
            })
        }
    }

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    // 下一页功能 轮播功能； 某一个选项卡的需求；
    Tab(btns, ps, true);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2, ps2, false, true);




</script>

</html>

###4、需求变更：多个选项卡分别更改数量

<!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">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
    <button class="autoPlay">点击按钮第二个选项卡有自动轮播功能</button>
</body>
<script>
    // 第四个需求 4-点击按钮第二个选项卡有自动轮播功能
    function Tab(btns, ps) {
        btns.forEach((v, k) => {
            v.onclick = function () {
                psFor(k);
            }
        })

        // if (isNext) {
        //     // 有下一页功能；
        //     let num = 0;
        //     document.querySelector(".nextPre").onclick = function () {
        //         num++;
        //         num = num > 2 ? 0 : num
        //         psFor(num);
        //     }
        // }

        // if (isAutoPlay) {
        //     // 控制自动轮播
        //     let num = 0;
        //     document.querySelector(".autoPlay").onclick = function () {
        //         setInterval(() => {
        //             num++;
        //             num = num > 2 ? 0 : num
        //             psFor(num);
        //         }, 1000);
        //     }
        // }

        function psFor(k) {
            ps.forEach((value, key) => {
                if (key == k) {
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                } else {
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                }
            })
        }
        return psFor;
    }

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    // 下一页功能 轮播功能； 一个需求；
    let tab1 = Tab(btns, ps);
    // 下一页功能 
    let num = 0;
    document.querySelector(".nextPre").onclick = function () {
        num++;
        num = num > 2 ? 0 : num
        tab1(num);
    }


    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    let tab2 = Tab(btns2, ps2);
    // 自动轮播
    let num2 = 0;
    document.querySelector(".autoPlay").onclick = function () {
        setInterval(() => {
            num2++;
            num2 = num2 > 2 ? 0 : num2
            tab2(num2);
        }, 1000);
    }



</script>

</html>

javascript面向对象基础(1)

标签：播放 ack splay mda width name 判断 nbsp button

原文地址：https://www.cnblogs.com/supermanGuo/p/11395890.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行