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

   <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>