Reflect API 和 Object 静态方法的对比

引言

这两年大环境不太好，前端面试难度也呈现了指数级增长，面试官一上来就让我手撕这，手撕那。我tm手撕你吧。我一天没事干去某牛招聘网站上看面筋，意外发现一个应届生吐槽面试官让他手撕轮播图。我顿时一惊，感觉自己不能写出来。于是乎我就自己赶紧去整理一番啊，希望大家也引以为戒，多多提示个人软实力与硬实力。

功能拆解

为了不进行长篇论述，此处我只设计一个小而精的轮播图。它包含的功能主要有下面两个，其它细节大佬们自己补充。

• 自动轮播* 左右控制代码介绍

---

演示地址

核心介绍

html和css

<div id="app"><ul><li class="actived"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9fb2064d74e4bc482a2119cf61069fb~tplv-k3u1fbpfcp-zoom-1.image" alt=""></li><li><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/131c491b37a84c11a76d1e3f965325b2~tplv-k3u1fbpfcp-zoom-1.image" alt=""></li><li><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee544a0b2f6e4e94a899b8d14dfc4459~tplv-k3u1fbpfcp-zoom-1.image" alt=""></li></ul><!--左右控制--><div class="direction"><div class="left"><</div><div class="right">></div></div>
</div> 

css部分代码过长，而且没什么营养，就是使用了绝对定位让图片盒子们先重叠一起，然后让所有未轮播的图片隐藏，让当前轮播展示的图片显示出来。

js部分

class Swipers {constructor (delay) {this.items = document.querySelectorAll("ul>li")//所有的图片元素盒子this.index = 0//当前选中的元素this.timer = null//定时器控制this.delay = delay//轮播时长this.left = document.querySelector(".left")//左控件this.right = document.querySelector(".right")//右控件this.run()//开始启动}//方向控制directControl(direction) {let item = this.items[this.index] item.removeAttribute("class",'actived')if(direction==='left') {if(this.index===0) this.index = this.items.length-1else this.index--} else {if(this.index===this.items.length-1) this.index = 0else this.index++}let newItem = this.items[this.index] newItem.setAttribute("class",'actived')}//开始执行run() {this.left.addEventListener("click",()=>{this.directControl("left")})this.right.addEventListener("click",()=>{this.directControl("right")})this.timer = setInterval(() => {//上一次的显示取消类let item = this.items[this.index] console.log(item)item.removeAttribute("class",'actived')if(this.index===this.items.length-1) this.index = 0else this.index++let newItem = this.items[this.index] newItem.setAttribute("class",'actived')}, this.delay);}//停止执行stop() {clearInterval(this.timer)}
}

let s = new Swipers(3000) 

为什么要设计一个类？因为类的功能设计可以很好的拆解和管理设计需求，无论在面试还是实际开发中都可以使用类很好的封装一个具体的应用。

• 构造函数，首先在构造函数传递一个参数，当然此处也可以传递两个，一个是定时器的时长，另一个是绑定的盒子。此处我为了简单就传递一个定时器时长参数。构造函数内部添加多个属性，如下1.index:标记当前轮播的位置2.timer:全局定时器控制3.delay:定时器延时时间4.items:所有的图片容器5.left:控制向左滑动6.right:控制向右滑动
• directControl，此方法主要是左右控制轮播图的滑动切换功能，设计比较简单，点击左滑或者右滑动时灵活的控制当前index改变和当前激活图片的显示。* run，此方法是核心，添加全局定时器控制整个轮播图的自动轮播，并同步改变位置index和激活样式* stop,此方法就是关闭定时器的功能。总结
  –

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享