国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue高效UI組件庫—iView開發實踐

wean / 2685人閱讀

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

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

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

關于 iView 開發歷程和命名

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

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

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

使用場景

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

面向的開發者

iView 當然主要的面向對象是有過 Vue 組件化開發經驗的前端工程師了，但同時對偏后端的工程師也很友好，因為我們提供好了環境配置和豐富的文檔教程，即使對于像寫 Java 從未接觸過 Vue 開發的同學，在一周內也能很快上手，而且基于這套解決方案開發的產品是非常高效的SPA。

版本及兼容

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

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

iView 特點

基于 npm + webpack + babel + ES2015

友好的 API

事無巨細的文檔

高質量、功能豐富

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

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

在開發組件時，我們閱讀了很多已有組件庫的代碼，取長補短，實現代碼的高質量。

目前進度

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

24柵格系統

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

精心設計的 API

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

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

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

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

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

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

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

事無巨細的文檔

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

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

iView 的文檔是目前所有同類文檔里最為詳細的，也受到了很多開發者的好評，所以我們仍會在文檔開發的工作上保持高產出。

高質量，功能豐富

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

分頁組件 Page

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

選擇器組件 Select

與瀏覽器原生

<samp id="caqoo"><tbody id="caqoo"></tbody></samp>
      <ul id="caqoo"><pre id="caqoo"></pre></ul>
      <abbr id="caqoo"><fieldset id="caqoo"></fieldset></abbr><bdo id="caqoo"><object id="caqoo"></object></bdo>
      <tfoot id="caqoo"></tfoot>
    • <fieldset id="caqoo"></fieldset>
      

<