V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Aresn
V2EX  ›  JavaScript

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

  •  
  •   Aresn · 2018-03-12 09:23:30 +08:00 · 7603 次点击
    这是一个创建于 2449 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在过去的两个多月里,**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

    “看得见”的更新

    所谓看得见的更新,就是更新后能真实感受到的东西。这两个版本都得感谢两位瑞典大神 SergioCrisostomoXotic750 的贡献,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 最新版本支持键盘可访问性的组件有: ButtonInputRadioCheckboxSwitchAutoCompleteSliderInputNumber。更多组件还在陆续支持中。

    事实上,原生的表单控件,浏览器都是支持键盘的可访问性的,比如 <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

    17 条回复    2018-03-20 23:46:03 +08:00
    HuHui
        1
    HuHui  
       2018-03-12 09:33:41 +08:00
    加油
    469054193
        2
    469054193  
       2018-03-12 09:39:33 +08:00
    难得看到自己熟悉的帖子 感谢楼主... 一直在用 iview 很棒
    forzalianjunting
        3
    forzalianjunting  
       2018-03-12 09:40:35 +08:00
    感谢 iview,不过目前我们团队使用中发现的一些 bug 和急需的一些功能:

    1、select 组件不会自动选择是向上还是向下展开,有可能会被挡住;
    2、select 组件的 option 为空时,会出现一个很矮的空白下拉;
    3、table 的 column 急需一个 min-width 属性。

    以上问题我们都进行了一些组件重写来临时解决,但还是希望能用到官方的。
    yoqu
        4
    yoqu  
       2018-03-12 09:41:33 +08:00
    加油,支持开源作者,辛苦了
    naiba
        5
    naiba  
       2018-03-12 09:43:05 +08:00 via Android
    给 IView 投币,在用
    xiaoxiuaoliang
        6
    xiaoxiuaoliang  
       2018-03-12 09:43:05 +08:00 via iPhone
    感谢作者。昨天项目由于从 2.9 升至 2.10 ,时间选择器闹出个故障,好一阵忙活…… 以后得仔细看更新日志了
    pepesii
        7
    pepesii  
       2018-03-12 09:44:13 +08:00
    感谢作者,用过 iview
    yag
        8
    yag  
       2018-03-12 09:47:38 +08:00
    感谢作者
    scys
        9
    scys  
       2018-03-12 11:19:33 +08:00
    感谢作者,虽然不用 iView.
    xiaoxiuaoliang
        10
    xiaoxiuaoliang  
       2018-03-12 11:27:57 +08:00
    @Aresn
    2.9.2 到 2.10.1 后,TimePicker 绑定的 v-model,值从日期对象变为了字符串
    <TimePicker
    format="HH:mm"
    v-model="time">

    如上, time 从 Mon Mar 12 2018 11:26:59 GMT+0800 (CST)变为了类似"19:12"
    这点没在更新日志中体现出来。
    zj0713001
        11
    zj0713001  
       2018-03-12 11:35:18 +08:00
    好棒好棒
    w88975
        12
    w88975  
       2018-03-12 14:35:37 +08:00
    风格有点像 antd
    wwdyy
        13
    wwdyy  
       2018-03-12 14:40:31 +08:00
    非常喜欢 iview
    kaifazhe
        14
    kaifazhe  
       2018-03-12 15:24:26 +08:00
    觉得 iview 的 ui 是同类中最好的
    zhlssg
        15
    zhlssg  
       2018-03-12 16:28:08 +08:00
    @w88975 #12 ant design 的 vue 实现
    123qqqqqq
        16
    123qqqqqq  
       2018-03-12 16:37:34 +08:00
    感谢 @Aresn , 从去年开始就一直用 iView,谢谢你们的工作
    wwek
        17
    wwek  
       2018-03-20 23:46:03 +08:00
    加油非常棒
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   987 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 19:16 · PVG 03:16 · LAX 11:16 · JFK 14:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.