大三學生的第一個輪播圖元件

摘要： 本文介紹一個輪播圖效果的實現，雖然是一個小小的輪播圖元件，但是師傅告訴我，仍然要按照一個正常專案的流程去構思。 需求文件 通常需求文件由產品經理提出並確認。 在這個專案中，我的角色集產品、開發、測試於一身，簡單起見，通過研究別人家的輪...

本文介紹一個輪播圖效果的實現，雖然是一個小小的輪播圖元件，但是師傅告訴我，仍然要按照一個正常專案的流程去構思。

• 需求文件
  • 通常需求文件由產品經理提出並確認。
  • 在這個專案中，我的角色集產品、開發、測試於一身，簡單起見，通過研究別人家的輪播圖元件的功能整理出需求文件。
• 撰寫方案
  • 寫程式碼之前首先想清楚該怎麼實現，能夠用文字表達出你的實現過程，細節越深入越好。
• 編碼實現
  • 方案寫完後，基本上想明白了專案的實現過程以及關鍵細節，所以編碼實現也就水到渠成了。
• 自我測試
  • 編碼完成後，開發需要自我測試，保證需求功能點都能夠覆蓋，並且沒問題。
• 釋出上線
  • 專案完成後，就可以釋出上線了。

好了，廢話不多說了，開始正題~

需求文件

有的時候，術語真的很重要，因為術語能夠大大降低相同領域人員的溝通成本。當師傅第一次跟我說，要讓我通過實現一個輪播圖元件來鍛鍊我的綜合能力的時候，我是很懵逼的。輪播圖，這個概念在之前沒聽說過，但當師傅從京東、淘寶官網給我指出哪個是輪播圖效果的時候，我才明白，這個效果原來是輪播圖效果。。其實之前我是知道這種效果的，只是不知道它是這麼一個叫法。

通過研究別人家的輪播圖，我確定瞭如下需求點：

• 需求
  • 能夠實現自左往右的輪播。
  • 輪播到最後一張圖時，能夠無縫銜接到第一張圖。
  • 點選圖片能夠跳轉到指定地址。

確定了需求，師傅告訴我，這些僅僅是產品作為一個不懂技術的人提出的功能，但是作為開發人員，我們還需要考慮可維護和可複用。於是，我又擴展出如下一些開發需求點：

• 開發需求
  • 支援圖片和點選連結的可配置。
  • 支援輪播持續時間的配置。
  • 支援輪播間隔時間的配置。
  • 支援輪播圖顯示容器的配置。
  • 支援縮略圓點的顏色、啟用顏色、半徑、距離底部位置的配置。

可以看出，產品的需求只有三個，但是開發要考慮的除了產品的需求，還有那麼多額外的考慮點。 很嚇人吧。。。

你看，你看，產品提出的一個小需求，開發需要考慮多少事情。。希望產品大大能夠多多理解開發。。

需求確認後，接下來我們開始撰寫設計方案了。

設計方案

深入的理解需求後，我們就需要想辦法如何實現這些需求。

• 定義一個輪播圖類。
• 例項化一個輪播圖物件，接收一個配置引數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 的樣式使用技巧，在此將本文送給所有和我一樣準備入行前端的新同學，共勉。