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

做爲一個大三準畢業生，如今已經決定了轉行前端，原本覺得前端比較簡單，可是發現，水仍是比較深的。。從 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 的樣式使用技巧，在此將本文送給全部和我同樣準備入行前端的新同窗，共勉。