面向对象编程

最新推荐文章于 2024-10-08 17:57:19 发布

Ginger · J

最新推荐文章于 2024-10-08 17:57:19 发布

阅读量137

点赞数 1

文章标签： js css html

本文链接：https://blog.csdn.net/qq_42441951/article/details/105585988

版权

面向对象是一种特别的编程思想，代码的书写格式与面向过程不同，但是原理是相同的。

面向过程的问题

面向过程中，函数内部定义的变量，函数外部无法定义。函数调用时，占用大量的系统内存，容易造成数据溢出，容易被黑客攻击。所以函数应该只封装一些模块化的功能，而复杂程序的封装，会以其他形式——面向对象的方式来封装程序。

面向过程与面向对象的区别

1.面向过程
面向过程是自己独立的一步一步完成程序的定义和执行
2.面向对象
有封装好的面向对象程序，直接在相应的地方调用，封装的语法和思想与函数不同。

对象的优点

1.对象可以定义并且存储多个数据单元，能存储所有的数据类型。
2.对象调用数据时很方便，不用考虑数据的存储顺序。
3.可以定义函数，还可以通过函数的this指向，方便调用对象本身的数据。

面向对象编程的基本思想

创建对象 => 添加属性、属性值和函数等方法 => 操作对象，完成效果。
就是将程序执行需要的数据和标签，用this定义为对象的属性和属性值；将程序执行需要的代码，定义为对象的函数方法，用this.变量和this.函数名()来调用变量和函数。

面向对象编程优点

1.高内聚
将所有程序定义封装在对象内，存储所有需要的属性和方法
2.低耦合
尽量减少特殊程序的执行

面向对象版轮播图

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0;padding: 0;}
        ul,ol,li {list-style: none;}
        a,a:hover,a:active {text-decoration: none;color: #333;}
        .clear::after {content: "";display: block;clear: both;}
        .banner {width: 600px;height: 400px;border: 3px solid #000;margin: 40px auto;position: relative;overflow: hidden;}
        .banner ul {width: 500%;height: 100%;position: absolute;top: 0;left: 0;}
        .banner ul li {width: 600px;height: 100%;float: left;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 100px;}
        .banner ol {height: 50px;background: rgba(0, 0, 0, .4);position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);display: flex;justify-content: space-evenly;align-items: center;border-radius: 10px;}
        .banner ol li {width: 25px;height: 25px;border-radius: 50%;background: #fff;margin: 0 25px;cursor: pointer;}
        .banner ol li.active {background: red;}
        .banner div {width: 100%;height: 50px;position: absolute;top: 50%;transform: translateY(-50%);display: flex;justify-content: space-between;align-items: center;}
        .banner div a {width: 40px;line-height: 40px;font-size: 40px;font-weight: 900;color: #fff;background: rgba(0, 0, 0, .4);text-align: center;}
    </style>
</head>
<body>
    <div class="banner">
        <ul class="clear">
            <li style="background:pink ;">img1</li>
            <li style="background:gray ;">img2</li>
            <li style="background:blue ;">img3</li>
            <li style="background:skyblue;">img4</li>
            <li style="background:orange ;">img5</li>
        </ul>
        <ol></ol>
        <div>
            <a href="JavaScript:;" name="left"> &lt; </a>
            <a href="JavaScript:;" name="right"> &gt; </a>
        </div>
    </div>
    <script src="1.js"></script>
    <script>
    	//获取父级标签
        const oDiv = document.querySelector('.banner');
        //构建实例化对象，将父级标签作为实参传入其中
        const setLoop = new SetLoop(oDiv);
        //调用入口函数
        setLoop.init();
    </script>
</body>
</html>

class SetLoop{
    constructor(ele){
        this.ele = ele;
        this.oUl = ele.querySelector('ul');
        this.oOl = ele.querySelector('ol');
        this.oUllis = ele.querySelectorAll('ul li');
        this.oDiv2 = ele.querySelector('div');
        this.index = 1;
        this.time = 0;
        this.oliWidth = parseInt(window.getComputedStyle(this.oUllis[0]).width);
        this.on = true;
    }
    init(){
        this.setLi();
        this.copyLi();
        this.autoLoop();
        this.stopLoop();
        this.focus();
        this.leftRight();
        this.hidden();
    }
    move(ele,obj,callback){
        for(let type in obj){
            let oldVal = parseInt(window.getComputedStyle(ele)[type]);
            let timer = setInterval(function(){
                let val = (obj[type] - oldVal) / 5;
                val = val > 0 ? Math.ceil(val) : Math.floor(val);
                oldVal += val;
                ele.style[type] = oldVal + 'px';
                if(oldVal == obj[type]){
                    clearInterval(timer);
                    callback();
                }
            },20)
        }
    }
    setLi(){
        this.oUllis.forEach((item,key)=>{
            let li = document.createElement('li');
            li.setAttribute('index',key + 1);
            li.setAttribute('name','olli');
            if(key == 0){
                li.className = 'active';
            }
            this.oOl.appendChild(li);
        })
    }
    copyLi(){
        let lif = this.oUllis[0];
        let lil = this.oUllis[this.oUllis.length -1];
        let first = lif.cloneNode(true);
        let last = lil.cloneNode(true);
        this.oUl.appendChild(first);
        this.oUl.insertBefore(last,lif);
        this.oUl.style.width = (this.oUllis.length + 2) * this.oliWidth + 'px';
        this.oUl.style.left = - this.oliWidth + 'px';
    }
    autoLoop(){
        this.time = setInterval(()=>{
            this.index++;
            this.move(this.oUl,{left:-this.index * this.oliWidth},()=>{
                this.moveEnd();
            });
        },3000)
    }
    moveEnd(){
        this.on = true;
        if(this.index == this.oUllis.length + 1){
            this.index = 1;
            this.oUl.style.left = - this.index * this.oliWidth + 'px';
        }else if(this.index == 0){
            this.index = this.oUllis.length;
            this.oUl.style.left = - this.index * this.oliWidth + 'px';
        }
        let oOllis = this.ele.querySelectorAll('ol li');
        oOllis.forEach((item)=>{
            item.className = '';
            if(this.index == item.getAttribute('index')){
                item.className = 'active';
            }
        })
    }
    stopLoop(){
        this.ele.addEventListener('mouseover',()=>{
            clearInterval(this.time);
        })
        this.ele.addEventListener('mouseout',()=>{
            this.autoLoop();
        })
    }
    focus(){
        this.oOl.addEventListener('click',(e)=>{
            if(e.target.tagName == 'LI'){
                if(this.on != true){
                    return;
                }
                this.on = false;
                this.index = e.target.getAttribute('index') - 0;
                this.move(this.oUl,{left:-this.index * this.oliWidth},()=>{
                    this.moveEnd();
                });
            }
        })
    }
    leftRight(){
        this.oDiv2.addEventListener('click',(e)=>{
            if(e.target.getAttribute('name') == 'left'){
                if(this.on != true){
                    return;
                }
                this.on = false;
                this.index--;
                this.move(this.oUl,{left:-this.index * this.oliWidth},()=>{
                    this.moveEnd();
                });
            }else if(e.target.getAttribute('name') == 'right'){
                if(this.on != true){
                    return;
                }
                this.on = false;
                this.index++;
                this.move(this.oUl,{left:-this.index * this.oliWidth},()=>{
                    this.moveEnd();
                });
            }
        })
    }
    hidden(){
        document.addEventListener('visibilitychange',()=>{
            if(document.visibilityState == 'hidden'){
                clearInterval(this.time);
            }else if(document.visibilityState == 'visible'){
                this.autoLoop();
            }
        })
    }
}