摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內(nèi)推，坐標(biāo)深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法

QingUI是一個UI組件庫
目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, Input
ES6語法編寫，無依賴
原生模塊化，Chrome63以上支持，請開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門
采用CSS變量配置樣式
辛苦造輪子，歡迎來github倉庫star：https://github.com/veedrin/qing
四月份找工作，求內(nèi)推，坐標(biāo)深圳

去年年底項目中嘗試著寫過一個分頁的Angular組件，然后就有了寫QingUI的想法

過程還是非常有意思的

接下來我會用幾篇文章分別介紹每個組件的大概思路，請大家耐心等待

這一篇介紹DatePicker日期選擇器

最重要的，求star，求fork，求內(nèi)推

https://github.com/veedrin/qing

ES6的類語法糖非常順手，用ES6寫代碼就像吃德芙巧克力一樣哈哈

然后DatePicker和TimePicker有一些公共的方法，我用一個公共類，讓它們倆繼承

extends就是繼承關(guān)鍵字

super是用來繼承父類的this對象的，它必須首先調(diào)用，否則無法找到this

主要是為了照顧對ES6不熟悉的人

class Common {
    constructor() {}
}

class DatePicker extends Common {
    constructor() {
        super();
    }
}

不知道大家觀察過沒有，每一頁日歷都是按星期來排的，展示當(dāng)月的所有日期

所以，如果該月的1號不是星期一或者星期天呢？那還要從上個月抓幾天過來，把空補(bǔ)齊，月底也一樣

為了方便，下面都以星期一為一周起始日

當(dāng)月所有日期容易，獲取當(dāng)月有多少天，for循環(huán)加到模板里

那月首補(bǔ)齊的呢？我要知道這個月1號是星期幾，還要知道上個月最后一天是多少號，然后少幾天，往前推幾天就好了

月底補(bǔ)齊的就簡單一點(diǎn)，我要知道這個月最后一天是星期幾，然后少幾天，從1號往后加幾天

const daysCountThisMonth = this.daysCountThisMonth();
const daysCountLastMonth = this.daysCountThisMonth(-1);
// weekie指的是星期幾（自創(chuàng)）
const weekieFirstDay = this.weekieOfSomedayThisMonth(1);
const weekieLastDay = this.weekieOfSomedayThisMonth(daysCountThisMonth);

if (weekieFirstDay > 1) {
    for (let i = daysCountLastMonth - weekieFirstDay + 2; i <= daysCountLastMonth; i++) {
        tpl += `${i}`;
    }
}
for (let i = 1; i <= daysCountThisMonth; i++) {
    tpl += `${i}`;
}
if (weekieLastDay < 7) {
    for (let i = 1; i <= 7 - weekieLastDay; i++) {
        tpl += `${i}`;
    }
}

這個月有多少天怎么算？

月份參數(shù)傳入下個月，日期參數(shù)傳入0，就可以獲得當(dāng)月最后一天是多少號了

我這里this.M就是當(dāng)月，而程序的月份是要減1的，所以就相當(dāng)于下個月了

某一天是星期幾好求，我就不列出來了

function daysCountThisMonth(num = 0) {
    return new Date(this.Y, this.M + num, 0).getDate();
}

至此，加上flex布局，一個靜態(tài)的日歷就做出來了

還有一個小細(xì)節(jié)，我選中的日期要高亮，當(dāng)天也要有一個背景色，它們倆在初始的時候還應(yīng)該是重合的

當(dāng)天嘛，我緩存的年月和實(shí)時獲取的年月相等，再把實(shí)時獲取的日期和i比對，就是當(dāng)天，加個today的class

而如果實(shí)時獲取的日期和緩存的日期還相等，那么這天不僅是當(dāng)天，還是用戶選中的日子，加個today active的class

剩下的就是用戶選中的不是當(dāng)天，和完全普通的日子

由于選擇年月的時候，日歷都要重新渲染，所以我們只能根據(jù)這些條件來判斷，看起來確實(shí)有些復(fù)雜

for (let i = 1; i <= daysCountThisMonth; i++) {
    if (this.Y === Y && this.M === M && i === D && i !== this.D) {
        tpl += `${i}`;
    } else if (this.Y === Y && this.M === M && i === D && i === this.D) {
        tpl += `${i}`;
    } else if (i === this.D) {
        tpl += `${i}`;
    } else {
        tpl += `${i}`;
    }
}

我之前以為實(shí)例化時把當(dāng)前年月日緩存起來，然后再把用戶選中的年月日緩存起來，兩者一對比，就可以渲染了

其實(shí)我沒有注意到一個問題，就是使用日歷是有可能跨天的，理論上，如果永遠(yuǎn)不關(guān)機(jī)，跨年都可以

如果我在午夜12點(diǎn)左右操作QingUI，那緩存的日期就有可能不準(zhǔn)確，因為已經(jīng)跨天了

至于我是如何發(fā)現(xiàn)這個BUG的，你猜？

所以每次渲染都要實(shí)時獲取當(dāng)前年月日

ES6的解構(gòu)賦值可以讓這個操作非常優(yōu)美

function nowDate() {
    const date = new Date();
    return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
}

const [Y, M, D] = nowDate();

話說就因為這個BUG，我?guī)缀踔貥?gòu)了整個組件

最后，用戶選中高亮是通過添加class的方式實(shí)現(xiàn)的，高亮新的日子，然后把舊的日子高亮去掉

注意，這種操作是不需要重新渲染的，所以一般做法是，把所有日子循環(huán)一遍，去掉高亮，然后添加新的高亮

如果我們將上一個高亮的日子緩存起來呢？是不是就不用每次for循環(huán)了，于是就有了this.oldD

選擇年月有兩種方式，一種是點(diǎn)開面板，直接選擇，一種是點(diǎn)擊三角，每次增1或減1

點(diǎn)擊三角的時候，我設(shè)置成1月再減1，就會變成年份減1，月份變成12月，也就是說月份是可以一直點(diǎn)的

// 置灰時獲取不到元素
if ($monthPrev) {
    $monthPrev.addEventListener("click", function(event) {
        event.stopPropagation();
        self.M--;
        if (self.M > 0) {
            self.yearAndMonthChange("month");
        } else {
            self.M = 12;
            self.Y--;
            self.yearAndMonthChange("both");
        }
    });
}

可真的是這樣嗎？還記得有一個配置項yearRange嗎？

如果年份到了頭，就置灰不能再點(diǎn)了，這是我遇到的第二個坑

如果年份到了頭，年份的減三角就要置灰，但是月份的減三角還是可以點(diǎn)

直到月份變成1，那么年份和月份的減三角都置灰了

加三角的邏輯也一樣

這個邏輯，你們理一理

const [left, right] = this.yearRange;

let tpl = `
    

        

            ?
            
            ?
        
        

            ?
            
            ?
        
    
`;

選擇年份和月份面板，我之前是做成pop彈窗加滾動條的，發(fā)現(xiàn)體驗很糟糕，于是參考ElementUI做到了日歷面板上

這就帶來一個問題，顯示年份面板的時候，日歷實(shí)際上是清除了，選擇完以后再重新渲染日歷，繼續(xù)重構(gòu)...

月份簡單，一個面板就顯示完了

年份有可能一個面板顯示不完，但再怎么樣，也比年份和月份聯(lián)動的情況要簡單是吧

我把用戶選擇的年份緩存起來，因為我希望把用戶選中過的年份放在比較中間的位置，他下次再選的時候，可以從這里繼續(xù)

再結(jié)合yearRange，效果是這樣的

const [left, right] = this.yearRange;
const start = this.anchor - 4 > left ? this.anchor - 4 : left;
const end = this.anchor + 7 < right ? this.anchor + 7 : right;
const [Y, , ] = this.nowDate();
let tpl = `
${this.lang === "en" ? "Choose a Year" : "選擇年份"}
`;
if (this.anchor - 4 > left) {
    tpl += "
?
";
} else {
    tpl += "
?
";
}
tpl += "
";
for (let i = start; i <= end; i++) {
    if (i !== Y) {
        tpl += `${i}`;
    } else {
        tpl += `${i}`;
    }
}
tpl += "
";
if (this.anchor + 7 < right) {
    tpl += "
?
";
} else {
    tpl += "
?
";
}

DatePicker比較核心的邏輯就在這里了

400行左右的代碼，每個人都可以嘗試著寫一遍，很有意思的

下一篇文章介紹TimePicker，敬請期待

最后，求star，求fork，求內(nèi)推

https://github.com/veedrin/qing