寫一個構建複雜數據的日曆組件 Kalendar

需求：咱們常常會在一些旅遊、訂票、酒店的頁面中看到一些日曆，這些日曆有公曆、農曆、節假日、非節假日（調休）的標註，同時還有產品業務上的信息，好比 票價、餘票等等。那如今開始造造輪子了，首先這個組件應該能夠生成一個基本的日曆，而且掛入一些擴展的信息在每一天的對象上。它可能看上去應該像這樣⤵，或者更復雜。

---

---

GitHub ｜ NPM ｜ Demo

注：這是一個無關UI的組件，咱們要作的只是如何去構建一個這樣的日曆對象。

設計組件

日曆的展示通常是一個表格，咱們須要將每一天的信息放入表格，生成一個月或幾個月的完整日曆。

1. 查詢當前月份有多少天
2. 計算這個月的第一天前面空了幾天（須要考慮日曆起點，週一開始或週日開始）
3. 若是有空天，放入須要跳過的天數
4. 生成有數據的 每一天 的數據
5. 放有數據的對象到月份表格中

查詢月份總天數

這個函數很是簡單，它接收一個參數 date ,可變天數爲 2 月，這裏進行閏年判斷便可。

export function getMonthDays(date) {
    const year = date.getFullYear()
    const month = date.getMonth()
    const leapYear = !(year % 4) && ((year % 100) || !(year % 400))
    const days = [31, leapYear ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    return days[month]
}
複製代碼

四年一閏，百年不閏，四百年再閏。

請注意這裏參數的 date ， 頗有多是 new Date() ，好比當天爲 2018-08-31 , 當用戶得到正常的本月數據後，再直接設置月份，如向上翻到 6 月時就會出現問題，由於 6 月沒有 31 天，此時的 date 會獲得 7 月 1 號的日期，與預期不符。 因此在操做完 date 後必定要注意將日期設置爲 1 號。

const days = utils.getMonthDays(date)
date.setDate(1)
複製代碼

建立一天的信息

天天的信息應該包含一些公共的屬性，這些屬性來自於 date 對象中，還有一些源於用戶的擴展字段。這裏我用一個類來構造這個對象。

class Day {
    constructor(dateObj, extension = {}) {
        this.year = dateObj.getFullYear()
        this.month = dateObj.getMonth()
        this.date = dateObj.getDate()
        this.day = dateObj.getDay()
        this.dateText = utils.getChinaStandard(dateObj)
        this.past = this.toDay.getTime() > dateObj.getTime()
        this.today = utils.getChinaStandard(new Date()) === this.dateText
        this.timestamp = dateObj.getTime()
        const _self = this
        Object.keys(extension).forEach(key => {
            _self[key] = extension[key]
        })
    }

    get toDay() {
        const date = new Date()
        date.setHours(0)
        date.setMinutes(0)
        date.setSeconds(0)
        date.setMilliseconds(0)
        return date
    }
}
複製代碼

註釋：

• past 屬性可能會出如今買票的場景中，過去的時間不能購票
• today 判斷是不是今天
• dateText 生成一個字符串格式的日期
• toDay() 函數用於抹平小時及如下的時間

生成一個月的表格

這個對象是二維數組的形式，一個月中有若干周，每週的數組中存放天天的對象

將 monthly 方法設計爲靜態方法，方便調用者經過 Kalendar.monthly() 快速構建某一個月的數據對象，

參數

• date 生成月份的 date 對象
• mount 須要擴展那些信息
• weekStart 設置一週的開始爲周幾，默認週日
• unifiedMount 全部日期都須要擴展的信息

static monthly({date, mount = {}, weekStart = 0, unifiedMount = {}}) {
        const monthTable = []
        const days = utils.getMonthDays(date)
        date.setDate(1)
        const day = date.getDay()
        let skip = 0
        if (day !== weekStart) skip = day - weekStart
        for (let i = 0; i < days + skip; i += 7) {
            const week = []
            let num = 7
            if (!i && skip) {
                for (let k = 0; k < skip; k++) week.push(null)
                num -= skip
            }
            for (let j = 0; j < num; j++) {
                const dateText = utils.getChinaStandard(date)
                week.push(new Day(date, Object.assign({}, unifiedMount, mount[dateText])))
                if (date.getDate() >= days) break
                date.setDate(date.getDate() + 1)
            }
            monthTable.push(week)
        }
        return monthTable
    }
複製代碼

unifiedMount 全部日期都要添加的多是票價，或者一些默認數據

var unifiedMount = {
        total: 1000,
        price: 550,
        bg: 'info'
    }
複製代碼

mount 是一些具體日期的數據，好比某一天票已售罄，應該禁用這一天的選擇

var mount = {
        '2018-08-30': {
            total: 0,
            price: 550
        },
        '2018-08-31': {
            total: 10,
            price: 750
        },
    }
複製代碼

構建長期的日曆對象

在一些移動端的場景，每每是一次性獲取三個月或更長的時間，滑動顯示的效果。

我在 Kalendar 類中的構造函數中 返回了 _create() 函數，_create() 函數用戶生成多個月的信息。

class Kalendar {
    constructor({start, end, unifiedMount = {}, mount = {}, weekStart = 0} = {}) {
        this.startTime = start
        this.endTime = end
        this.unifiedMount = unifiedMount
        this.mount = mount
        this.weekStart = weekStart
        return this._create()
    }
    
    ......
    
    _create() {
        const {mount, weekStart, unifiedMount} = this
        const table = {}
        let count = (this.endDate.getFullYear() * 12 + this.endDate.getMonth() + 1)
            - (this.startDate.getFullYear() * 12 + this.startDate.getMonth() + 1)
        if (count < 0) return null
        let idx = 0
        do {
            const date = this.startDate
            date.setMonth(date.getMonth() + idx)
            const monthTable = Kalendar.monthly({date, mount, weekStart, unifiedMount})
            table[utils.getChinaStandard(date, true)] = monthTable
            count--
            idx++
        } while (count > 0)
        return table
    }
    
    static monthly({date, mount = {}, weekStart = 0, unifiedMount = {}}) {
        ......
    }
}
複製代碼

相比生成一個月的數據，構造函數須要設置 日期起止值，在計算相差月份後，循環調用 monthly 函數，避免 startTime 和 endTime 是同一個月，沒有月份差，這裏使用 do ... while 至少產生一個月的數據。

打包與發佈

爲了得到更小的體積，我使用 rollup 構建組件代碼，並使用 MIT 協議 npm publish 。

GitHub ｜ NPM ｜ Demo