拆解QQ音乐播放器【封装进度条功能篇】

这是我参与8月更文挑战的第三天，活动详情查看：8月更文挑战

前言

• 最近扒拉起来大三的时候模仿着搞过的一个播放器
• 正好最近没东西写了，便把其中封装的一个模块拆解梳理下（水博客）

起步( 建议不看 )

• 面向对象的特征：封装，继承，多态

prototype属性的作用：

• 它是函数所独有的属性，从一个函数指向一个对象(即：函数的原型对象)也就是这个函数所创建的实例的原型对象。所以poo.proto === Foo.prototype才会返回真，它的作用就是包含共享的属性和方法，也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。

  function Foo(){
  }
  var poo=new Foo();
  console.log(poo.__proto__===Foo.prototype)//true
  /*创建一个构造函数Foo(),poo是使用new关键字实例化的对象*/
  

constructor属性的作用：

• 它是对象才拥有的属性，从一个对象指向一个函数(该对象的构造函数)

• 每个对象都拥有构造函数，(如果是继承来的配合__proto__属性查看会更直观)

• Function函数比较特殊。它的构造函数是其本身，所以函数和对象最终都是由Function构造函数出来的，所以constructor属性的终点就是Function这个函数

• JavaScript为每一个构造函数都提供了一个prototype属性，让他指向另一个对象，而这个对象的所有属性和方法都会被构造函数的实例对象继承。

• 这也就意味着，只要我们把那些不变的属性和方法定义在prototype对象上即可。

---

需求分析( 建议了解 )

• 面向对象的理论概念罗里吧嗦的不再赘述，直接上实操下方为效果图
  • 当初大学我们寝室称呼为QQ老冰，8848钛金手机，所以我叫个老猪佩奇很正常⑧~
  • 其实当时我是利用z-index图层及filter(滤镜) 属性,来实现的类似于毛玻璃的效果
    • 这部分功能实现在我前天的博客里总结了 👉点击
  • 重写原因：当歌曲加载后，原生的Audio标签不够美观，且不同浏览器表现不一致，改样式又麻烦
    • 因此不如自定义一个

解决方案( 建议思考 )

• 使用自定义进度条后，明显会觉得更加的美观时间太久，歌词和封面好多都没了，好在音频还全
• 今天主要的目标是在进度条的实现上
  • 因为考虑到播放的进度条在音量控制上也要复用，所以将此方法进行了封装
    • 进度条自身的功能，主要包含自动滚动，点击跳转，拖拽跳转

如何实现( 建议掌握 )

布局

• 首先考虑实现进度条这个小组件的布局解构

  <div class="parent">  <!-- 外容器 -->
    <div class="progress_bar">  <!-- 整个进度条容器 -->
        <div class="progress_line">  <!-- 已经走过的进度条 -->
            <div class="progress_dot"></div>  <!-- 进度点标识 -->
        </div>
    </div>
  </div>

构造函数封装

• 然后利用构造函数创建功能函数
  • 篇幅问题，函数里事件处理的代码不全
  • 完整代码 GitHub👉点击

    Progress.prototype={
        constructor:Progress,
        init:function($progress_Bar,$progress_Line,$progress_Dot){
            this.$progress_Bar=$progress_Bar;
            this.$progress_Line=$progress_Line;
            this.$progress_Dot=$progress_Dot;
        },
        progressClick:function(){ /*点击后进度条发生改变*/
        /**
         * 备份this指向（progress调用的）
         * 方便$progress_Line和$progress_Dot调用
        */
            let $this=this;
            this.$progress_Bar.click(function(event){
                --------
            }),
            this.$progress_Line.click(function(){
               --------
            })
        },
        //2、监听鼠标移动
        progressMove:function(){  /**鼠标点击后移动滚动条进度 */
            var $this=this;
            this.$progress_Bar.mousedown(function(){
                var  normalLeft=$(this).offset().left;
                $(document).mousemove(function(event){
                    ---------
                });
            });
            //3、监听鼠标抬起
            $(document).mouseup(function(){
                $(document).off("mousemove");
            })
        }
    }

• 在构造函数Progress的原型对象中创建一个init函数
• 把这个函数自身原型对象init.prototype改为Progress的原型对象Progress.prototype;
• 这样Progress实例化出的对象也可以直接访问init里的属性和方法
• ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

    Progress.prototype.init.prototype=Progress.prototype;

• 同时挂载到全局window身上，便于使用

window.Progress=Progress;

• 函数中随意调用即可

  $(function(){
   let $progress_Bar=$(".progress_bar");
   let $progress_Line=$(".progress_line");
   let $progress_Dot=$(".progress_dot");
   var progress=new Progress($progress_Bar,$progress_Line,$progress_Dot);
   progress.progressClick();
   progress.progressMove();
 })

此时的效果

回顾了下当时写的拿收藏歌曲信息的代码

• 其中一个功能是获取当前登录账号下收藏歌曲的列表信息
• 其中很多云上资源还依然是能使用的 END

或许你对以下内容也感兴趣

• # JavaScript读取本地文件配置（兼容低版本IE）
• # VUE3.0中一些API是如何实现的？
• # 一年工作经验的前端都问啥？
• # JavaScript 语言精粹系列
• # 图解HTTP系列