前言

在我們?nèi)粘４a開發(fā)過(guò)程中，組件的使用是必不可少的，我們也會(huì)去封裝組件。但是大家寫組件的風(fēng)格各式各樣，沒(méi)有一個(gè)統(tǒng)一的準(zhǔn)則。而且也沒(méi)有遵循軟件開發(fā)的原則：高內(nèi)聚、低耦合；因?yàn)槲沂墙o行業(yè)提供代碼的，行業(yè)給交付提供代碼。我們要盡量去減少大家的接入成本，降低接入成本的最好方案就是我們?cè)谠O(shè)計(jì)組件的時(shí)候編寫好文檔，保證職責(zé)單一，不要耦合業(yè)務(wù)，就在很多程度上降低了成本了。在我們平時(shí)開發(fā)過(guò)程中，也遇到過(guò)一些組件，一個(gè)組件的實(shí)現(xiàn)有上千行代碼，那種組件我是直接不想看的。所以我們?cè)陂_發(fā)組件的時(shí)候如果你的代碼超過(guò)了300行，那你就需要好好思考一下，是否有需要優(yōu)化的了，設(shè)計(jì)是否合理，是否有重復(fù)的代碼可以封裝等等。

創(chuàng)新互聯(lián)公司成立于2013年，先為防城港等服務(wù)建站，防城港等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為防城港企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

大家在看這個(gè)文檔時(shí)可以先詳細(xì)閱讀一下這個(gè)文檔

組件職責(zé)單一

比如商品列表篩選條件組件，提供篩選功能，輸出一個(gè)選擇的form提供給外部組件請(qǐng)求列表數(shù)據(jù)。

一個(gè)很簡(jiǎn)單的功能，為了保證組件的功能的單一，不允許其他模塊往這個(gè)組件中新增篩選條件，如果在不修改組件的情況下可以直接使用這個(gè)組件

體積要小

為了不讓組件去耦合業(yè)務(wù)，要盡可能的保證組件的純粹性，如上面講到的篩選條件組件，只需要保證輸出的篩選字段正確性，而篩選的條件的值可以由外部組件提供（如商品分類的數(shù)據(jù)），

為什么數(shù)據(jù)要外部傳入？

這是因?yàn)橐话闱闆r下存在的篩選條件，列表也肯定會(huì)有，而有時(shí)候后端在返回?cái)?shù)據(jù)時(shí)只返回了id，就需要我們?nèi)ネㄟ^(guò)id解析出對(duì)應(yīng)的name，這就需要使用到對(duì)應(yīng)的數(shù)據(jù)，這個(gè)時(shí)候就可以共享數(shù)據(jù)。

這樣也可以進(jìn)一步降低耦合與體積

遵循使用習(xí)慣

很多組件都有他們的慣用方法，比如表單組件會(huì)使用 v-model 來(lái)進(jìn)行綁定表單值、模態(tài)框我們會(huì)使用visible 或 show() 方法來(lái)控制顯示。

遵循這些慣用方法， 可以減少開發(fā)者的心智負(fù)擔(dān)，維持接口的統(tǒng)一性，另外也更容易地被組合/集成(比如在 Ant-design 中 Form.Item 就依賴于這個(gè)協(xié)議)。

舉個(gè)例子，頭像選擇器：

export default {
  name: 'AvatarSelect',
  props: ['avatar'],
	methods: {
    handleSelect() {
			// ...
			this.$emit('avatar-change', value)
		}
  }
}

謹(jǐn)防樣式污染

• 每個(gè)組件應(yīng)該有一個(gè)命名空間。且這個(gè)命名空間最好避免和其他組件沖突。

• CSS 類嵌套不要超過(guò)兩級(jí)。否則從可讀性和可維護(hù)性上都會(huì)大打折扣

  .foo {
    .bar {
  		.baz {
  		  // 幾百幾千行代碼
  			}
  		// 幾百幾千行代碼
  	}
  }
  

• 推薦使用 BEM 來(lái)作為CSS 類名。讓CSS 的語(yǔ)義和組件結(jié)構(gòu)關(guān)聯(lián)起來(lái)。

  .my-component {
    &__head {/*...*/}
    &__footer {/*...*/}
  }
  

• 通過(guò) class 或 style 來(lái)定制組件的樣式。不要使用直接給標(biāo)簽加樣式

  // ?
  
  
  
  // ?
  
  
  

組件擴(kuò)展

由于我們是基礎(chǔ)產(chǎn)品，那提供的組件也要盡量豐富，豐富并不是說(shuō)要在組件中加各種判斷，而是在職責(zé)單一、體積、耦合間權(quán)衡利弊，也可以創(chuàng)建同類型組件，在同一個(gè)文件index.js中export

單向數(shù)據(jù)流

• 只通過(guò) props 向下級(jí)傳遞狀態(tài)。不要通過(guò) ref 這類方式，過(guò)程式地去影響下級(jí)組件的狀態(tài)。

• 下級(jí)組件只通過(guò) event 向上級(jí)通信。

• 下級(jí)組件不準(zhǔn)修改 props 源數(shù)據(jù)。

• 遵循 v-model, update:* 協(xié)議。

• v-model 遵循數(shù)據(jù)不可變?cè)瓌t。即你不能直接修改 value，而是應(yīng)該創(chuàng)建一個(gè)新的 value。

  // 假設(shè) value 是一個(gè)列表
  handleRemove(item) {
    const idx = this.value.indexOf(item)
    if (idx !== -1) {
      const newValue = [...this.value]
  		newValue.splice(idx, 1)
      this.$emit('input', newValue)
  	}
  }
  

• 使用 computed 來(lái)衍生數(shù)據(jù)。保持源數(shù)據(jù)的純潔。

• 分離業(yè)務(wù)狀態(tài)和視圖狀態(tài)。比如列表項(xiàng)的激活狀態(tài)就是視圖狀態(tài)，而后端返回的數(shù)據(jù)就是業(yè)務(wù)狀態(tài)。

  // 推薦
  
  
  // 不推薦: 直接在源數(shù)據(jù)上添加了一個(gè)字段，污染了原有的數(shù)據(jù)。
  
  

進(jìn)階篇

用 JSX 賦能 Vue

Vue 本身是完全支持 JSX 渲染的，但是大部分情況我們還是習(xí)慣或者推薦使用模板。

如果你習(xí)慣了 React 的 renderProps ，覺(jué)得 Vue 的 slot 不夠用，那么可以上 JSX。

使用依賴注入