js - 面向对象 - 小案例：轮播图随机点名选项卡鼠标拖拽

Posted 2021-03-16 九九柒

面向对象

对象 : (黑盒子)不了解内部结构, 知道表面的各种操作.

面向对象 : 不了解原理的情况下 会使用功能 .

面向对象是一种通用思想,并非编程中能用,任何事情都能用.

编程语言的面向对象的特点：

? 封装 : 看不到里面的东西 , 用好表面功能.

? 继承 : 从父类继承一些方法 , 属性 , 子类又有一些新的特性.

? 多态

? 抽象 ： 抽取一个功能里面多个核心的功能模块。

? 思想： 高内聚、低耦合

? 低耦合 ：每个功能模块之间耦合度要低

? 高内聚 ：模块内部要紧密相连

面向对象的风格 都是 从 new 开始的

js对象的分类：

宿主对象、内置对象 （Math）、内部对象（ new ）

构造函数: 通过 new 调用的

对象是通过构造函数构建出来的，对象用来存储数据

构造函数 -> 对象 -> 存储数据

为了区分构造函数与普通函数： 构造函数的首字母 大写

构造函数 与 普通函数的区别

• 普通函数如果内部没有return的时候 , 返回的是undefined

• 构造函数内部没有return返回值的时候，返回的构造出来的对象。

• 构造函数内部的this指向，指向的是当前对象。

  总结：构造函数在new的时候构建对象，会在内部自动返回一个this 指向构造的对象。

面向对象实现流程:

1. 全局变量作为属性

2. 把对象的方法放在prototype

3. new实例化对象

4. this指向


    function  构造函数名称 首字母大写(){
            this.属性 = 属性值

            //调用初始化方法
            this.init();
        }
        构造函数名称 首字母大写 .prototype = {
            //初始化方法 : 整合各个功能模块
            init : function(){
                //调用绑定事件模块
                this.eventBind();
            },
            fn1 : function(){

            },
            fn2 : function(){

            },
            eventBind : function(){

            }
        }
        new 构造函数名称 首字母大写 ();

面向对象实现简版轮播图

分析：
功能模块拆分
1: 图片移动
2：下一张的功能
3：上一张的功能
4：事件绑定模块    

    // 构造Banner函数
    function Banner(){
        this.oimgbox = document.querySelector('.imgbox'),
        this.oimg = document.querySelectorAll('img'),
        this.obtn = document.querySelectorAll('span'),
        this.distance = this.oimg[0].offsetWidth,
        this.count = 0 ;
        //调用初始化模块
        this.init();
       }
    //
       Banner.prototype = {
           //初始化模块
           init : function(){
            this.oimgbox.style.width = this.oimg.length * this.distance + 'px';
            this.eventBind();
           },
          //图片移动模块
           toimg : function(){
            move(this.oimgbox,{'left': -this.distance * this.count})
            
           },
          //下一张
           next : function(){
            if(this.count >= this.oimg.length - 1){
               this.count = 0;
           }else{
               this.count++;
           }
           this.toimg();
           },
          //上一张
           pre : function(){
            if(this.count <= 0 ){
               this.count = this.oimg.length - 1;
           }else{
               this.count--;
           }
           this.toimg();
           },
          //事件绑定模块
           eventBind : function(){
            addEventListener(this.obtn[1],'click',this.next.bind(this));
            addEventListener(this.obtn[0],'click',this.pre.bind(this));
           }
       }
       new Banner();

面向对象实现选项卡效果

  function Tab(){
            this.obtn = document.querySelectorAll('span');
            this.oarticle = document.querySelectorAll('article');
            this.init();
        }
        Tab.prototype = {
            init : function(){
                this.eventBind();
            },
           // 清除类名
            clearClass : function(){
              for(let i = 0 ,k = this.obtn.length; i < k; i++){
                this.obtn[i].className  =  '';
                this.oarticle[i].className = '';
               }
              } ,
              addClass :function(index){
                this.clearClass();
                this.obtn[index].className = 'active';
                this.oarticle[index].className ='show';
                  
            },
            eventBind : function(){
                for(let i = 0, k = this.obtn.length; i<k; i++){
                   // this.obtn[i].addEventListener('click',this.addClass.bind(this,i));
                   this.obtn[i].addEventListener('click',this.addClass.bind(this,i));

                }
            }  
        }
        new Tab();

随机点名

<div class="box">随机点名</div>
   <span class="btn">开始</span>
           1.初始化
           2.文字变化 定时器 
           3.开始
           4.结束
           5.判断什么时候开始,什么时候结束 
           6.控制flag
           6.事件绑定


<script>
        var arr =['黄子韬','白敬亭','范世錡','黄景瑜','秦霄贤','彭昱畅','汪苏泷','侯明昊','秦凯旋'];
       function RandomName(){
            this.box = document.querySelector('.box');
            this.btn = document.querySelector('.btn');
            this.flag = false;
            this.init();
        }
        RandomName.prototype = {
            init : function(){
                this.eventBind();
            },
            textChange : function(){
                var _this = this;
                clearInterval(this.timer);
                this.timer = setInterval(function(){
                    //每隔一段事件生成一个下标
                    let num = parseInt(Math.random() * arr.length);
                    //根据随机的下标 取到名字 然后交给 box；
                    _this.box.innerhtml = arr[num];
                    //添加随机颜色
                    _this.box.style.color = randomColor();
                },100)
            },
            //开始
            startTxt : function(){
                this.btn.innerHTML = '开始';
            },
            //暂停
            stopTxt : function(){
                this.btn.innerHTML = '暂停';
            },
            //判断是否开始
            isStart : function(){
                if(this.flag){
                    this.textChange();
                    this.stopTxt();
                }else{
                    clearInterval(this.timer);
                    this.startTxt();
                }
            },
            //控制flag
            controlFlag : function(){
                this.flag = this.flag ? false : true;
                //用flag控制 开始  或 暂停
                this.isStart();
            },
            //evntBind:
            eventBind : function(){
                this.btn.addEventListener('click',this.controlFlag.bind(this));
            }

        }
        new RandomName();
    </script>

鼠标拖拽

  function Drag(){
            this.div = document.querySelector('div');
        //定义一个空变量
            this.fn = null;
            this.init();
        }
        Drag.prototype ={
            init : function(){
                this.eventBind();
            },
            //鼠标按下 获取位置
            Down : function(e){
                e = e || window.event;
                this.x = e.offsetX;
                this.y = e.offsetY;

                //绑定鼠标移动事件 fn 调用 move()
                document.addEventListener('mousemove',this.fn = this.Move.bind(this));
                document.addEventListener('mouseup',this.Up.bind(this));
            },
            //鼠标移动 
            Move : function(e){
                e = e || window.event;
                let 
                    l = e.clientX - this.x,
                    t = e.clientY - this.y;

                this.div.style.left = l +'px';
                this.div.style.top = t + 'px';
            },
            //鼠标抬起 绑定事件不移动
            Up : function(){
                document.removeEventListener('mousemove',this.fn);
            },
            eventBind : function(){
                //鼠标按下 
                this.div.addEventListener('mousedown',this.Down.bind(this));

            }
        }
        new Drag();

面向对象实现完整版轮播图

    <script>
            function Banner(){
                this.oimgbox = document.querySelector('.imgbox');
                this.oimg = document.getElementsByTagName('img');
                this.obtn = document.querySelectorAll('span');
                this.ocricle = document.querySelector('.circlebox');
                this.osection = document.querySelector('section');
                this.timer = null;
                this.distance = this.oimg[0].offsetWidth;
                this.count = 0;

                this.init();
            }
            Banner.prototype = {
                //初始化 
                init : function(){
                    this.clone();
                    this.autoplay();
                    this.setWidth();
                    this.addLi();
                    this.addClass();
                    this.eventBind();
                },
                setWidth : function(){
                    this.oimgbox.style.width = this.oimg.length * this.distance +'px';
                },
                //克隆图片
                clone : function(){
                    this.firstimg = this.oimg[0].cloneNode();
                    this.oimgbox.appendChild(this.firstimg);
                },
                // 图片移动
                toImg : function(){
                   move(this.oimgbox,{'left' : -this.distance * this.count});
                },
                //下一张
                next : function(){
                    if(this.count >= this.oimg.length -1){
                        this.oimgbox.style.left = 0;
                        this.count = 1;
                    }else{
                        this.count++;
                    }
                    this.toImg();
                    this.clearClass();
                    this.oli[this.count >= this.oimg.length -1 ? 0:this.count].className = 'active';
                   
                },
                //上一张
               pre : function(){
                   if(this.count <= 0){
                       this.oimgbox.style.left = -this.distance *(this.oimg.length - 1) + 'px';
                       this.count = this.oimg.length -2;
                   }else{
                       this.count--;
                   }
                    this.toImg();
                    this.clearClass();
                    this.oli[this.count].className = 'active';
                },
                //定时器
                autoplay : function(){
                    var _this = this;
                    clearInterval(this.timer);
                    this.timer = setInterval(() => {
                        _this.next();
                    }, 3000);
                },

                //清除定时器
                clearTimer : function(){
                    clearInterval(this.timer);
                },

                //添加圆点
                 addLi : function(){
                    for(let i = 0 ;i < this.oimg.length -1; i++){
                        this.createLi = document.createElement('li');
                        this.ocricle.appendChild(this.createLi);
                    }

                    this.oli = document.getElementsByTagName('li');
                    this.oli[0].className  = 'active';
                 },
                 //清除类名
                 clearClass : function(){
                    for(let i = 0 ,k = this.oli.length;i<k;i++){
                        this.oli[i].className = '';
                    }
                 },
                 addClass : function(){
                    for(let i = 0,k = this.oli.length;i<k;i++){
                        addEventListener(this.oli[i],'mouseover',()=>{
                            this.clearClass();
                            this.oli[i].className = 'active';
                            this.count = i;
                            this.toImg();
                        })
                    }
                 },
                 //事件调用
                eventBind : function(){
                  addEventListener(this.obtn[0],'click',this.next.bind(this));
                  addEventListener(this.obtn[1],'click',this.pre.bind(this));
                  addEventListener(this.osection,'mouseover',this.clearTimer.bind(this));
                  addEventListener(this.osection,'mouseout',this.autoplay.bind(this));
                }
            }
            new Banner();
     </script>