Fork me on GitHub

用面向对象编程解决常见需求场景

面向对象编程的一个好处是格式套路化，书写格式套路化更有利于记忆。而es6的class比es5的构造函数模式更加套路化，所以采用class形式来写。

1，写一个拖动组件

   class dragDropDom {
            constructor(id) {
                this.mouseDownX = 0
                this.mouseDownY = 0
                this.initX = 0
                this.initY = 0
                this.flag = false // 标记是否滑动
                this.obj = document.getElementById(id)
            }
            createMoveBox() {
                this.addEvent()
            }

            addEvent() {
                this.obj.onmousedown = (e) => {
                    //鼠标按下时的鼠标所在的X，Y坐标  
                    this.mouseDownX = e.pageX;
                    this.mouseDownY = e.pageY;

                    //初始位置的X，Y 坐标  
                    const {
                        offsetLeft,
                        offsetTop
                    } = this.obj
                    this.initX = offsetLeft;
                    this.initY = offsetTop;

                    //表示鼠标已按下  
                    this.flag = true;
                }
                window.onmousemove = (e) => {
                    this.resetDefaultEvent(e)
                    // 确保鼠标已按下  
                    if (this.flag) {
                        const {pageX, pageY} = e
                        const left = parseInt(pageX) - parseInt(this.mouseDownX) + parseInt(this.initX) +
                            "px"
                        const top = parseInt(pageY) - parseInt(this.mouseDownY) + parseInt(this.initY) +
                            "px"
                        this.obj.style.cssText = `left:${left};top:${top}`
                    }

                }
                window.onmouseup = (e) => {
                    this.resetDefaultEvent(e)
                    //标识已松开鼠标  
                    this.flag = false;
                }
            }

            resetDefaultEvent(e) {
                e.preventDefault();
                e.stopPropagation();
            }
        }
        const inst = new dragDropDom('box')
        inst.createMoveBox()

　　

2，无限加载实现

<!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>
        .parent-div {
            height: 300px;
            width: 200px;
            border: 1px solid red;
            overflow: auto;
            padding: 0;
        }

        .parent-div ol {
            margin: 0;
        }

        .parent-div ol li {
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="parent-div">
        <ol class="list-box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>

        class noLimitLoad {
            constructor() {
                this.pagesize = 10
                this.wrapper = document.querySelector('.parent-div');
                this.listBox = this.wrapper.querySelector('.list-box');
            }
            generateFragment() {
                const fragment = document.createDocumentFragment();
                for (let i = 0; i < this.pagesize; i++) {
                    const li = document.createElement('li');
                    li.innerHTML = 'apple' + i;
                    fragment.appendChild(li);
                }
                return fragment
            }

            addScrollEvent() {
                this.wrapper.addEventListener('scroll', (e) => {
                    const boxHeight = this.wrapper.clientHeight;
                    const {
                        scrollTop
                    } = e.target;
                    const listHeight = this.listBox.clientHeight;
                    if (boxHeight + scrollTop + 10 >= listHeight) {
                       this.listBox.appendChild(this.generateFragment())
                    }
                });
            }

            init(){
                this.addScrollEvent()
            }
        }

        const load = new noLimitLoad()
        load.init()
    </script>
</body>

</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>图片懒加载</title>
    <style>
        img {
            display: block;
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
    <img data-src="./images/3.jpg" alt="">
    <img data-src="./images/4.jpg" alt="">
    <img data-src="./images/5.jpg" alt="">
    <img data-src="./images/6.jpg" alt="">
    <img data-src="./images/7.jpg" alt="">
    <img data-src="./images/8.jpg" alt="">
    <img data-src="./images/9.jpg" alt="">
    <img data-src="./images/10.jpg" alt="">
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
</body>
<script>
  

    class lazyLoadImg1 {
        constructor() {
            this.imgs = document.querySelectorAll('img');
        }

        lazyLoad() {
            let H = document.documentElement.clientHeight; //获取可视区域高度
            let S = document.documentElement.scrollTop || document.body.scrollTop;
            let len = this.imgs.length
            for (let i = 0; i < len; i++) {
                if (H + S > this.getTop(this.imgs[i])) {
                    this.imgs[i].src = this.imgs[i].getAttribute('data-src');
                }
            }
        }

        getTop() {
            let T = e.offsetTop;
            while (e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        addEvent() {
            window.onload = window.onscroll = () => { //onscroll()在滚动条滚动的时候触发
                this.lazyLoad(this.imgs);
            }
        }
    }

    // 利用getBoundingClientRect
    class lazyLoadImg2 {
        constructor() {
            this.imgs = document.querySelectorAll('img');
        }

        isIn(el) {
            let bound = el.getBoundingClientRect();
            let clientHeight = window.innerHeight;
            return bound.top <= clientHeight;
        }

        check() {
            Array.from(this.imgs).forEach((el)=> {
                if (this.isIn(el)) {
                    this.loadImg(el);
                }
            })
        }

        loadImg(el) {
            if (!el.src) {
                let source = el.dataset.src;
                el.src = source;
            }
        }

        addEvent() {
            window.onload = window.onscroll =  ()=> { //onscroll()在滚动条滚动的时候触发
                this.check();
            }
        }
    }
    
</script>

</html>

　　就像高考想要得高分，除了对题目有深刻的理解还需要一定量的题目练习。不是题海战术，但没有一定数量的题目练习想要在面试中有一个好的成绩也是不行的。

      github地址：https://github.com/zhensg123/ordinary-exercise

posted @ 2021-05-07 11:00  我站在山顶上  阅读(184)  评论(0)    收藏  举报