成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

徒手?jǐn)]UI之TimePicker

Codeing_ls / 1426人閱讀

摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態(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的想法

過程還是非常有意思的

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

這一篇介紹TimePicker日期選擇器

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

QingUI
少廢話，先上圖

當(dāng)前時間

介紹DatePicker的文章寫的時候已經(jīng)凌晨了，畢竟那天commit了50多次，所以有點草率，這回我盡量寫的清楚一點

初始加載TimePicker的時候肯定顯示當(dāng)前的時間，所以我們首先要獲取當(dāng)前的時間

當(dāng)前時間好說，只是ES6提供了解構(gòu)賦值正好可以在這里派上用場

直接返回一個數(shù)組，需要的時候一次性賦值就好了

如果不需要這么多，沒問題，ES6不僅可以批發(fā)，還可以零售，貼不貼心！

為什么秒不直接賦值呢？因為我覺得很少有場景我們需要精確到秒，還不如初始直接給個0，省的別人點一下，他要精確到秒是他的事

constructor() {
    [this.H, this.M, ] = this.nowTime();
    this.S = 0;
}

nowTime() {
    const date = new Date();
    return [date.getHours(), date.getMinutes(), date.getSeconds()];
}

當(dāng)用戶選擇的時候，選中的就會高亮，之前的高亮?xí)∠?/p>

我們可以粗暴一點，每次點擊都運行一個for循環(huán)，找到高亮，取消高亮，場子清完以后再將當(dāng)前選中的高亮

不過這樣性能肯定是不好的

如果我把選中的時間緩存起來

每次點擊的時候我還記得上次高亮的在哪，直接處理它就好了，少了一個for循環(huán)是不是好多了

不過要注意，每次點擊都要把新值緩存，它就是個跟屁蟲，可不能掉隊

constructor() {
    [this.oldH, this.oldM, this.oldS] = [this.H, this.M, this.S];
}
切換

時鐘、分鐘、秒鐘，總共有三個面板，所以我設(shè)置三個按鈕，時間格動態(tài)渲染

假如用戶點擊時鐘按鈕，他要怎么辨別剛才點的是哪個按鈕呢？

下意識的，我們會想到，當(dāng)前活躍的，我們就給它置灰，以來作區(qū)分，二來省的用戶無聊老在一個地方點來點去造成重復(fù)渲染

我以前也有過一點經(jīng)驗，就是button的disabled屬性并不是通過true和false來控制的

真正控制它是否置灰的，是有沒有這個屬性

我覺得這個設(shè)計...

所以我們寫一個控制置灰的函數(shù)，同樣，oldDisabled是用來緩存的

ableAndDisableEvent(ableNode) {
    if (this.oldDisabled) {
        this.oldDisabled.removeAttribute("disabled");
    }
    ableNode.setAttribute("disabled", "");
    this.oldDisabled = ableNode;
}

有時候我們有這樣的需求，雖然點擊事件是響應(yīng)用戶操作的，但偶爾我們自己也希望觸發(fā)一下事件

用戶可以觸發(fā)點擊事件，那么程序可以嗎？

其實是可以的，.click()，就這么簡單

說實話這個我也是第一次見，可能是我比較孤陋寡聞吧...

this.oldDisabled.click();
轉(zhuǎn)數(shù)字

當(dāng)我們點擊時，獲取到的innerHTML實際上是一個字符串

我希望在入口把關(guān)，保證this.H; this.M; this.S;都是數(shù)字類型

于是我們就要把字符串類型的數(shù)字轉(zhuǎn)成真數(shù)字，這倒不難

我曾經(jīng)測過幾種字符串類型的數(shù)字轉(zhuǎn)成真數(shù)字的方法，當(dāng)然，我說的是正整數(shù)

parseInt()

parseFlout()

Number()

Math.floor()

num - 0

性能肯定是num - 0最好，但是這樣并不是特別正規(guī)

除此之外，性能最好的是parseInt()，parseFlout()要考慮小數(shù)位，Number()估計是內(nèi)部的類型轉(zhuǎn)換比較復(fù)雜

除了語義化并不是特別好之外，我平常都喜歡用parseInt()

但這不是重點

重點是ES6在Number下面也掛載了該方法，window.parseInt()和Number.parseInt()都是可以的，為什么這樣做呢？

因為JS的全局對象window實在是太復(fù)雜了，它不僅是全局對象，還是窗口對象，連所有的全局變量都掛在它下面

所以W3C希望改變這個現(xiàn)狀，盡量減少甚至取消window下面的屬性

這也是為什么在ES6模塊內(nèi)，指向全局的this等于undefined

所以，如果兼容性允許的話，盡量用Number.parseInt()代替window.parseInt()，為美妙的JS盡一份力

離Everything Based On JavaScript就不遠(yuǎn)了吧

格式化

比較正規(guī)的時間表盤都會顯示兩位數(shù)，比如3點20分，會寫成03: 20

所以我們也需要一個兩位數(shù)的格式化函數(shù)

為什么需要String(num).length === 1這個判斷條件？

因為有時傳進(jìn)來的參數(shù)已經(jīng)格式化過了，而它實際上又小于10，所以需要過濾掉它們

twoDigitsFormat(num) {
    if (String(num).length === 1 && num < 10) {
        num = `0${num}`;
    }
    return num;
}

然后我再用一個漏斗函數(shù)把變化收集起來，統(tǒng)一更新

timeChangeEvent(hour, minute, second) {
    hour ? this.H = hour : "";
    minute ? this.M = minute : "";
    second ? this.S = second : "";
    this.$view.innerHTML = this.timeFormat(this.H, this.M, this.S);
}

至于顯示成最終的時間格式，我們有它

timeFormat(hour = 0, minute = 0, second = 0) {
    hour = this.twoDigitsFormat(hour);
    minute = this.twoDigitsFormat(minute);
    second = this.twoDigitsFormat(second);
    return `${hour} : ${minute} : ${second}`;
}
寫在后面

首先，這個時間選擇器確實不好看，我將來可能會重構(gòu)

然后，時間選擇器也確實比較簡單，比日期選擇器代碼少多了

不過還是可以自己嘗試著自己寫一個，一切都在細(xì)節(jié)里

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

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

QingUI

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93667.html

相關(guān)文章

  • 徒手擼UI之DatePicker

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

    zilu 評論0 收藏0

  • 徒手擼UI之Paginator

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

    liuhh 評論0 收藏0

  • 徒手擼UI之Cascader

    摘要：但是如果一剎那我不想選江疏影了，我想選張雨綺因為胸大，首先我要從霍思燕換到高圓圓，然后轉(zhuǎn)到張雨綺，選中展示出來，這時候就要先刪除霍思燕，然后把高圓圓和張雨綺進(jìn)來。 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, I...

    junnplus 評論0 收藏0

  • 徒手擼UI之Tree

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

    2i18ns 評論0 收藏0

  • 一言不合造輪子--擼一個ReactTimePicker

    摘要：時間選擇的表盤其實有兩個，一個是小時的選擇，另一個則是分鐘的選擇。也就是說，第一步選擇小時，第二部選擇分鐘它是一個小時制的時間選擇器。而則用于處理拖拽事件，標(biāo)記著當(dāng)前是否處于被拖拽狀態(tài)。 本文的源碼全部位于github項目倉庫react-times，如果有差異請以github為準(zhǔn)。最終線上DEMO可見react-times github page 文章記錄了一次創(chuàng)建獨立React組件...

    lifesimple 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<