成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Vue高效UI組件庫(kù)—iView開(kāi)發(fā)實(shí)踐

wean / 2713人閱讀

摘要：它的文檔也是相當(dāng)詳細(xì)，每個(gè)功能都配有詳細(xì)說(shuō)明和實(shí)例代碼，直接復(fù)制就可以使用，我們也計(jì)劃在明年啟動(dòng)英文文檔翻譯計(jì)劃。明年會(huì)啟動(dòng)英文文檔翻譯計(jì)劃，也希望喜歡和支持，同時(shí)英語(yǔ)不錯(cuò)的同學(xué)可以加入我們，一起參與翻譯。

前段時(shí)間在微軟參加活動(dòng)，分享了 TalkingData 開(kāi)源的基于 Vue.js 的高效 UI 組件庫(kù) iView 的一些開(kāi)發(fā)經(jīng)驗(yàn)，現(xiàn)整理成文，和大家探討。

GitHub：https://github.com/iview/iview

關(guān)于 iView 開(kāi)發(fā)歷程和命名

TalkingData 可視化團(tuán)隊(duì)使用 Vue 有半年多時(shí)間，經(jīng)歷了從開(kāi)始簡(jiǎn)單的使用雙向綁定，到后來(lái)完全依賴(lài) Vue 全家桶和 Webpack 的演變過(guò)程。這套開(kāi)發(fā)模式驗(yàn)證了多個(gè)大中型項(xiàng)目，開(kāi)發(fā)效率有了顯著了提升，工作流也從半自動(dòng)進(jìn)化到了開(kāi)發(fā)、灰度、生成環(huán)境的全自動(dòng)，可以說(shuō) Vue 還是給我們帶來(lái)了很愉快的開(kāi)發(fā)體驗(yàn)。

隨著組件化的不斷深入，對(duì)組件的復(fù)用和維護(hù)成了一個(gè)問(wèn)題，于是開(kāi)始調(diào)研市面上的 UI 組件庫(kù)，發(fā)現(xiàn)基于 Vue 的大多是移動(dòng)端的，而針對(duì) PC 中后臺(tái)的，能像阿里 Ant.Design(基于React.js) 那樣功能豐富而且高質(zhì)量的，沒(méi)有看中一款，要么就是不維護(hù)了，要么就是功能太簡(jiǎn)單，質(zhì)量不夠高。所以我們決定自己開(kāi)發(fā)維護(hù)一套高質(zhì)量的 UI 組件庫(kù)。確定好這個(gè)目標(biāo)，規(guī)劃好1.x版本后，就開(kāi)始這條不歸路，最近三個(gè)多月一直投身于 iView 的開(kāi)發(fā)。

至于起 iView 這個(gè)名字，其實(shí)也沒(méi)多想，以 Apple 的產(chǎn)品命名加上 Vue 的發(fā)音，簡(jiǎn)單好記好讀，同時(shí) GitHub 還沒(méi)有注冊(cè)這個(gè)組織名（就為了這些，也得把它做成一個(gè)精品?）。

使用場(chǎng)景

iView 主要適合大中型中后臺(tái)產(chǎn)品，比如某產(chǎn)品的運(yùn)營(yíng)平臺(tái)、數(shù)據(jù)監(jiān)控平臺(tái)、管理平臺(tái)等，從工程配置、到樣式布局，甚至后面規(guī)劃的業(yè)務(wù)套件，是一整套的解決方案，所以它可能不太適合一些 to C 的產(chǎn)品，比如 QQ空間 這類(lèi)的。

面向的開(kāi)發(fā)者

iView 當(dāng)然主要的面向?qū)ο笫怯羞^(guò) Vue 組件化開(kāi)發(fā)經(jīng)驗(yàn)的前端工程師了，但同時(shí)對(duì)偏后端的工程師也很友好，因?yàn)槲覀兲峁┖昧谁h(huán)境配置和豐富的文檔教程，即使對(duì)于像寫(xiě) Java 從未接觸過(guò) Vue 開(kāi)發(fā)的同學(xué)，在一周內(nèi)也能很快上手，而且基于這套解決方案開(kāi)發(fā)的產(chǎn)品是非常高效的SPA。

版本及兼容

目前 iView 可以直接通過(guò) npm 安裝，很快將發(fā)布一個(gè)重要版本 0.9.7，在這個(gè)版本中，我們對(duì)大部分組件的 UI 進(jìn)行了調(diào)整和優(yōu)化，也豐富了很多組件的功能。

由于 Vue 本身原因(這里不展開(kāi))，iView 只能兼容到 IE 9+，表現(xiàn)最好的是 Chrome、Safari、Firefox，有些功能和動(dòng)畫(huà)不能在 IE 下得到兼容。這也和使用場(chǎng)景有關(guān)，一般 to B 的產(chǎn)品，我們可以要求客戶去使用高級(jí)瀏覽器。

iView 特點(diǎn)

基于 npm + webpack + babel + ES2015

友好的 API

事無(wú)巨細(xì)的文檔

高質(zhì)量、功能豐富

因?yàn)?iView 目前是在 webpack 下使用的，所以你可以使用 webpack 豐富的插件和個(gè)性化配置。iView 也是使用了 ES2015 開(kāi)發(fā)。

iView 一個(gè)最大的特點(diǎn)，就是我們從使用者和場(chǎng)景出發(fā)來(lái)設(shè)計(jì) API，這點(diǎn)后面會(huì)重點(diǎn)講到。它的文檔也是相當(dāng)詳細(xì)，每個(gè)功能都配有詳細(xì)說(shuō)明和實(shí)例代碼，直接復(fù)制就可以使用，我們也計(jì)劃在明年啟動(dòng)英文文檔翻譯計(jì)劃。

在開(kāi)發(fā)組件時(shí)，我們閱讀了很多已有組件庫(kù)的代碼，取長(zhǎng)補(bǔ)短，實(shí)現(xiàn)代碼的高質(zhì)量。

目前進(jìn)度

iView 計(jì)劃在2017年初能夠發(fā)布1.0版本，1.0將覆蓋40+常用 UI 組件，包含 Form表單類(lèi)，View視圖類(lèi)，Navigation導(dǎo)航類(lèi)，Base基礎(chǔ)布局類(lèi)，Chart圖表類(lèi)等。圖中打勾的是已經(jīng)完成并上線的組件。

24柵格系統(tǒng)

iView 借鑒了 Bootstrap 和 Ant.Design 的柵格系統(tǒng)，支持每行最多容納 24 列的布局，柵格系統(tǒng)對(duì)高級(jí)瀏覽器支持 Flex布局，包括 Flex對(duì)齊、Flex排列、Flex順序，也支持柵格的排序、偏移、間隔。友好柵格系統(tǒng)對(duì)頁(yè)面的拆分布局起到了關(guān)鍵作用，你可能不用再寫(xiě)任何布局代碼就可以輕松使用柵格完成你的需求，而且它很精準(zhǔn)。

精心設(shè)計(jì)的 API

我們?cè)诮M件 API 的設(shè)計(jì)上下了很多功夫。很多開(kāi)發(fā)者在實(shí)現(xiàn)一個(gè)組件時(shí)，可能從編程的難易出發(fā)思考問(wèn)題，而忽略了這種設(shè)計(jì)是否對(duì)使用者友好，iView 則一切以使用者為核心，我們會(huì)思考這樣設(shè)計(jì)是否對(duì)使用者便利，或者如果是我用這個(gè)組件，我希望怎樣來(lái)用。舉個(gè)栗子，常見(jiàn)的頁(yè)面信息提示，JavaScript 原生是window.alert("something")，但是用 Vue 來(lái)模擬出這樣一個(gè)組件，那使用方法就像是 something。對(duì)的，這就是 Vue 組件的實(shí)現(xiàn)方法，但是，我們真的期望這樣使用嗎，當(dāng)然不是，我們也想像原生一樣，在某個(gè)時(shí)刻，一句話就能彈出來(lái)，而不用事先埋在 HTML 里，用一個(gè) if 條件判斷是否顯示這個(gè)組件。

為了更形象的介紹 iView 的 API 設(shè)計(jì)，我們拿出了一個(gè)常用的組件 Modal 模態(tài)對(duì)話框，和餓了么的 Element 及 Radon UI 這兩個(gè)組件庫(kù)進(jìn)行對(duì)比。一般的 Modal 長(zhǎng)這樣：

有標(biāo)題欄(header)、關(guān)閉按鈕、正文(body)、底部(footer)操作按鈕，點(diǎn)擊灰色遮罩層或鍵盤(pán) Esc 鍵可以關(guān)閉對(duì)話框。

從組件的調(diào)用方式上，Element 用的是傳統(tǒng)組件的使用方法，也就是通過(guò)一個(gè)自定義 HTML 標(biāo)簽，Radon UI 是實(shí)例的方法，iView 同時(shí)支持組件和實(shí)例兩種方法（這里解釋一下，Element 也有支持實(shí)例調(diào)用對(duì)話框的組件，是另一個(gè) Dialog，不過(guò)目前是分成兩個(gè)組件使用的）。

自定義 slot 讓組件復(fù)用性成為了可能。Element 支持body、footer的 slot，Radon UI 只支持body，iView 是支持 header、footer、body（其實(shí)還有關(guān)閉按鈕也支持）的slot，幾乎滿足了所有 Modal 自定義需求。

有時(shí)候我們點(diǎn)擊確定按鈕，不一樣要立即關(guān)閉對(duì)話框，而是異步的獲取數(shù)據(jù)，在某個(gè)時(shí)刻關(guān)閉。Element 需要自己實(shí)現(xiàn)這個(gè)功能，Radon UI 則不支持，iView 是原生支持，只需要一個(gè)屬性配置即可。

在更多的自定義配置上，iView 也是最大化的進(jìn)行支持（詳細(xì)API可查閱文檔）。

事無(wú)巨細(xì)的文檔

iView 在文檔編寫(xiě)上也是做到了事無(wú)巨細(xì)（由于文檔用了一套相對(duì)重的方案來(lái)實(shí)現(xiàn)實(shí)例和代碼的友好分離，故目前沒(méi)有將文檔開(kāi)源，我們會(huì)在明年實(shí)現(xiàn)一個(gè)更好地提交文檔bug及翻譯的方案），每個(gè)組件的每個(gè)功能都有非常詳細(xì)的說(shuō)明，包括像哪些參數(shù)需要.sync使用，一些隱藏的功能、可能遇到的坑等等，同時(shí)每個(gè) demo 都有完整的代碼示例，一鍵復(fù)制，粘貼后就可以直接看到效果。

API 也按照 props、events、slot 三部分拆分，避免混合說(shuō)明遺漏和閱讀不便利。

iView 的文檔是目前所有同類(lèi)文檔里最為詳細(xì)的，也受到了很多開(kāi)發(fā)者的好評(píng)，所以我們?nèi)詴?huì)在文檔開(kāi)發(fā)的工作上保持高產(chǎn)出。

高質(zhì)量，功能豐富

其實(shí)前文已經(jīng)從各方面介紹了 iView 的高質(zhì)量和豐富的功能，所以就舉兩個(gè)例子吧。

分頁(yè)組件 Page

分頁(yè)組件從功能上借鑒了 Ant.Design，支持智能折疊頁(yè)碼（頁(yè)碼過(guò)多時(shí)，會(huì)左右折疊）、頁(yè)碼快進(jìn)（點(diǎn)擊···會(huì)快進(jìn)或快退5頁(yè)）、切換每頁(yè)顯示條數(shù)、電梯，同時(shí)還有迷你模式（支持所以普通模式的功能）和簡(jiǎn)介模式。

選擇器組件 Select

與瀏覽器原生