本文首發(fā)于我的博客
關(guān)于DatePick的一些記錄
近期因?yàn)橛昧藇ue2+webpack2來(lái)重構(gòu)公司的老項(xiàng)目，在一路踩坑一路學(xué)習(xí)的過程中一邊驚嘆于框架的便利一邊增加了自己對(duì)組件化開發(fā)了有了一點(diǎn)淺薄的認(rèn)知，恰逢構(gòu)建了博客，所以就拿這篇文章來(lái)開荒。
在閱讀本文之前先熟悉源碼與相關(guān)Api或許更好
源碼地址Github
相關(guān)資料Vue2
DatePick- 自我介紹
DataPick是為了滿足公司業(yè)務(wù)對(duì)日期選擇器的需求而生的，功能上兼容性與靈活性還是有一定保證，但是由于ui風(fēng)格的原因不一定能適合其他場(chǎng)景。所以本文只是做一下流程復(fù)盤增加自己對(duì)開發(fā)此類組件的思考。
一.確認(rèn)需求
想單獨(dú)抽分出來(lái)的主要原因是因?yàn)楣径鄠€(gè)系統(tǒng)的ui風(fēng)格基本都是保持一致，并且在時(shí)間查詢上面幾乎都有需求，秉著復(fù)用性原則，所以決定單獨(dú)抽分出來(lái)。
來(lái)，先看一下需求。
1.我們所需要的日期選擇器,而關(guān)于日期在js中是有著內(nèi)置對(duì)象Date,對(duì)原生Api有疑惑的朋友可以點(diǎn)擊這里直接查詢Date對(duì)象的相關(guān)知識(shí)。
2.可以看到最上面一欄是分為三欄，中間自然不用多說。最醒目的位置顯示當(dāng)前的年月(其實(shí)可以考慮在上面增加點(diǎn)擊功能直接跳轉(zhuǎn)到遠(yuǎn)處事件，從而避免翻頁(yè)多次)，其次就是兩邊的翻頁(yè)按鈕，用來(lái)切換年月。
3.就是底部的日期塊，也是我們最核心的功能部分，由當(dāng)前月份所有的天數(shù)與上月與下月的一部分組成。
二.設(shè)計(jì)思路
需求已經(jīng)了解了，那么就開始設(shè)計(jì)思路
1.因?yàn)槭腔趘ue2的，我們可以直接通過操作數(shù)據(jù)源的方式來(lái)驅(qū)動(dòng)視圖更新,所以我們首先需要數(shù)據(jù)源的設(shè)計(jì)。
data(){
return{
//當(dāng)前的年月，直接通過原生函數(shù)獲得
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
//上月剩余日期的數(shù)組
previousMonth: [],
//下月剩余日期的數(shù)組
nextMonth: [],
//一年12月
monthDay: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
}
}
很關(guān)鍵的地方，在于2月份的天數(shù)處理，因?yàn)樵陂c年的時(shí)候2月是有29號(hào)的。
最初的年月我們已經(jīng)得知，那現(xiàn)在就只需要算出當(dāng)天是幾號(hào)就可以完成初始化的日期正確顯示,
可以利用created()勾子與getDate()直接初始化完成。
這樣我們的年月日初始化就完成了
2.再就是header兩邊的翻頁(yè)按鈕，其中翻頁(yè)直接計(jì)算年月沒啥說的，只需要對(duì)月份進(jìn)行一次判斷而已。
核心的部分在于上月與下月的填充，其特點(diǎn)是當(dāng)月的第一天與最后一天分別往前后趕，比如7月1日是周六，那么自然前面剩余的就是5天，也就是6月30日往前推5天就是所要顯示的部分，而下一個(gè)月的求值也是如此，只不過是相反的方向。
這是可以利用星期數(shù)來(lái)確認(rèn)的，再根據(jù)上月與下月的總天數(shù)進(jìn)行循環(huán)操作，整體通過watch去監(jiān)聽來(lái)觸發(fā)，就可以完成整套邏輯流程。
如何使用，詳細(xì)代碼請(qǐng)移步Github
歡迎issues指點(diǎn)
三.總結(jié)思考
可以發(fā)現(xiàn)整套下來(lái)對(duì)Date對(duì)象的利用還有其他一些小細(xì)節(jié)的計(jì)算是需要細(xì)心處理的。并且依靠于Vue的數(shù)據(jù)驅(qū)動(dòng)讓我們極大地簡(jiǎn)化了開發(fā)過程，變相的提升了開發(fā)效率。
但是我們也不能過于依賴框架，畢竟這些都只是工具。
其實(shí)目前的功能還比較簡(jiǎn)單，比如ui上切換可以加入滑動(dòng)動(dòng)畫，?日期選擇的時(shí)候可以加入hover動(dòng)畫都是能很大增加用戶體驗(yàn)的。并且提升空間還有很大。
日后找時(shí)間補(bǔ)充完善。
如果您有空，請(qǐng)往Github點(diǎn)個(gè)star是對(duì)我最大的鼓勵(lì)
