iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
2

前面提到多次關於 學習看文件 的好處
所以阿宅 PO 想了想,覺得可以跟大家分享一下我是怎麼開始學著看文件
於是今天就改主題啦~~XDD

當時的阿宅 PO 的工作跟戰場一樣,每天就是一直在趕 Code 地獄
所以想說從工作最常碰觸的 JQuery Plugin 著手

閱讀文件 Start

如何選擇套件

通常我在選擇套件的時候,會有幾個篩選條件

  1. Github 星星數 (讓大家幫你選)
  2. NPM 安裝次數 (很多人在使用的話,有問題上谷歌好找解答)
  3. Release 次數 (有無在維護)

當然有的公司會有指定常用的套件,那就可以省去搜尋的時間

文件說明完整性 (好文件基準)

阿宅 PO 的 Codeing 人生中,看最詳細跟深入的文件
其實是 Bootstrap 3 的文件

那是在一場業界前輩的分享講座學到的
那次講座,前輩直接打開 Boostrap 3 官方文件,帶著我們導讀一次,真的是收穫滿滿
也感受到文件的完整性好壞也會影響使用者在使用套件的體驗
也間接影響我寫文件時的編排

我看文件,會官網、Github 搭著一起看
主要都是看以下幾點:

  1. 如何安裝 Installation
  2. 如何使用 Usage / How to Use
  3. 範例 Demo / Example

實地操作

以下以 Slick Carousel 當範例:

Slick 官網
Slick Github

  1. 如何安裝 Installation
    通常都會是在文件的第一篇
    會教學各種引用方式,像是 CDN、NPM installl...等等
    所以當你想試用的時候,這裡就有各種選擇,挑選你合用的方式即可
    以下是 Github 截圖

  2. 如何使用 Usage / How to Use
    這邊會告訴你怎麼使用,包括 HTML 架構Function 起手式
    通常都會有圖例,這對設計師這類的視覺型人,根本救贖!! 浮誇

    有時底下會有一些設定說明,可以用來客製自己想要的效果
    剛開始看說明都不太會有問題,可以靠中文翻譯軟體幫忙
    主要會卡的地方是...不懂要放在哪邊啊啊啊啊!!!!

  3. 範例 Demo / Example
    這時,文件有無提供 Demo / Example 就很重要了
    我覺得 Slick 的官網在這一塊就寫得不錯
    超。級。清。楚(視覺型人快給予掌聲!!)

以下為官網截圖:

有沒有~~而且上方還有範例可以看效果,用來確認或是用來說明
下面就是 Function 使用方式,可以從裡面看到剛剛我們不知道要放哪裡的設定值或是屬性,其他就剩下自己實作和花時間看其他細部說明了


以上,就是我剛開始看文件的方式與心得
說真的,其實學習技術不外乎就是思考、看文件、實作
重複一直做一直做,接下來就會慢慢找到你自己的節奏

加油,一起 Gogogo


上一篇
前端心法碎碎念 - 其實 HTML架構 和 CSS樣式 很重要!!
下一篇
設計看文件 - JS Coding Style / Guideline
系列文
前端設計轉前端工程師-JS踩坑雜記 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言