在前幾天的文章，我們已完善了開發環境的準備工作，像是制定好程式碼風格為 airbnb，使用了 ESLint、StyleLint、Prettier 來管理程式碼的排版。Git 儲存庫已建立，NPM 套件名稱也已經確定，接下來開始規劃套件功能，並在鐵人賽的最後的幾天，盡可能地完善它。

圖 a: 命名為 Sliderm，規劃的套件佈局

和之前的範例對照，多了頁籤區塊。

這是一個完成的 Slider 套件會有的基本佈局。

組件

和佈局有關的組件，目前看的到的只有兩種。

• 按紐區塊：上一個、下一個按紐
• 頁籤區塊：一個圓圈代表一個頁數。

事件

這個套件預計提供兩個自定義事件，以後視情況增加新功能了，再提供更多自定義的事件。

• 滑動開始前：slide.before
• 滑動完成後：slide.after

目錄結構

圖 b: 規劃的目錄結構

目錄

• src：實作檔案目錄。
• dist：打包後的 js、css 檔案。
• assets：靜態檔案目錄。
• components：放置與 View 的呈現有關的組件。
• core：核心功能，其中各功能細分為 module，放在 modules 目錄。
• modules：放置與核心功能有關的模組。
• playground：範例目錄，用來開發功能。
• utilities：整理便於使用的函式或物件。

檔案

• components/previous-next.js：在鐵人賽初期 Day 8 介紹 CSS 元素定位與裝飾的 HTML 範例，「上一個」與「下一個」按紐。
• components/paginiation.js：Slider 套件位於底部的頁籤區塊。
• core/events/event-adapter.js：轉接器模式 (adapter pattern)，用來轉接原生的 DOM Event 事件函式。主要目的，分配一個參考位置給匿名函式，以便於移除事件時可以完整清除，解決我們在 Day 12 介紹　JavaScript 事件方法時，removeEventListener 無法移除沒有參考位置的問題。
• core/events/event-dispatcher：觀察者模式 (observer patten)，用來建立套件內部的事件。
• core/modules/grouping.js：項目區塊為整組滑動時的 data-order 屬性分配。
• core/modules/slide.js：滑動邏輯。最重要的一個模組檔案。
• core/modules/slide/next.js：往右邊方向滑動的邏輯。
• core/modules/slide/previous.js：處理往右邊方向滑動的邏輯。
• core/modules/slide/spacing.js：項目區塊之間的間距空白。
• core/modules/slide/transform.js：項目區塊平移的距離。
• core/modules/slide/transition.js：項目區塊的漸變動畫時機與樣式。
• core/modules/slide/width.js：項目區塊的寬度。
• core/config.js：預設的選項參數。
• core/extensions.js：視圖組件與功能模組的註冊。
• core/selector.js：套件使用的 CSS 選擇器名稱。
• utilites/await.js：同步、非同步的函式。
• utilites/console.js：定義一個 log 函式，用來轉接 console.log，避免 eslint 一直提示移除 console.log，也方便日後定義寫 log 的方式。
• utilites/dom.js：簡化原生 DOM 的處理。
• index.js：主程式入口。

規劃使用方式

載入 sliderm.js 及 sliderm.css 之後，規劃以下方式開始使用這個 Slider。

(1) 基本使用

new Sliderm('.any-class-name');

(2) 事件處理

const sliderm = new Sliderm('.any-class-name');

sliderm.on('slide.before', function () { 
	// 事件處理
})

(3) 參數設定

const sliderm = new Sliderm('.any-class-name', {
	'參數1': true,
	'參數2': false,
});

目前參數思考中，大致上會是一些 UI 微調的選項，例如：

• 項目區塊之間的距離。
• 是否顯示頁籤。
• 是否顯示「上一個、下一個按紐」。
• 滑動時的動畫時間長短。

等等...。

(4) HTML 格式

規劃使用者在使用這個套件，需要配合使用的 HTML 結構。

<div class="sliderm">
    <div class="sliderm__slides">
        <div class="sliderm__slide">第一個項目元素</div>
        <div class="sliderm__slide">第二個項目元素</div>
        <div class="sliderm__slide">第三個項目元素</div>
        <div class="sliderm__slide">第四個項目元素</div>
    </div>
</div>

盡量減少在程式初始化時，讓使用者必須配合的部分。因此，HTML 的部分這樣就好，其它交給 JavaScript 處理。

• 上、下一個按紐，以及頁籤為程式自動加入。
• 如果使用者在參數上設定為不顯示，提供使用者可以客製按紐的方法。

總結

把功能規劃出來，就像建築工地要蓋房子前有設計藍圖，知道過程中要完成那些工作，才好搭起鷹架，一層一層往上蓋，接下來就是實現這些功能，正式地完成一個 JavaScript 套件開發。

今天的文章沒有實體網站範例，不過之前的範例可在 GitHub Page 閱讀。
原始碼可在 2022 鐵人賽專用 GitHub Repo 下載。

本次鐵人賽的 Sliderm 套件初版在，demo/sliderm-alpha，不會進行修改，後續的功能開發可以瀏覽 Sliderm.js 官方網站。