【青训营】- 代码分析 分析一个 Slider 代码

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

日常碎碎念

好的，这次再参加一个活动，之前没看到感觉自己亏了一个亿。

这是我的代码分析的第一篇 and 这是第二篇 and 这是第三篇。

这一次还是代码分析，还是 Slider 控件，还是贴在Slider 代码分析 - Pastebin.com，欢迎讨论一下

分析 HTML

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

没的说，还是这一句代码。

分析 CSS

今天又一次看到了这份 CSS，又有新的收获！（事实上也找了一会哪里有什么可以挖掘的点）

 .slide-list__control{
     position: relative;
     display: table;
     background-color: rgba(255, 255, 255, 0.5);
     padding: 5px;
     border-radius: 12px;
     bottom: 30px;
     margin: auto;
 }

我在第一篇中提过这段代码并分析了 position 属性，这次我们看一下 display 属性。

此处 display:table 使用很巧妙，把 span 并排放在了一起同时也自动计算了 width。

不是很容易描述，所以这里做了一个小实验：效果在这里 ，可以留意下 width 属性。

分析JS

Component
+constructor()
+registerPlugins()
+render()

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

这次我们抽象了一个 Component 类，声明组件只要继承类并覆写 render() 方法即可。

constructor() && render()

来看一下面语句的调用顺序

 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
 });

1. new Slider() 时调用构造器 constructor()
2. 调用父类构造器 super()
3. 调用 render() 方法，发现子类覆写 render()，调用子类 render()，至此 HTML 结构已经生成
4. 回到 Slider 构造器，设置 items 和 cycle 属性
5. this.sildeTo(0);

registerPlugins()

函数中使用 forEach() 遍历，参数是一个箭头函数，this 指的是 Component，也就是 Slider。

其他内容与上一篇代码分析大同小异。

总结

这回代码分析整体上没怎么变化，只是提取出了一个抽象类可供其他组件开发时使用。虽然整体代码量变多了，但是这样做提高了代码的复用性，下一次写组件只需要继承 Component 覆写相应的方法就好了。

最后调皮一下：文章有问题 ? 指出 : 点赞