大三学生的第一个轮播图组件

做为一个大三准毕业生，如今已经决定了转行前端，原本觉得前端比较简单，可是发现，水仍是比较深的。。从 12 月份开始自学前端内容，从 W3CSHOOL 网站学习基础内容，感受入门仍是比较简单。可是实际每个简单的知识点，都有它深刻的用法。特别是在我写完一个轮播组件后，深深地感觉到了前端进阶不简单，但仍是颇有乐趣的。

• 源码
• 演示

目前正在寻找实习机会，小伙伴们若是有好机会的话，但愿可以多多推荐~

正文开始

本文介绍一个轮播图效果的实现，虽然是一个小小的轮播图组件，可是师傅告诉我，仍然要按照一个正常项目的流程去构思。

• 需求文档
  • 一般需求文档由产品经理提出并确认。
  • 在这个项目中，个人角色集产品、开发、测试于一身，简单起见，经过研究别人家的轮播图组件的功能整理出需求文档。
• 撰写方案
  • 写代码以前首先想清楚该怎么实现，可以用文字表达出你的实现过程，细节越深刻越好。
• 编码实现
  • 方案写完后，基本上想明白了项目的实现过程以及关键细节，因此编码实现也就水到渠成了。
• 自我测试
  • 编码完成后，开发须要自我测试，保证需求功能点都可以覆盖，而且没问题。
• 发布上线
  • 项目完成后，就能够发布上线了。

好了，废话很少说了，开始正题~

需求文档

有的时候，术语真的很重要，由于术语可以大大下降相同领域人员的沟通成本。当师傅第一次跟我说，要让我经过实现一个轮播图组件来锻炼个人综合能力的时候，我是很懵逼的。轮播图，这个概念在以前没据说过，但当师傅从京东、淘宝官网给我指出哪一个是轮播图效果的时候，我才明白，这个效果原来是轮播图效果。。其实以前我是知道这种效果的，只是不知道它是这么一个叫法。

经过研究别人家的轮播图，我肯定了以下需求点：

• 需求
  • 可以实现自左往右的轮播。
  • 轮播到最后一张图时，可以无缝衔接到第一张图。
  • 点击图片可以跳转到指定地址。

肯定了需求，师傅告诉我，这些仅仅是产品做为一个不懂技术的人提出的功能，可是做为开发人员，咱们还须要考虑可维护和可复用。因而，我又扩展出以下一些开发需求点：

• 开发需求
  • 支持图片和点击连接的可配置。
  • 支持轮播持续时间的配置。
  • 支持轮播间隔时间的配置。
  • 支持轮播图显示容器的配置。
  • 支持缩略圆点的颜色、激活颜色、半径、距离底部位置的配置。

能够看出，产品的需求只有三个，可是开发要考虑的除了产品的需求，还有那么多额外的考虑点。 很吓人吧。。。

你看，你看，产品提出的一个小需求，开发须要考虑多少事情。。但愿产品大大可以多多理解开发。。

需求确认后，接下来咱们开始撰写设计方案了。

设计方案

深刻的理解需求后，咱们就须要想办法如何实现这些需求。

• 定义一个轮播图类。
• 实例化一个轮播图对象，接收一个配置参数 options：
  • container
    • 轮播图容器，默认为 body。
  • imgList
    • 图片对象数组。
      • url：图片地址。
      • href：点击跳转连接。
  • time
    • 轮播持续时间。
  • delayTime
    • 轮播间隔时间。
  • dotRadius
    • 缩略圆点大小。
  • dotColor
    • 缩略图默认颜色。
  • dotActiveColor
    • 缩略图激活颜色。
  • dotBottom
    • 缩略圆点距离容器下部的距离。

有了上面两个规则，咱们就能够约定调用者的使用方式了：

new Slider({}).init();
复制代码

之因此使用 Slider 实例一个对象来生成一个轮播图，是由于一个页面上可能会有多个轮播图，为了让他们之间不相干扰，因此采用实例化的方式调用。

接下来咱们要定义 init 方法了。

初始化方法主要干了这么几件事。

• 找到 container 容器，检测容器的宽度和高度。
• 生成一个图片包裹容器 imgWrapper。
• 生成一个个的 img 标签，而后在每个 img 标签外包裹一个 div 容器。
• 将每个 div 容器插入到 imgWrapper 中。
• 根据第一个 img 对象，额外生成一个 div 容器插入到 imgWrapper 的尾部。
  • 加入这个是为了实现无缝轮播滚动效果。
• 将 imgWrapper 插入到轮播图容器 container 中。
• 生成缩略圆点，并插入到指定位置，设置好对应样式。

之因此定义一个 imgWrapper 包裹图片元素，是由于咱们的轮播图效果采用 CSS3 的 transform 实现，结合 CSS3 的过分属性 transition 可以实现特别平滑的轮播动画效果。

最终咱们的容器结构以下所示：

<div>
    <div class="imgWrapper> <div><img/></div> <div><img/></div> <div><img/></div> </div> </div> 复制代码

生成了 DOM 元素，咱们须要把他们的样式适配好。这里就不详细介绍了，感兴趣的同窗能够看下源码。

接下来，要增长轮播以及缩略图点击事件了。

• 为 imgWrapper 容器增长 transitionend 事件，在 transitionend 事件结束后，再次开启定时器。
• init 以后，启用一个 setTimeout 定时器，开始轮播定时。
• 当鼠标点击缩略圆点时。
  • 清除定时器。
  • 清除 imgWrapper 的过分属性。
  • 根据点击的索引，直接定位到对应的大图。
  • 从新开启定时器。

以上就是设计方案的大致思路，可是其实仍是有一些细节在里面，这里就再也不一一赘述，感兴趣的点此查看源码哈。

编码实现

有了上面的设计方案，编写代码基本上就容易不少了，可是对于我一个初学者，仍是折腾了好久才实现出来，整个过程让我更深入地学习到如下几点：

• 定义构造函数。
• 利用 Object.assign 方法处理多个对象属性的合并。
• 利用闭包特性传入指定参数。
• 利用 Function.prototype.bind 改变 this 上下文。
• 利用 document 对象的 createElement 方法建立 dom 元素。
• 利用 appendChild 方法将 dom 元素插入到指定位置。
• 为 dom 元素设置样式。
• 利用 getComputedStyle 读取 dom 元素的真实样式。
• 利用 addEventListener 为 dom 元素增长事件。
• transform 和 transition 的使用方式。

上面列举的都是很基础的内容，虽然以前已经学习过它们，可是当我真正要写一个项目的时候，才发现本身无所适从，不知道该怎么入手。通过编写这个组件的学习，我发现仍是要经过项目来锻炼本身对基础知识的掌握。

编码细节再也不赘述。

自我测试

自我测试，主要是测试产品提出的需求以及为了提升可复用性开发人员本身增长的新需求。自我测试是为了可以让测试人员更直接的测试主要功能，而不将精力和时间消耗在因为开发本身的失误致使的一些问题，这是颇有必要的环节。

在这个过程当中，我将本身做为组件调用者，去使用这个组件，并对功能进行测试。

上线

测试完毕后，开始发布上线。我这个项目是托管在 github 的，因此上线过程仅仅是将代码上传到 github 便可。在这个过程当中，我学习了 git 的常见使用方式。

• git clone
  • 克隆远程项目到本地。
• git add
  • 将文件添加到 git 仓库。
• git commit
  • 将修改提交到本地。
• git push
  • 将修改提交到远程服务器。
• git checkout -b
  • 建立新分支，并切换到新分支。
• git status
  • 查看 git 仓库的状态。

将来

这个组件是用原生 JavaScript 实现的，还存在一些不足，将来准备完善该组件，并实现基于 React 和 Vue 技术的版本。

小结

以上就是一个大三学生开发一个轮播图组件的过程，在这个过程当中，我掌握了项目开发的流程，git 的使用，以及 JS 和 CSS3 的样式使用技巧，在此将本文送给全部和我同样准备入行前端的新同窗，共勉。