iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0
Modern Web

重造會 Slide 的輪子!深入 JavaScript、CSS 模組化設計系列 第 22

Day 22 - 套件命名與建立 Git 儲存庫 (Repository)

  • 分享至 

  • xImage
  •  

不知道大家有沒有想過,自己設計的套件要取什麼名稱才夠味,才到位。

在討論這個話題之前,我們先來市場研究一下,目前市面上受歡迎的套件,都是什麼名字,其中的命名哲學有何獨到之處?

命名要點

搜尋較精確的字詞,避免不相關的內容,因此「slider js library」為查詢字詞,第四筆之後為介紹套件的文章,前四筆為 Slider 套件,如下:

  • Splide
  • Swiper
  • Slick
  • Glide

Google 搜尋結果畫面
圖 a: Google 搜尋結果畫面

眾所皆知,「slide」是「滑」的意思,而「carousel」是旋轉木馬,相片的輪播就像旋轉木馬一樣,不斷的迴轉。播放時,可以用滑鼠點擊,照片播放的滑動感覺,因此,諸如此類的功能套件通常離不開這兩這字。

大概是因為「carousel」的字較長,有三個母音音節,而「slide」只有一個較短,只有一個母音音節,導致大多數套件命名偏向這個字較多。

字義及衍生詞

我們來看看從搜尋引擎找到的例子。

  • 「Splide」,為「slide」加了一個字母 p,有個英文字 split (分割)類似這樣的音節發音,結合起來的命名。

  • 「Swiper」,swipe 是手指滑手機螢幕的動作,十分直覺,沒有異議是個 100 分的好名字。

  • 「Slick」,這個字在形容詞和動詞也有「滑」的意思,名詞為「平滑器」、「刮刀」的意思。用這個字來命名也是蠻不錯的。

  • 「Glide」,滑動、滑行的意思。

筆者的看法,「Splide」和「Swiper」會是比其它兩個名字來說,更好。除了名字隱含該有的意思外,第一個,「Splide」不是真正的英文單字,因此直接查詢 Google 該字,立即會找到。第二個「Swiper」也是衍生字,同樣地,就算還沒有名氣,直接查詢 Google,也會是搜尋排名榜首。

另外兩個名字,直接查詢搜尋引擎,會發現結果是字典網站及其它不相關的結果,必須加上 JS 關鍵字才能找到。

其它參考因素

除了字義已外,筆者認為以下三點也是參考因素:

  • GitHub 專案名稱
  • 套件庫名稱
  • 網域名稱

GitHub 專案名稱

查一下是否已經有類似的名稱被其它專案使用了,如果有的話,那麼使用者在 GitHub 搜尋時,會找到星星數較多的那個排在前面。

在 GitHub 上,組織 (organization) 的名字和一般使用者是共用帳號命名資源的,因此,有 GitHub 使用者的帳號名稱或組織名稱使用了我們想取的名字,也不利以後的推廣,為了取名,只好加前輟 (prefix)、後輟 (suffix),看起來就不夠霸氣。

套件庫名稱

JavaScript 的套件庫 NPM,它的套件名稱是先搶先贏的,因此,查詢一下有人是否已使用,當作命名的參考。

網域名稱

經營專案時,有架設專案網站的需求,那麼網域名稱就是列入參考的要素了。最佳的選擇是 .com 而且不貴,差不多 10-12 美元左右。很多專案常用的 .io,年費就貴得多,是 .com 的 3 倍以上。

決定名稱

綜合各種命名要素,最終筆者決定把作品命名為「sliderm」。

Sliderm

  1. Slider + M,可以理解為專為 Mobile 版本設計的作品。
  2. 兩個音節發音
  3. 不是一個單字,因此在開始推廣專案後,搜尋排名會是第一名。
  4. NPM 套件庫沒有這個字詞的套件。
  5. 網域名稱連 .com 都沒被註冊。

因此決定這個名字之後,網域名稱「sliderm.com」就先註冊下來了,準備未來當作文件網站使用。

建立 Git 儲存庫

GitHub 首頁
圖 b: GitHub 首頁

GitHub 是目前全球最大的 Git 儲存庫,數以百萬計的開發者在上面活動著。如果還沒有 GitHub 帳號的話,按這裡前往申請一個 GitHub 帳號吧!

接著建立一個新的 Git 儲存庫。

在 GitHub 建 git 儲存庫
圖 c: 在 GitHub 建 git 儲存庫

建立完 Git 儲存庫之後,clone 一份到自己的開發機目錄中,依照昨天的文章發佈 NPM 套件的流程的步驟,先發佈一次套件,這是為了把 NPM 的套件名稱定下來。

NPM 套件介紹網頁
圖 d: NPM 套件介紹網頁

發佈成功之後的套件專屬網頁如下:

接著萬事俱備,就待完成一些基本功能,再補文件讓這個網頁看起來有模有樣些囉。

總結

先撇開功能面實不實用、技術創不創新,如果有一個看起來好看,念起來通順,搜起來一定找的到名字,也是很重要的喔!

希望這篇文章對大家日後在專案命名時,會有一些啟發。


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


上一篇
Day 21 - 發佈 NPM 套件的流程
下一篇
Day 23 - 程式碼品質工具:ESLint、StyleLint、Prettier
系列文
重造會 Slide 的輪子!深入 JavaScript、CSS 模組化設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言