Day 25 開始進行 Slider 套件規劃，確定了基本的的佈局如下。

圖 a: Sliderm 套件佈局

並預計使用的方法：

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

實例化 Sliderm 時，第一個參數為要使用的 DOM 節點名稱，為 CSS 選擇器。
第二個參數為物件，為設定選項。

選項規劃

在 core 目錄中建了檔案 config.js。

圖 b: 預設的參數

第一行：直接 export 物件內容。

初期提供的選項不多，只有 5 個。

• previousNext：是否顯示「上一個」、「下一個」按紐。
• pagination：是否顯示頁籤。
• grouping：是否整組滑動
• columns：可視範圍內有幾個項目。
• duration：動畫時間。
• spacing：每個項目元素之間的間距。

主程式規劃

這是目前進度的 index.js，Webpack 打包我們的 JS 檔案時的入口檔。

圖 c: 主程式

載入選項

第 1 行：剛剛定義好的選項內容，匯入為變數名稱 config。
第 11 行：constructor 定義了 el 和 options，第一個參數是 CSS 選擇器名稱，第二個參數為選項。
第 17 行：使用 Object.assign，如果建構子的第二個參數 options 和 config 有相同的 key 值，會覆寫過去，採用進來的設定值。

掛載模組

第 44 行：定義一個私有方法 (private method) 掛載模組功能。定義為私有，只有在這個 class 的 scope 中可以呼叫它。

第 46 行：在載入組件時，會先確認在選項設定值中，關於這個組件的欄位，是否為 true，是的話才載入。

第 52 行：這是一個專門放功能模組的物件，類似註冊表模式 (registry pattern) 的概念，但只有在這邊設定，以及第　106 行的 go() 來取用。

初始化

第 33 行：＃initialize 處理了一開始需要寫入一些屬性到 HTML 的部分，相較於 Day 13 時提到的初始化，概念上沒有差別，只是把它切分到模組去了。
第 35 行：設定項目元素的寬度。
第 36 行：設定項目元素之間的間距。
第 37 行：判段是否為群組滑動，寫入 data-order 排序號碼。

內部事件

第　154 至 184 行的 on()、off()、emit() 是用來處理內部事件，這三個方法由第 4 行載入的 EventDispacher 提供。

設定 window 變數

比較特別注意的是，第 186 行。

window.Sliderm = Sliderm;

Webpack 在打包程式時，程式都是在它的 scope 裡面載入，因此沒有這一行的話，在瀏覽器環境是找不到 Sliderm 這個物件的。

把它賦值到全域的 window 物件即可解決。

總結

就像畫家在作畫前，先打草稿一樣，基本參數的設計，直接關聯到要實作的功能。作為開發套件的第一步，先把選項參數規劃出來，想像這些參數用在什麼使用情境，腦海裡就會有藍圖，提高設計的靈感。

主程式的設計概念，就是盡量精簡，功能外包到其它模組檔案中，設計有彈性的模組化方式來擴充功能，主程式幾乎就不需要修改到它。

在接下來的文章中，會聊到把程式碼整理為更精簡的模組時，一些功能切分的參考方向。

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

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