摘要：正文距離第一篇組件庫(kù)文章發(fā)布已經(jīng)過去個(gè)月了，在此期間利用零零散散的時(shí)間持續(xù)更新組件庫(kù)，目前移動(dòng)端組件庫(kù)已經(jīng)更新大類基礎(chǔ)表單彈出層種組件供使用。鏈接組件庫(kù)從到開發(fā)心得主頁(yè)更改版版方案祝工作順利鄧文斌年月日

正文

距離第一篇UI組件庫(kù)文章發(fā)布已經(jīng)過去3個(gè)月了，在此期間利用零零散散的時(shí)間持續(xù)更新owl-ui組件庫(kù)，目前owl-ui移動(dòng)端組件庫(kù)已經(jīng)更新3大類（基礎(chǔ)、表單、彈出層）9種組件（Button、Tabs、Input、Select、Switch、Drawer、Dialog、Picker、Toast）供使用。本篇文章主要講述我在這3個(gè)月內(nèi)開發(fā)UI組件的個(gè)人心得。如果想了解項(xiàng)目結(jié)構(gòu)可以閱讀上一篇文章，如果想了解實(shí)現(xiàn)原理可以閱讀源碼。所有連接在文章的結(jié)尾處。

我們從彈出層組件講起

前方多圖預(yù)警

先看效果圖。

我在選擇寫組件的時(shí)候，首先選擇做彈出層部分。為什么呢？我列出以下幾點(diǎn)。

共性高、可復(fù)用。

兼容性高。

快速出貨，提升成就感。

先說第一點(diǎn)：共性高、可復(fù)用

因?yàn)楸救朔浅１?，所以做事之前需要?gòu)思很久，這樣會(huì)減少之后重復(fù)性的工作。比如在做彈出層的時(shí)候，不少人會(huì)發(fā)現(xiàn)以上組件的共同點(diǎn)。沒錯(cuò)，他們都是顯示或隱藏（廢話）。我們接著往下分析，除了顯示或隱藏之外，他們大部分都有遮罩層部分。還有動(dòng)畫效果也一致。我們先根據(jù)這幾點(diǎn)把功能抽象出來，如何做呢？

在vue和less中都有mixins方式，根據(jù)mixins我們很方便的將組件中的共性提取出來，達(dá)到代碼精簡(jiǎn)的目的。以下代碼就是彈出層組件中顯示或隱藏功能的mixins文件。

// src/common/mixins/visibility.js

const EVENT_TOGGLE = "toggle"

export default {
  model: {
    prop: "visible",
    event: EVENT_TOGGLE
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: Number,
      default: 100
    },
    maskStyle: {
      type: Object,
      default: () => {}
    },
    containerStyle: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      isVisible: false
    }
  },
  methods: {
    hide () {
      this.isVisible = false
    },
    show () {
      this.isVisible = true
    }
  },
  watch: {
    isVisible (val) {
      this.$emit("update:visible", val)
      this.$emit("callback", val)
      if (this.lockScroll) {
        document.body.style.overflow = val ? "hidden" : ""
      }
    },
    visible: {
      handler (val) {
        this.isVisible = val
      }
    }
  },
  beforeDestroy () {
    this.lockScroll && (document.body.style.overflow = "")
  }
}

上面主要做一件事，根據(jù)visible屬性判斷組件展示或隱藏。

使用方式如下：

// 組件文件

順便說一下項(xiàng)目中運(yùn)用到less的mixins運(yùn)用，比如1px問題。

// src/styles/common/border.less

.min-device-pixel-ratio(@scale2, @scale3) {
  @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
    transform: @scale2;
  }
  @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
    transform: @scale3;
  }
}

.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
  &::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border: 1PX @style @color;
    border-radius: @radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      border-radius: @radius * 2;
      transform: scale(.5);
    }
    @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      border-radius: @radius * 3;
      transform: scale(.33);
    }
  }
}

.border-top-1px(@color: #DDD, @style: solid) {
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1Px @style @color;
    transform-origin: 0 0;
    .min-device-pixel-ratio(scaleY(.5), scaleY(.33));
  }
}

該函數(shù)可以通過傳參改變線的顏色和類型。

使用方式如下：

// src/styles/packages/dialog.less

@import "../common/border";

@dialog-prefix-cls: ~"@{css-prefix}dialog";

.@{dialog-prefix-cls} {
    ...
    &-btns {
        ...
        .border-top-1px(); // Here
    }
}

合理的運(yùn)用mixins可以使得項(xiàng)目結(jié)構(gòu)清晰、減少冗余代碼更利于后期維護(hù)。

優(yōu)化方式有很多種，每個(gè)人有不同的編碼習(xí)慣，因人而異。但是目標(biāo)都是一致的，讓自己的代碼變得簡(jiǎn)潔、精煉和易讀。

在彈出層中將公共部分抽象封裝，比如遮罩層

// src/common/components/popup-mask.vue

第二點(diǎn)：兼容性高

我在工作中接觸的移動(dòng)端需求比較多，PC端做過一些管理后臺(tái)。移動(dòng)端與PC端的項(xiàng)目，給我最最直觀的感受是，移動(dòng)端要求UI極其嚴(yán)格，一像素都不能差，而PC端差不多就可以了，UI設(shè)計(jì)師們也不會(huì)過多糾結(jié)PC端做出來的頁(yè)面是否跟原型圖完全吻合。

在移動(dòng)端，有的產(chǎn)品特別喜歡更改UI設(shè)計(jì)，特別是有表單部分的頁(yè)面，今天產(chǎn)品嫌棄字體小了，明天可能覺得字體又太大了；今天把輸入框改成圓角，明天就喜歡直角。今天覺得橫向布局好，沒準(zhǔn)明天就要試試縱向布局。產(chǎn)品覺得這么改不要緊，殊不知如果項(xiàng)目中運(yùn)用了UI組件庫(kù)，這么修改完后，代碼冗余太多。都是為了更好的用戶體驗(yàn)，慢慢也能理解。在那之后的幾個(gè)移動(dòng)端項(xiàng)目里，表單部分基本不會(huì)用到UI組件庫(kù)。但是彈出層部分沒有過多的限制，據(jù)我了解到的產(chǎn)品內(nèi)部最統(tǒng)一的就是彈出層。如果有同學(xué)想用owl-ui的彈出層部分的話，可以放心用，支持按需加載。

第三點(diǎn)：快速出貨，提升成就感

我喜歡把長(zhǎng)期計(jì)劃拆解成多個(gè)很小的事情來做，就是制定很多小目標(biāo)。好比游戲進(jìn)度條一樣，使其量化。之所以這么做的原因是，我能周期性的看到我的工作成果，這樣可以激勵(lì)自己，提升信心。

在彈出層組件中，mixins做好之后，像toast、dialog、drawer組件只剩下設(shè)計(jì)api部分而已。而picker組件是基于drawer組件來實(shí)現(xiàn)的內(nèi)容部分而已。當(dāng)picker組件實(shí)現(xiàn)完成，這時(shí)已經(jīng)說明表單的select組件也已經(jīng)完成了。說起來簡(jiǎn)單，其實(shí)做起來也不難。

最后在使用彈出層組件時(shí)，我想用api調(diào)用的方式來使用它。這里我借鑒了cube-ui的vue-create-api，但是因?yàn)椴糠址椒ú惶m合我，所以我稍加改動(dòng)，借鑒（抄）到自己的庫(kù)中。

比如Toast組件，官網(wǎng)給出的使用方式如下：

const toast = this.$createToast({
    time: 1000,
    txt: "Toast time 1s"
})
toast.show()

我是個(gè)懶人，對(duì)我來說使用一個(gè)消息提醒要寫這么多，我就覺得很煩惱，所以我在owl-ui中把vue-create-api稍加改造后，Toast使用方式如下：

this.$toast("歡迎光臨")

清爽了很多。

其他類型組件使用情況，有人喜歡整套使用，有人喜歡部分使用。而我屬于后者。

結(jié)語(yǔ)

我寫組件庫(kù)的目的就兩點(diǎn)。第一點(diǎn)可以幫助我重新梳理一遍vue的知識(shí)體系，了解到自身的不足，不斷的克服困難，讓自己成長(zhǎng)。第二點(diǎn)結(jié)識(shí)更多圈內(nèi)的朋友，提高見識(shí)。我會(huì)持續(xù)更新迭代owl-ui組件庫(kù)，歡迎喜歡技術(shù)的朋友多提建議。最后附上吳軍博士說過話，這句話讓我終身受益。

什么事情從0分做到50分靠常識(shí)，從50分做到90分靠技術(shù)，從90分做到100分靠的是藝術(shù)。做到90分我們可以通過努力能達(dá)到，至于是否能做到更好，就依人而定了。

鏈接

UI組件庫(kù)從0到1開發(fā)心得

github

owl-ui主頁(yè)

vue-create-api更改版

less版1px方案

祝工作順利

鄧文斌

2019年5月20日