iView 近期的更新，以及那些「不為人知」的故事

04-19

在過去的兩個多月里，iView 陸續發布了 2.9.0 和 2.10.0 兩個重要版本。這兩個版本總共有 255 個 commit，超過 40 項更新。來看一下，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

說明：由於 2.10.0 存在編譯後文件過大的問題，請更新至 2.10.1

「看得見」的更新

所謂看得見的更新，就是更新後能真實感受到的東西。這兩個版本都得感謝兩位瑞典大神

SergioCrisostomo 和 Xotic750 的貢獻，iView 才得以越來越完善。

日期組件 DatePicker 的重構

首先是在 2.10.0 對日期組件 DatePicker 的重構。DatePicker 是 iView 48 個組件里最複雜的組件之一。複雜的功能使得代碼邏輯非常重，在許多新特性的支持上，比如兼容不同國家的日曆規範等都很難在此基礎上迭代，不得不推倒重來。

SergioCrisostomo 之前有開發過日期相關的 JS 庫（https://github.com/SergioCrisostomo/js-calendar），所以對日期相關的功能點和 API 非常熟，iView 也是基於此庫進行的重構。

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

1.範圍選擇支持從右往左選擇了。

之前在範圍選擇時，必須先選起點，再選終點，也就是從左往右選，但很多用戶的習慣卻剛好相反。該版本則同時支持兩個方向的選擇。

2.新增 split-panels 屬性，開啟後，左右兩面板可以不聯動。

之前在範圍選擇時，左右兩個面板是聯動的，也就是右邊永遠比左邊大一個月，任何一個面板切換月份或年份，另一個面板都會自動切換。該版本則可以設置為不聯動，這樣方便定位起始月份和結束月份。如圖所示：

3.新增 multiple 屬性，開啟後，可以選擇多個日期。

雖然之前版本可以用其它 iView 組件組合出來一個多選的日期，但效果和交互多少會打折扣，該版本只要增加屬性 multiple，就可以在一個日期面板上同時選擇和呈現多個日期了。如圖所示：

4.新增屬性 show-week-numbers，開啟後，可以顯示星期數。

增加這個屬性，就可以在日曆面板上顯示當前是一年的第幾周。如圖所示：

還有其它很多項的更新，比如新增 start-date 屬性，可以設置面板展開時默認顯示的日期。新增屬性 time-picker-options，可以在 type 為 datetime 和 datetimerange 下，配置 TimePicker 的屬性，比如時間間隔 steps。完整的更新可以產看更新日誌，這裡不一一列舉了。

鍵盤可訪問性的支持

鍵盤的可訪問性，主要是通過鍵盤的方向鍵、tab鍵、空格鍵等完成表單組件的切換和交互。在填寫一個表單時（iView Form 組件），尤其有用，你可以離開滑鼠，就完成一個複雜表單的填寫與提交。

目前 iView 最新版本支持鍵盤可訪問性的組件有：

Button、Input、Radio、Checkbox、Switch、AutoComplete、Slider、InputNumber。更多組件還在陸續支持中。

事實上，原生的表單控制項，瀏覽器都是支持鍵盤的可訪問性的，比如 <button>、<input type="radio"> 等等。iView 對這些原生控制項進行了重塑，不僅僅使得 UI 好看和統一，更重要的是功能的豐富和交互體驗的提升。

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

可以看到，組件在被選中時，外面多了一個高亮層，表明當前選中的控制項，這時就可以通過鍵盤其它按鍵繼續操作了，比如單選組件 Radio，在選中狀態下，可以通過鍵盤的方向鍵直接切換選項；Checkbox 在被激活時，可以通過空格鍵選擇和取消選擇某小項，通過 tab 鍵激活下一個小項。

「看不見」的更新

還有一些更新，是無法直接看見和體會到的。

比如更新了大量的依賴：

- babel 系列全部更新

- 使用了 browserslist

使用了 sourcemap。

部分組件的重構，雖然功能無任何變化，但代碼結構和邏輯都做了優化和可維護性設計。

還有部分組件的自動化測試、持續集成對 GitHub travis-ci 的兼容等等。

外表需要優化，內部同樣也是，就像一個人，既要有外在美，也要有內在美。

「不為人知」的故事

在開源工作中，發生過許多有趣的事，這裡分享幾個有意思的。

在瑞典，想用開源項目，得先改 bug

在瑞典使用開源項目到生產環境時，開發者有義務來修復開源項目的 bug。這一刻，覺得瑞典好好啊。

「吵」不過老外

Sorry for my poor english. 已經成為一個段子了，然後不得不用 english。但是老外一句 Sorry for my poor Chinese 就會讓你無話可說。所以，英語不好的我，有時候就「吵」不過老外們了。

當我還在查「optimisation」是啥意思的時候，對方已經 balabala 說一堆了，吵不過就妥協吧。

就像你跟仰慕的女神聊天，你 bibibi 說了一大堆，對方半天回你一句「哦」一樣，哈哈。

不過，妥協歸妥協，講的還是有道理的，不能為了妥協而妥協，真理才是最重要的。

講這些，更多想說的是，iView 的每個功能點，都是我們精心揣摩探討出來的，不會憑藉主觀意識去做，也不會因為任何一個 Feature Request 就去支持，每個 feature 都是討論出的結果。所以，這是一個既有情懷，又負責的開源項目。

目前的 iView 核心團隊有 3 人在同時維護，相比以前獨立奮鬥的我要好的多了，但仍然需要更多像瑞典開發者這樣有開源精神的工程師們加入，致力把 iView 打造成全球最好用、最好看的 UI 組件庫。期待你的加入！

下個版本預告：下個版本計劃重構 Select 組件，以全面支持表單組件的鍵盤可訪問性，敬請期待。完整的計劃見里程碑 https://github.com/iview/iview/milestone/9