亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue高效UI組件庫—iView開發(fā)實踐

wean / 2743人閱讀

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

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

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

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

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

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

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

使用場景

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

面向的開發(fā)者

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

版本及兼容

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

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

iView 特點

基于 npm + webpack + babel + ES2015

友好的 API

事無巨細(xì)的文檔

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

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

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

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

目前進(jìn)度

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

24柵格系統(tǒng)

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

精心設(shè)計的 API

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

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

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

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

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

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

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

事無巨細(xì)的文檔

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

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

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

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

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

分頁組件 Page

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

選擇器組件 Select

與瀏覽器原生

    <button id="uc2ko"><code id="uc2ko"></code></button>
      <bdo id="uc2ko"></bdo>
      

<