資訊專欄INFORMATION COLUMN
摘要：是一個(gè)組件庫(kù)目前擁有的組件語(yǔ)法編寫，無(wú)依賴原生模塊化，以上支持，請(qǐng)開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來(lái)倉(cāng)庫(kù)四月份找工作，求內(nèi)推，坐標(biāo)深圳寫在前面去年年底項(xiàng)目中嘗試著寫過一個(gè)分頁(yè)的組件，然后就有了寫的想法
QingUI是一個(gè)UI組件庫(kù)寫在前面
目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, Input
ES6語(yǔ)法編寫，無(wú)依賴
原生模塊化，Chrome63以上支持，請(qǐng)開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門
采用CSS變量配置樣式
辛苦造輪子，歡迎來(lái)github倉(cāng)庫(kù)star：https://github.com/veedrin/qing
四月份找工作，求內(nèi)推，坐標(biāo)深圳
去年年底項(xiàng)目中嘗試著寫過一個(gè)分頁(yè)的Angular組件，然后就有了寫QingUI的想法
過程還是非常有意思的
接下來(lái)我會(huì)用幾篇文章分別介紹每個(gè)組件的大概思路，請(qǐng)大家耐心等待
這一篇介紹TimePicker日期選擇器
最重要的，求star，求fork，求內(nèi)推
QingUI少?gòu)U話，先上圖 當(dāng)前時(shí)間
介紹DatePicker的文章寫的時(shí)候已經(jīng)凌晨了，畢竟那天commit了50多次，所以有點(diǎn)草率，這回我盡量寫的清楚一點(diǎn)
初始加載TimePicker的時(shí)候肯定顯示當(dāng)前的時(shí)間，所以我們首先要獲取當(dāng)前的時(shí)間
當(dāng)前時(shí)間好說，只是ES6提供了解構(gòu)賦值正好可以在這里派上用場(chǎng)
直接返回一個(gè)數(shù)組，需要的時(shí)候一次性賦值就好了
如果不需要這么多，沒問題，ES6不僅可以批發(fā)，還可以零售，貼不貼心！
為什么秒不直接賦值呢？因?yàn)槲矣X得很少有場(chǎng)景我們需要精確到秒，還不如初始直接給個(gè)0，省的別人點(diǎn)一下，他要精確到秒是他的事
constructor() {
[this.H, this.M, ] = this.nowTime();
this.S = 0;
}
nowTime() {
const date = new Date();
return [date.getHours(), date.getMinutes(), date.getSeconds()];
}
當(dāng)用戶選擇的時(shí)候，選中的就會(huì)高亮，之前的高亮?xí)∠?/p>
我們可以粗暴一點(diǎn)，每次點(diǎn)擊都運(yùn)行一個(gè)for循環(huán)，找到高亮，取消高亮，場(chǎng)子清完以后再將當(dāng)前選中的高亮
不過這樣性能肯定是不好的
如果我把選中的時(shí)間緩存起來(lái)
每次點(diǎn)擊的時(shí)候我還記得上次高亮的在哪，直接處理它就好了，少了一個(gè)for循環(huán)是不是好多了
不過要注意，每次點(diǎn)擊都要把新值緩存，它就是個(gè)跟屁蟲，可不能掉隊(duì)
constructor() {
[this.oldH, this.oldM, this.oldS] = [this.H, this.M, this.S];
}
切換
時(shí)鐘、分鐘、秒鐘，總共有三個(gè)面板，所以我設(shè)置三個(gè)按鈕，時(shí)間格動(dòng)態(tài)渲染
假如用戶點(diǎn)擊時(shí)鐘按鈕，他要怎么辨別剛才點(diǎn)的是哪個(gè)按鈕呢？
下意識(shí)的，我們會(huì)想到，當(dāng)前活躍的，我們就給它置灰，以來(lái)作區(qū)分，二來(lái)省的用戶無(wú)聊老在一個(gè)地方點(diǎn)來(lái)點(diǎn)去造成重復(fù)渲染
我以前也有過一點(diǎn)經(jīng)驗(yàn)，就是button的disabled屬性并不是通過true和false來(lái)控制的
真正控制它是否置灰的，是有沒有這個(gè)屬性
我覺得這個(gè)設(shè)計(jì)...
所以我們寫一個(gè)控制置灰的函數(shù)，同樣，oldDisabled是用來(lái)緩存的
ableAndDisableEvent(ableNode) {
if (this.oldDisabled) {
this.oldDisabled.removeAttribute("disabled");
}
ableNode.setAttribute("disabled", "");
this.oldDisabled = ableNode;
}
有時(shí)候我們有這樣的需求，雖然點(diǎn)擊事件是響應(yīng)用戶操作的，但偶爾我們自己也希望觸發(fā)一下事件
用戶可以觸發(fā)點(diǎn)擊事件，那么程序可以嗎？
其實(shí)是可以的，.click()，就這么簡(jiǎn)單
說實(shí)話這個(gè)我也是第一次見，可能是我比較孤陋寡聞吧...
this.oldDisabled.click();轉(zhuǎn)數(shù)字
當(dāng)我們點(diǎn)擊時(shí)，獲取到的innerHTML實(shí)際上是一個(gè)字符串
我希望在入口把關(guān)，保證this.H; this.M; this.S;都是數(shù)字類型
于是我們就要把字符串類型的數(shù)字轉(zhuǎn)成真數(shù)字，這倒不難
我曾經(jīng)測(cè)過幾種字符串類型的數(shù)字轉(zhuǎn)成真數(shù)字的方法，當(dāng)然，我說的是正整數(shù)
parseInt()
parseFlout()
Number()
Math.floor()
num - 0
性能肯定是num - 0最好，但是這樣并不是特別正規(guī)
除此之外，性能最好的是parseInt()，parseFlout()要考慮小數(shù)位，Number()估計(jì)是內(nèi)部的類型轉(zhuǎn)換比較復(fù)雜
除了語(yǔ)義化并不是特別好之外，我平常都喜歡用parseInt()
但這不是重點(diǎn)
重點(diǎn)是ES6在Number下面也掛載了該方法，window.parseInt()和Number.parseInt()都是可以的，為什么這樣做呢？
因?yàn)镴S的全局對(duì)象window實(shí)在是太復(fù)雜了，它不僅是全局對(duì)象，還是窗口對(duì)象，連所有的全局變量都掛在它下面
所以W3C希望改變這個(gè)現(xiàn)狀，盡量減少甚至取消window下面的屬性
這也是為什么在ES6模塊內(nèi)，指向全局的this等于undefined
所以，如果兼容性允許的話，盡量用Number.parseInt()代替window.parseInt()，為美妙的JS盡一份力
離Everything Based On JavaScript就不遠(yuǎn)了吧
格式化比較正規(guī)的時(shí)間表盤都會(huì)顯示兩位數(shù)，比如3點(diǎn)20分，會(huì)寫成03: 20
所以我們也需要一個(gè)兩位數(shù)的格式化函數(shù)
為什么需要String(num).length === 1這個(gè)判斷條件？
因?yàn)橛袝r(shí)傳進(jìn)來(lái)的參數(shù)已經(jīng)格式化過了，而它實(shí)際上又小于10，所以需要過濾掉它們
twoDigitsFormat(num) {
if (String(num).length === 1 && num < 10) {
num = `0${num}`;
}
return num;
}
然后我再用一個(gè)漏斗函數(shù)把變化收集起來(lái)，統(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);
}
至于顯示成最終的時(shí)間格式，我們有它
timeFormat(hour = 0, minute = 0, second = 0) {
hour = this.twoDigitsFormat(hour);
minute = this.twoDigitsFormat(minute);
second = this.twoDigitsFormat(second);
return `${hour} : ${minute} : ${second}`;
}
寫在后面
首先，這個(gè)時(shí)間選擇器確實(shí)不好看，我將來(lái)可能會(huì)重構(gòu)
然后，時(shí)間選擇器也確實(shí)比較簡(jiǎn)單，比日期選擇器代碼少多了
不過還是可以自己嘗試著自己寫一個(gè)，一切都在細(xì)節(jié)里
下一篇文章介紹Paginator，敬請(qǐng)期待
最后，求star，求fork，求內(nèi)推
QingUI
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/93667.html
摘要：是一個(gè)組件庫(kù)目前擁有的組件語(yǔ)法編寫，無(wú)依賴原生模塊化，以上支持，請(qǐng)開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來(lái)倉(cāng)庫(kù)四月份找工作，求內(nèi)推，坐標(biāo)深圳寫在前面去年年底項(xiàng)目中嘗試著寫過一個(gè)分頁(yè)的組件，然后就有了寫的想法 QingUI是一個(gè)UI組件庫(kù)目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...
摘要：是一個(gè)組件庫(kù)目前擁有的組件語(yǔ)法編寫，無(wú)依賴原生模塊化，以上支持，請(qǐng)開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來(lái)倉(cāng)庫(kù)四月份找工作，求內(nèi)推，坐標(biāo)深圳寫在前面去年年底項(xiàng)目中嘗試著寫過一個(gè)分頁(yè)的組件，然后就有了寫的想法 QingUI是一個(gè)UI組件庫(kù)目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...
摘要：但是如果一剎那我不想選江疏影了，我想選張雨綺因?yàn)樾卮螅紫任乙獜幕羲佳鄵Q到高圓圓，然后轉(zhuǎn)到張雨綺，選中展示出來(lái)，這時(shí)候就要先刪除霍思燕，然后把高圓圓和張雨綺進(jìn)來(lái)。 QingUI是一個(gè)UI組件庫(kù)目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, I...
摘要：是一個(gè)組件庫(kù)目前擁有的組件語(yǔ)法編寫，無(wú)依賴原生模塊化，以上支持，請(qǐng)開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來(lái)倉(cāng)庫(kù)四月份找工作，求內(nèi)推，坐標(biāo)深圳寫在前面去年年底項(xiàng)目中嘗試著寫過一個(gè)分頁(yè)的組件，然后就有了寫的想法 QingUI是一個(gè)UI組件庫(kù)目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...
摘要：時(shí)間選擇的表盤其實(shí)有兩個(gè)，一個(gè)是小時(shí)的選擇，另一個(gè)則是分鐘的選擇。也就是說，第一步選擇小時(shí)，第二部選擇分鐘它是一個(gè)小時(shí)制的時(shí)間選擇器。而則用于處理拖拽事件，標(biāo)記著當(dāng)前是否處于被拖拽狀態(tài)。 本文的源碼全部位于github項(xiàng)目倉(cāng)庫(kù)react-times，如果有差異請(qǐng)以github為準(zhǔn)。最終線上DEMO可見react-times github page 文章記錄了一次創(chuàng)建獨(dú)立React組件...
閱讀 2231·2021-09-24 10:31
閱讀 3880·2021-09-22 15:16
閱讀 3400·2021-09-22 10:02
閱讀 1016·2021-09-22 10:02
閱讀 1832·2021-09-08 09:36
閱讀 1980·2019-08-30 14:18
閱讀 613·2019-08-30 10:51
閱讀 1870·2019-08-29 11:08
