Vue高效UI组件库—iView开发实践

834821518 5年前
   <p>前段时间在微软参加活动,分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验,现整理成文,和大家探讨。</p>    <h2><strong>关于 iView</strong></h2>    <h3><strong>开发历程和命名</strong></h3>    <p>TalkingData 可视化团队使用 Vue 有半年多时间,经历了从开始简单的使用双向绑定,到后来完全依赖 Vue 全家桶和 Webpack 的演变过程。这套开发模式验证了多个大中型项目,开发效率有了显著了提升,工作流也从半自动进化到了开发、灰度、生成环境的全自动,可以说 Vue 还是给我们带来了很愉快的开发体验。</p>    <p>随着组件化的不断深入,对组件的复用和维护成了一个问题,于是开始调研市面上的 UI 组件库,发现基于 Vue 的大多是移动端的,而针对 PC 中后台的,能像阿里 Ant.Design(基于React.js) 那样功能丰富而且高质量的,没有看中一款,要么就是不维护了,要么就是功能太简单,质量不够高。所以我们决定自己开发维护一套高质量的 UI 组件库。确定好这个目标,规划好1.x版本后,就开始这条不归路,最近三个多月一直投身于 iView 的开发。</p>    <p>至于起 iView 这个名字,其实也没多想,以 Apple 的产品命名加上 Vue 的发音,简单好记好读,同时 GitHub 还没有注册这个组织名(就为了这些,也得把它做成一个精品:joy:)。</p>    <h3><strong>使用场景</strong></h3>    <p>iView 主要适合大中型中后台产品,比如某产品的运营平台、数据监控平台、管理平台等,从工程配置、到样式布局,甚至后面规划的业务套件,是一整套的解决方案,所以它可能不太适合一些 to C 的产品,比如 QQ空间 这类的。</p>    <h3><strong>面向的开发者</strong></h3>    <p>iView 当然主要的面向对象是有过 Vue 组件化开发经验的前端工程师了,但同时对偏后端的工程师也很友好,因为我们提供好了环境配置和丰富的文档教程,即使对于像写 Java 从未接触过 Vue 开发的同学,在一周内也能很快上手,而且基于这套解决方案开发的产品是非常高效的SPA。</p>    <h3><strong>版本及兼容</strong></h3>    <p>目前 iView 可以直接通过 npm 安装,很快将发布一个重要版本 0.9.7,在这个版本中,我们对大部分组件的 UI 进行了调整和优化,也丰富了很多组件的功能。</p>    <p>由于 Vue 本身原因(这里不展开),iView 只能兼容到 IE 9+,表现最好的是 Chrome、Safari、Firefox,有些功能和动画不能在 IE 下得到兼容。这也和使用场景有关,一般 to B 的产品,我们可以要求客户去使用高级浏览器。</p>    <h2><strong>iView 特点</strong></h2>    <ul>     <li> <p>基于 npm + webpack + babel + ES2015</p> </li>     <li> <p>友好的 API</p> </li>     <li> <p>事无巨细的文档</p> </li>     <li> <p>高质量、功能丰富</p> </li>    </ul>    <p>因为 iView 目前是在 webpack 下使用的,所以你可以使用 webpack 丰富的插件和个性化配置。iView 也是使用了 ES2015 开发。</p>    <p>iView 一个最大的特点,就是我们从使用者和场景出发来设计 API,这点后面会重点讲到。它的文档也是相当详细,每个功能都配有详细说明和实例代码,直接复制就可以使用,我们也计划在明年启动英文文档翻译计划。</p>    <p>在开发组件时,我们阅读了很多已有组件库的代码,取长补短,实现代码的高质量。</p>    <h2><strong>目前进度</strong></h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/321aa50bbf89c5d7afd811baeff82c25.jpg"></p>    <p>iView 计划在2017年初能够发布1.0版本,1.0将覆盖40+常用 UI 组件,包含 Form表单类,View视图类,Navigation导航类,Base基础布局类,Chart图表类等。图中打勾的是已经完成并上线的组件。</p>    <h2><strong>24栅格系统</strong></h2>    <p>iView 借鉴了 Bootstrap 和 Ant.Design 的栅格系统,支持每行最多容纳 24 列的布局,栅格系统对高级浏览器支持 Flex布局,包括 Flex对齐、Flex排列、Flex顺序,也支持栅格的排序、偏移、间隔。友好栅格系统对页面的拆分布局起到了关键作用,你可能不用再写任何布局代码就可以轻松使用栅格完成你的需求,而且它很精准。</p>    <h2><strong>精心设计的 API</strong></h2>    <p>我们在组件 API 的设计上下了很多功夫。很多开发者在实现一个组件时,可能从编程的难易出发思考问题,而忽略了这种设计是否对使用者友好,iView 则一切以使用者为核心,我们会思考这样设计是否对使用者便利,或者如果是我用这个组件,我希望怎样来用。举个栗子,常见的页面信息提示,JavaScript 原生是 window.alert('something') ,但是用 Vue 来模拟出这样一个组件,那使用方法就像是 <Alert v-if="show">something</Alert> 。对的,这就是 Vue 组件的实现方法,但是,我们真的期望这样使用吗,当然不是,我们也想像原生一样,在某个时刻,一句话就能弹出来,而不用事先埋在 HTML 里,用一个 if 条件判断是否显示这个组件。</p>    <p>为了更形象的介绍 iView 的 API 设计,我们拿出了一个常用的组件 Modal 模态对话框,和饿了么的 Element 及 Radon UI 这两个组件库进行对比。一般的 Modal 长这样:</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/030440fee83f670e76f9bf87c89294d5.png"></p>    <p>有标题栏(header)、关闭按钮、正文(body)、底部(footer)操作按钮,点击灰色遮罩层或键盘 Esc 键可以关闭对话框。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0c501e46d12a8e0408bccb8fb880bcc6.jpg"></p>    <p>从组件的调用方式上,Element 用的是传统组件的使用方法,也就是通过一个自定义 HTML 标签,Radon UI 是实例的方法,iView 同时支持组件和实例两种方法(这里解释一下,Element 也有支持实例调用对话框的组件,是另一个 Dialog,不过目前是分成两个组件使用的)。</p>    <p>自定义 slot 让组件复用性成为了可能。Element 支持body、footer的 slot,Radon UI 只支持body,iView 是支持 header、footer、body(其实还有关闭按钮也支持)的slot,几乎满足了所有 Modal 自定义需求。</p>    <p>有时候我们点击确定按钮,不一样要立即关闭对话框,而是异步的获取数据,在某个时刻关闭。Element 需要自己实现这个功能,Radon UI 则不支持,iView 是原生支持,只需要一个属性配置即可。</p>    <p>在更多的自定义配置上,iView 也是最大化的进行支持(详细API可查阅文档)。</p>    <h2><strong>事无巨细的文档</strong></h2>    <p>iView 在文档编写上也是做到了事无巨细(由于文档用了一套相对重的方案来实现实例和代码的友好分离,故目前没有将文档开源,我们会在明年实现一个更好地提交文档bug及翻译的方案),每个组件的每个功能都有非常详细的说明,包括像哪些参数需要 .sync 使用,一些隐藏的功能、可能遇到的坑等等,同时每个 demo 都有完整的代码示例,一键复制,粘贴后就可以直接看到效果。</p>    <p>API 也按照 props、events、slot 三部分拆分,避免混合说明遗漏和阅读不便利。</p>    <p>iView 的文档是目前所有同类文档里最为详细的,也受到了很多开发者的好评,所以我们仍会在文档开发的工作上保持高产出。</p>    <h2><strong>高质量,功能丰富</strong></h2>    <p>其实前文已经从各方面介绍了 iView 的高质量和丰富的功能,所以就举两个例子吧。</p>    <h3><strong>分页组件 Page:</strong></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/edcfbabf73207fc36b75d8a74e254fae.png"></p>    <p>分页组件从功能上借鉴了 Ant.Design,支持智能折叠页码(页码过多时,会左右折叠)、页码快进(点击···会快进或快退5页)、切换每页显示条数、电梯,同时还有迷你模式(支持所以普通模式的功能)和简介模式。</p>    <h3><strong>选择器组件 Select</strong></h3>    <p><img src="https://simg.open-open.com/show/f19c12daf856070f1afa389a2631ee26.png"></p>    <p>与浏览器原生 <select> 不同的是,首先 UI 统一而且很好看,这是大部分模拟 select 的主要原因,其次功能更加强大,支持单选、多选,键盘的快捷操作,还支持搜索、自定义模板、分组,以及大中小三种尺寸(iView 很多表单类组件都提供了不同的尺寸),在单选时还可以清空选项。</p>    <h2><strong>配套工程</strong></h2>    <p>最后要说的是与 iView 配套的工作流,好马配好鞍,这套工作流支撑了 TalkingData 很多大型产品,从开发、灰度到上线都可以一键式完成,包括资源的 CDN 配置等等,不管你是新手还是老司机,都可以从它开始开发。当然 iView 也是支持 vue-cli 的。</p>    <h2><strong>Todo</strong></h2>    <ul>     <li> <p>iView 目前是基于 Vue.js 1.0的,我们会在将来新开一个分支来支持 Vue 2.0,我们也认为 2.0 是未来的趋势。</p> </li>     <li> <p>iView 很快会支持不依赖 webpack 的 umd 使用方法。</p> </li>     <li> <p>目前的 UI 是以 Ant.Design 为雏形,我们在 0.9.7 版本开始逐步优化和替代,使 iView 不仅好用,还很好看。</p> </li>     <li> <p>iView 明年会启动英文文档翻译计划,也希望喜欢和支持 iView ,同时英语不错的同学可以加入我们,一起参与翻译。</p> </li>    </ul>    <h2><strong>后记</strong></h2>    <p>iView 从正式发布1个月内,获得了很多好评,连续5天进入 GitHub Trending,在很多社区反响不错,我们也会继续努力,把最好的 iView 组件库呈现给大家。我们也非常期望喜欢 iView 的开发者能够加入我们,一起贡献代码或是翻译文档,我们欢迎各种形式的代码贡献。如果您有想法加入翻译计划,可以邮件联系我:admin@aresn.com</p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000007403277</p>    <p> </p>