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

在過去的兩個多月裡， 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 元件庫。期待你的加入！

原文釋出時間為：2018年03月12日

本文作者：aresn

本文來源：

開源中國 https://juejin.im/post/5b38d27451882574d87aa5d5

 如需轉載請聯系原作者