滴滴 Web 移動端組件庫 cube-ui 開源

時間 2019-11-07

標籤滴滴 web 移動組件 cube 開源欄目 HTML 简体版

原文原文鏈接

滴滴 WebApp 團隊在去年末用 Vue.js 2.0 對業務進行重構，並開發了一套移動端組件庫 cube-ui 支撐業務的開發。通過了一年多的業務考驗，cube-ui 也日趨成熟，並且咱們相信除了在滴滴內部，cube-ui 也必定也有它的用武之地。好的東西必需要和你們分享，因此咱們很是開心的告訴你們， cube-ui 在今天正式開源，地址 github.com/didi/cube-u… 。javascript

cube-ui 從滴滴業務中提煉而來，由滴滴 WebApp 前端架構組開發和維護。cube-ui 的目標是讓移動端的開發更加容易，讓開發人員更加專一於業務邏輯的開發，提高研發效率。html

特性

質量可靠前端

由滴滴內部組件庫精簡提煉而來，經歷了業務一年多的考驗，而且每一個組件都有充分單元測試，爲後續集成提供保障。vue
體驗極致java

以迅速響應、動畫流暢、接近原生爲目標，在交互體驗方面追求極致。git
標準規範github

遵循統一的設計交互標準，高度還原設計效果；接口標準化，統一規範使用方式，開發更加簡單高效。架構
擴展性強工具

支持按需引入和後編譯，輕量靈活；擴展性強，能夠方便地基於現有組件實現二次開發。post

優點

相對於同類型的移動端組件庫，cube-ui 有哪些優點？

追求極致的體驗
我常說一句話：「移動端組件庫寫的好很差，就看 Picker 組件寫的好很差」，由於想把這個組件寫好是須要花必定功夫的。cube-ui 的 Picker 是目前全部移動端組件庫中實現最細緻，體驗也是最好的，接近原生 iOS 選擇器的效果。相似的還有 IndexList 索引列表組件，咱們在一些交互的細節上都考慮的很是細緻，好比對吸頂標題的處理，按壓態的處理等。
後編譯技術
後編譯技術是滴滴前端團隊在「一個項目中引用多個 ES6 開發的模塊，因爲 Babel 編譯會產生多份額外代碼」的問題的思考並總結出的一套優化的技術方案。cube-ui 組件庫也用到了該技術方案，它會讓最終使用方引用 cube-ui 組件庫編譯產生的代碼體積減小，在必定程度上優化了性能。

組件

cube-ui 組件主要包括 3 個部分，基礎組件、彈出層組件和滾動組件。目前總共開源了 14 個組件，咱們的原則是隻開源通用性強的組件。雖然目前組件的個數很少，可是在組件的體驗和交互，包括易用性上咱們都追求極致。

使用

cube-ui 支持 2 種使用方式，聲明式和 API 式。

<template>
  <cube-button @click="showToast">show toast</cube-button>
</template>

<script> export default { data() { return { toastTxt: 'toast content' } }, methods: { showToast() { this.$createToast({ txt: this.toastTxt }).show() } } } </script>複製代碼

如上代碼所示，這裏面實際上使用了 2 個 cube-ui 的組件，cube-button 和 cube-toast。能夠看到，cube-button 咱們是用了聲明式的建立，而 cube-toast 是經過實例上的 $createToast API 調用。

Vue.js 是比較推崇聲明式的方式使用組件，可是考慮到組件嵌套較深的場景，子組件的樣式可能被父級樣式影響，因此咱們針對彈出層類型的組件設計了 API 方式的調用，它們最終會掛載到 body 元素下，避免了樣式受父級影響。

擴展

cube-ui 的某些組件有着很好的擴展性，咱們能夠根據實際場景需求作功能的擴展，舉例說明：

Popup

彈層類組件的基類，內置全部的彈層類組件（Toast、Picker、TimePicker、Dialog、ActionSheet ）等都是基於 Popup 組件實現，固然咱們也能夠基於它開發更豐富的彈層類組件。
Picker

移動端選擇器組件， TimePicker 就是在 Picker 基礎上封裝出來的組件，固然咱們也能夠基於 Picker 擴展出一個城市選擇器組件。