Skip to main content

Recent posts

AC 推特專案 工具應用．解決問題

解決問題情境:#

時間處理套件的選擇和熟悉

規格說明:#

在設計稿上，每則推文在各頁面有不同的時間顯示方式，而且會根據距離現在時間間隔而顯示不同。

相關 repo 程式碼:#

mixins.js

詳細狀況敘述：#

學期三的餐廳論壇專案裡，PJ 老師有示範使用 moment.js 來實作 Vue filter 功能 fromNowFilter。 因此對 moment.js 較為熟悉。 不過推特專案的時間格式顯示會依據場景有不同格式且依據距離現在時間而有不同的呈現方式。如下附圖

spec

參考了 moment.js 文件，覺得時間距離現今多久的判斷比較不方便撰寫，若是使用 moment.js 程式碼可能如下

moment.js
export const fromNowFilter = {
filters: {
shortenTime(dataTime) {
let time = moment(dataTime).locale('zh-tw').fromNow()
if (time.includes('天', '月', '年')) {
time = moment(dataTime).locale('zh-tw').format('MMMDo')
}
return time || '-'
},
},
}

在專案開始之前對於 moment.js 的缺點略有所聞，便開始探索其他相關的時間處理套件。發現 Day.js 能滿足大部分的功能。

從 dayjs 文件中發現 Difference 這個方法，而且單位可以藉由第二個引數決定，判斷時間相距會更為方便。

Day.js
export const fromNowFilter = {
filters: {
fromNowFilter(dateTime) {
const now = dayjs()
const fromNowTime = now.diff(dateTime, 'hour')
return fromNowTime > 24
? dayjs(dateTime).format('M月DD日')
: dayjs(dateTime).fromNow(true)
},
},
}

最後決定使用 day.js 考量還包含 moment.js 功能雖然豐富但是打包體積不小且開發者沒有繼續維護。而 Day.js 非常輕量，必要下只需要引入需要用到的套件，文件很清楚容易上手。

只引入了所需的套件
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' //Time from now
import 'dayjs/locale/zh-tw' // localize
dayjs.extend(relativeTime).locale('zh-tw')
tip

同時也有搜尋 date fns，最後以文件說明，首先嘗試 dayjs，運用上很喜歡，由於推特專案的時間考量，就沒再多花時間嘗試 day fns。

評估後和前端組員討論取的共識上，專案上時間處理相關都使用了 dayjs 處理。日後前端組員 PINPIN 也很順利地使用 day.js 完成 推文詳情的時間格式 filter

timeFormatFilter
export const timeFormatFilter = {
filters: {
timeFormatFilter(dateTime) {
const prefix = dayjs(dateTime).hour() > 12 ? '下午' : '上午'
return prefix + dayjs(dateTime).format(' hh:mm・YYYY年M月DD日')
},
},
}

AC 2–1 心得

UI 轉前端之路

年初上了 PJ 老師在 ALPHA Camp 開的 React 專案應用直播班，幾周下來蠻喜歡 AC 課程模式和節奏，想了一下，就報名了 ALPHA Camp 正式的課程。

這之中也在猶豫要從 2–2 還是 2-1 開始上，react 班時認識的編課助教是建議可以挑戰從 2–2 開始，儘管抱持著對自己懷疑還是先報名 2–1，開課將即的周末，先預讀了課程內容，發現還是太吃力，有蠻多觀念和基本功自己其實沒有建立起來，所幸和助教與信件溝通，在開課前夕退課從 2–1 開始報名。

2–1 課幾周上完，證明了先從 2-1 開始上最為接近自己這次報名 alphacamp 課程的目的。如果運用前端某個框架，完成一個專案並上線為標準，自己不是第一次接觸前端，甚至回顧自己能夠已 UIUX 設計師為職業，也是從 Fontech 的前端實習計畫開始。但過去所有學習或接觸前端的機會，我都已能快速做出專案並順利上線為主。說實話連 DOM 運作的原理 、Javascript 基本運算子掌握度非常的低。很多專案都在 html css 和查詢 stackoverflow 下 複製 code 貼 code 完成，這樣的狀況雖然能應付蠻多小型專案，但在 React 流行的時代，自己的基礎已經不扎實的缺點也浮現出來。在懷疑自己能不能理解程式的過程裡，並決定在職涯的階段先往 UIUX 發展。

這一次再給自己一次機會學習程式，便希望自己能好好的理解每一個基礎，再去編寫程式。學習運用程式解決問題。