This is the first day of my participation in the August Text Challenge.More challenges in August

Daily chatter

Ok, I took part in another activity this time, but I didn’t see it before. I feel I lost 100 million yuan.

This is the first and this is the second and this is the third of my code analysis.

This time it is code analysis, or Slider control, or paste Slider code analysis – Pastebin.com, welcome to discuss

Analysis of the HTML

 <div id="my-slider" class="slider-list"></div>
Copy the code

Yeah, it’s the same code.

Analysis of CSS

Today saw this CSS again, and there are new harvest! (In fact, I looked for some points to dig.)

 .slide-list__control{
     position: relative;
     display: table;
     background-color: rgba(255.255.255.0.5);
     padding: 5px;
     border-radius: 12px;
     bottom: 30px;
     margin: auto;
 }
Copy the code

I mentioned this code in the first article and examined the position property. This time let’s look at the display property.

Here display:table is used very cleverly, putting the span side by side and also calculating the width automatically.

It’s not very easy to describe, so here’s a little experiment: The effect is here, notice the width property.

Analysis of JS

Component
+constructor()
+registerPlugins()
+render()
Slider extends Component
+constructor()
+render()
.

This time we abstract a Component class and declare that the Component simply inherits the class and overrides the Render () method.

constructor() && render()

Take a look at the order in which the following statements are called

 const slider = new Slider('my-slider', {
   name: 'slide-list'.data: [
     'https://p5.ssl.qhimg.com/t0119c74624763dd070.png'.'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg'.'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg'.'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'].cycle: 3000
 });
Copy the code
  1. new Slider()The constructor is called whenconstructor()
  2. Invoke the parent class constructorsuper()
  3. callrender()Method to find subclass overridesrender(), call subclassesrender().At this pointHTMLStructure has been generated
  4. Go back toSliderConstructor, setitems 和 cycleattribute
  5. this.sildeTo(0);

registerPlugins()

The forEach() function is traversed by an arrow function, and this refers to Component, which is Slider.

Everything else is pretty much the same as the last code analysis.

conclusion

This code analysis does not change much overall, but extracts an abstract class that other components can use when developing. Although the overall code size is much larger, this increases the code’s reusability. The next time a Component is written, it simply inherits the Component and overwrites the corresponding methods.

One last bit of mischief: problems with the article? Point out: Thumbs up