Unpack QQ Music Player

This is the third day of my participation in the August Challenge. For details, see:August is more challenging

preface

Recently, I picked up a player I used to imitate when I was a junior
As I had run out of writing recently, I disassembled one of the modules (~~Water blog~~)

Start (not recommended)

Object-oriented features: encapsulation, inheritance, polymorphism

The prototype property does the following:

It is a property unique to a function that points from a function to an object (that is, the function’s stereotype object) that is the stereotype object of the instance that the function creates. So poo.proto=== foo. prototype returns true, it’sroleInclude shared properties and methods, meaning that all objects instantiated by the function can find common properties and methods.When a function is created, the default prototype object for that function is also created.
```
function Foo(){}var poo=new Foo();
console.log(poo.__proto__===Foo.prototype)//true
/* Create a constructor Foo(),poo is an object instantiated with the new keyword */
Copy the code
```

The constructor attribute does:

It is a property owned by an object and points from an object to a function (that object’s constructor)
Each object has its own constructor (which is more intuitive if it is inherited with the __proto__ attribute).
Function is special. Its constructor is itself, so functions and objects are ultimately created by the Function constructor, so the constructor property ends with the Function
JavaScript provides a Prototype property for each constructor to point to another object whose properties and methods are inherited by the constructor’s instance object.
This means that as long as we define those immutable properties and methods on the Prototype object.

Requirements analysis (recommended understanding)

The theory concept of object oriented Rory is no longer verbose, directly on the practiceBelow are the renderings
- At the beginning of the university our dormitory called QQ old ice, 8848 titanium mobile phone, so I call an old pig page is very normal ⑧~

In fact, I was usingZ - index layerandFilter attributeTo achieve a similar effect to ground-glass
- This part of the implementation was summarized in my blog the day before yesterday at 👉
Rewrite reason: when the song loads, nativeAudioThe label is not beautiful enough, and the performance of different browsers is inconsistent, and changing the style is troublesome
- So it’s better to customize one

Solution (Suggest thinking)

After using the custom progress bar, it will obviously feel more beautiful for too long, lyrics and cover a lot of lost, but the audio is still full

The main goal for today is to achieve the progress bar
- This method is encapsulated because the playback progress bar is also reused in the volume control
  - Progress bar itself, mainly including automatic scrolling, click jump, drag jump

How to implement (recommended mastery)

layout

First consider implementing the layout deconstruction of the progress bar widget

  <div class="parent">  <! -- External container -->
    <div class="progress_bar">  <! -- Entire progress bar container -->
        <div class="progress_line">  <! -- Progress bar that has been passed -->
            <div class="progress_dot"></div>  <! -- Progress point identifier -->
        </div>
    </div>
  </div>
Copy the code

Constructor encapsulation

The constructor is then used to create the function
- Length problem, the event handling code in the function is not complete
- For the full code, click 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(){ /* The progress bar changes after clicking */
        /** * Backup this pointing to (progress call) * to facilitate $progress_Line and $progress_Dot calls */
            let $this=this;
            this.$progress_Bar.click(function(event){-- -- -- -- -- -- -- --}),this.$progress_Line.click(function(){-- -- -- -- -- -- -- --})},//2. Monitor mouse movement
        progressMove:function(){  /** Move the scroll bar progress after mouse click */
            var $this=this;
            this.$progress_Bar.mousedown(function(){
                var  normalLeft=$(this).offset().left;
                $(document).mousemove(function(event){-- -- -- -- -- -- -- -- -}); });//3, monitor the mouse lift
            $(document).mouseup(function(){$(document).off("mousemove"); }}})Copy the code

Create an init function in the prototype object of the Progress constructor
Change the function’s prototype object init.prototype to progress.prototype;
So the Progress instantiated object can also directly access the properties and methods in init
Left left left left left left left left left left down down down down down down down down down left left left left left left left left left left down down down down down down down down down left left left left left left left left left left left down down down down down down down down down

    Progress.prototype.init.prototype=Progress.prototype;
Copy the code

And mount it globallywindowBody, easy to use

window.Progress=Progress;
Copy the code

Function can be called at will

  $(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();
 })
Copy the code

Now the effect

I reviewed the code I wrote at that time to collect the song information

One of these features is to get a list of songs that are listed under the currently logged in account
Many of these resources are still available in the cloud

END

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

preface

Start (not recommended)

The prototype property does the following:

The constructor attribute does:

Requirements analysis (recommended understanding)

Solution (Suggest thinking)

How to implement (recommended mastery)

layout

Constructor encapsulation

Now the effect

I reviewed the code I wrote at that time to collect the song information

You may also be interested in the following

Unpack QQ Music Player

preface

Start (not recommended)

The prototype property does the following:

The constructor attribute does:

Requirements analysis (recommended understanding)

Solution (Suggest thinking)

How to implement (recommended mastery)

layout

Constructor encapsulation

Now the effect

I reviewed the code I wrote at that time to collect the song information

You may also be interested in the following

Related Posts

Cool, new ECMAScript proposal: JSON module

[Vue project summary] Project nginx deployment

Time and space complexity of algorithms