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

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

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

好了，废话不多说了，开始正题~

需求文档

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

通过研究别人家的轮播图，我确定了如下需求点：

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

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

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

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

你看，你看，产品提出的一个小需求，开发需要考虑多少事情。。希望产品大大能够多多理解开发。。

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

设计方案

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

• 定义一个轮播图类。
• 实例化一个轮播图对象，接收一个配置参数 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 的样式使用技巧，在此将本文送给所有和我一样准备入行前端的新同学，共勉。