在過(guò)去的兩個(gè)多月里，iView?陸續(xù)發(fā)布了 2.9.0 和 2.10.0 兩個(gè)重要版本。這兩個(gè)版本總共有 255 個(gè) commit，超過(guò) 40 項(xiàng)更新。來(lái)看一下，iView 具體都更新了些什么。

完整的更新日志可以到 GitHub releases 查看: 2.9.0:?https://github.com/iview/iview/releases/tag/v2.9.0?2.10.0:?https://github.com/iview/iview/releases/tag/v2.10.0

或者在 iView 文檔的更新日志查看：?https://www.iviewui.com/docs/guide/update

說(shuō)明：由于 2.10.0 存在編譯后文件過(guò)大的問(wèn)題，請(qǐng)更新至 2.10.1

“看得見”的更新

所謂看得見的更新，就是更新后能真實(shí)感受到的東西。這兩個(gè)版本都得感謝兩位瑞典大神?SergioCrisostomo?和?Xotic750?的貢獻(xiàn)，iView 才得以越來(lái)越完善。

日期組件 DatePicker 的重構(gòu)

首先是在 2.10.0 對(duì)日期組件 DatePicker 的重構(gòu)。DatePicker 是 iView 48 個(gè)組件里最復(fù)雜的組件之一。復(fù)雜的功能使得代碼邏輯非常重，在許多新特性的支持上，比如兼容不同國(guó)家的日歷規(guī)范等都很難在此基礎(chǔ)上迭代，不得不推倒重來(lái)。

SergioCrisostomo 之前有開發(fā)過(guò)日期相關(guān)的 JS 庫(kù)（https://github.com/SergioCrisostomo/js-calendar），所以對(duì)日期相關(guān)的功能點(diǎn)和 API 非常熟，iView 也是基于此庫(kù)進(jìn)行的重構(gòu)。

新的日期組件主要增加了以下功能：

1.范圍選擇支持從右往左選擇了。?之前在范圍選擇時(shí)，必須先選起點(diǎn)，再選終點(diǎn)，也就是從左往右選，但很多用戶的習(xí)慣卻剛好相反。該版本則同時(shí)支持兩個(gè)方向的選擇。

2.新增?split-panels?屬性，開啟后，左右兩面板可以不聯(lián)動(dòng)。?之前在范圍選擇時(shí)，左右兩個(gè)面板是聯(lián)動(dòng)的，也就是右邊永遠(yuǎn)比左邊大一個(gè)月，任何一個(gè)面板切換月份或年份，另一個(gè)面板都會(huì)自動(dòng)切換。該版本則可以設(shè)置為不聯(lián)動(dòng)，這樣方便定位起始月份和結(jié)束月份。如圖所示：

3.新增?multiple?屬性，開啟后，可以選擇多個(gè)日期。?雖然之前版本可以用其它 iView 組件組合出來(lái)一個(gè)多選的日期，但效果和交互多少會(huì)打折扣，該版本只要增加屬性?multiple，就可以在一個(gè)日期面板上同時(shí)選擇和呈現(xiàn)多個(gè)日期了。如圖所示：

4.新增屬性?show-week-numbers，開啟后，可以顯示星期數(shù)。?增加這個(gè)屬性，就可以在日歷面板上顯示當(dāng)前是一年的第幾周。如圖所示：

還有其它很多項(xiàng)的更新，比如新增?start-date?屬性，可以設(shè)置面板展開時(shí)默認(rèn)顯示的日期。新增屬性?time-picker-options，可以在 type 為 datetime 和 datetimerange 下，配置 TimePicker 的屬性，比如時(shí)間間隔 steps。完整的更新可以產(chǎn)看更新日志，這里不一一列舉了。

鍵盤可訪問(wèn)性的支持

鍵盤的可訪問(wèn)性，主要是通過(guò)鍵盤的方向鍵、tab鍵、空格鍵等完成表單組件的切換和交互。在填寫一個(gè)表單時(shí)（iView?Form?組件），尤其有用，你可以離開鼠標(biāo)，就完成一個(gè)復(fù)雜表單的填寫與提交。

目前 iView 最新版本支持鍵盤可訪問(wèn)性的組件有：?Button、Input、Radio、Checkbox、Switch、AutoComplete、Slider、InputNumber。更多組件還在陸續(xù)支持中。

事實(shí)上，原生的表單控件，瀏覽器都是支持鍵盤的可訪問(wèn)性的，比如?<button>、<input type="radio">?等等。iView 對(duì)這些原生控件進(jìn)行了重塑，不僅僅使得 UI 好看和統(tǒng)一，更重要的是功能的豐富和交互體驗(yàn)的提升。

目前上述的組件，都是可以通過(guò)鍵盤的?tab鍵?選中的，這是第一步，如圖所示：

可以看到，組件在被選中時(shí)，外面多了一個(gè)高亮層，表明當(dāng)前選中的控件，這時(shí)就可以通過(guò)鍵盤其它按鍵繼續(xù)操作了，比如單選組件?Radio，在選中狀態(tài)下，可以通過(guò)鍵盤的方向鍵直接切換選項(xiàng)；Checkbox?在被激活時(shí)，可以通過(guò)空格鍵選擇和取消選擇某小項(xiàng)，通過(guò) tab 鍵激活下一個(gè)小項(xiàng)。

“看不見”的更新

還有一些更新，是無(wú)法直接看見和體會(huì)到的。

比如更新了大量的依賴：

• babel 系列全部更新
• 使用了?browserslist

使用了?sourcemap。

部分組件的重構(gòu)，雖然功能無(wú)任何變化，但代碼結(jié)構(gòu)和邏輯都做了優(yōu)化和可維護(hù)性設(shè)計(jì)。

還有部分組件的自動(dòng)化測(cè)試、持續(xù)集成對(duì) GitHub travis-ci 的兼容等等。

外表需要優(yōu)化，內(nèi)部同樣也是，就像一個(gè)人，既要有外在美，也要有內(nèi)在美。

“不為人知”的故事

在開源工作中，發(fā)生過(guò)許多有趣的事，這里分享幾個(gè)有意思的。

在瑞典，想用開源項(xiàng)目，得先改 bug

在瑞典使用開源項(xiàng)目到生產(chǎn)環(huán)境時(shí)，開發(fā)者有義務(wù)來(lái)修復(fù)開源項(xiàng)目的 bug。這一刻，覺(jué)得瑞典好好啊。

“吵”不過(guò)老外

Sorry for my poor english.?已經(jīng)成為一個(gè)段子了，然后不得不用 english。但是老外一句?Sorry for my poor Chinese?就會(huì)讓你無(wú)話可說(shuō)。所以，英語(yǔ)不好的我，有時(shí)候就“吵”不過(guò)老外們了。

當(dāng)我還在查 “optimisation” 是啥意思的時(shí)候，對(duì)方已經(jīng) balabala 說(shuō)一堆了，吵不過(guò)就妥協(xié)吧。

就像你跟仰慕的女神聊天，你 bibibi 說(shuō)了一大堆，對(duì)方半天回你一句 “哦” 一樣，哈哈。

不過(guò)，妥協(xié)歸妥協(xié)，講的還是有道理的，不能為了妥協(xié)而妥協(xié)，真理才是最重要的。

講這些，更多想說(shuō)的是，iView 的每個(gè)功能點(diǎn)，都是我們精心揣摩探討出來(lái)的，不會(huì)憑借主觀意識(shí)去做，也不會(huì)因?yàn)槿魏我粋€(gè) Feature Request 就去支持，每個(gè) feature 都是討論出的結(jié)果。所以，這是一個(gè)既有情懷，又負(fù)責(zé)的開源項(xiàng)目。

目前的 iView 核心團(tuán)隊(duì)有 3 人在同時(shí)維護(hù)，相比以前獨(dú)立奮斗的我要好的多了，但仍然需要更多像瑞典開發(fā)者這樣有開源精神的工程師們加入，致力把 iView 打造成全球最好用、最好看的 UI 組件庫(kù)。期待你的加入！

原文發(fā)布時(shí)間為：2018年03月12日 本文作者：aresn 本文來(lái)源：開源中國(guó)??如需轉(zhuǎn)載請(qǐng)聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的iView 近期的更新，以及那些“不为人知”的故事的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。