淺析Vue中拆分視圖層代碼的5點(diǎn)建議

一.框架的定位

框架通常只是一種設(shè)計(jì)模式的實(shí)現(xiàn)，它并不意味著你可以在開(kāi)發(fā)中避免所有分層設(shè)計(jì)工作。

SPA 框架幾乎都是基于 MVC 或 MVVM 設(shè)計(jì)模式而建立起來(lái)的，這些模式都只是宏觀的分層設(shè)計(jì)，當(dāng)代碼量開(kāi)始隨著項(xiàng)目增大而增多時(shí)，問(wèn)題就會(huì)越來(lái)越多。許多企業(yè)內(nèi)部的項(xiàng)目仍然在使用 angularjs1.X ，你會(huì)發(fā)現(xiàn)許多 controller 的體積大到令人發(fā)指，稍有經(jīng)驗(yàn)的團(tuán)隊(duì)會(huì)利用好 angularjs1 構(gòu)建的 controller , service , filter 以及路由和消息機(jī)制來(lái)完成基本的拆分和解耦，這已經(jīng)能讓他們的開(kāi)發(fā)能力中等體量的項(xiàng)目，往往只有掌握了 angularjs1 玩法精髓—— directive 的隊(duì)伍，才能夠在應(yīng)付大型項(xiàng)目時(shí)使代碼保持足夠的清晰度，當(dāng)然這只是在代碼形態(tài)和模塊劃分上的工作，相當(dāng)于代碼的骨骼，想要讓業(yè)務(wù)邏輯本身更加清晰，就需要更高級(jí)的建模設(shè)計(jì)知識(shí)來(lái)對(duì)業(yè)務(wù)邏輯進(jìn)行分層，例如 領(lǐng)域驅(qū)動(dòng)模型 。如果你仍然在使用 angularjs1.x 的版本進(jìn)行開(kāi)發(fā)，可以參考【如何重構(gòu)Controller】進(jìn)行基本的分層拆分設(shè)計(jì)。

有趣的是一些團(tuán)隊(duì)認(rèn)為無(wú)法承載大型項(xiàng)目是 angularjs1.x 的原罪，與他們的開(kāi)發(fā)水平無(wú)關(guān)，于是將希望寄托于擁有自動(dòng)化工具加持的現(xiàn)代化 SPA 框架，然而如果有機(jī)會(huì)觀察你就會(huì)發(fā)現(xiàn)，許多項(xiàng)目對(duì)新框架的使用方式和之前并沒(méi)有本質(zhì)的差別，只不過(guò)是把以前臃腫到不行的代碼又換了一種形式塞進(jìn)了前端工程里，然后借著 ES6 語(yǔ)法和新型框架本身的簡(jiǎn)潔性，開(kāi)始沾沾自喜地認(rèn)為這是自己重構(gòu)的功勞。

請(qǐng)記住，如果不進(jìn)行結(jié)構(gòu)設(shè)計(jì)，即便使用最新版本的最熱門的框架，寫(xiě)出來(lái)的代碼依舊會(huì)是一團(tuán)亂麻。

二. Vue開(kāi)發(fā)中的script拆分優(yōu)化

以 Vue 框架為例，在工程化工具和 vue-loader 的支撐下，主流的開(kāi)發(fā)模式是基于 *.vue 這種單文件組件形態(tài)的。一個(gè)典型的 vue 組件包含如下幾個(gè)部分：

<template>
 <!--視圖模板-->
</template>

<script>
 /*編寫(xiě)組件腳本*/
 export default {
 name:'component1'
 }
</script>

<style>
 /*編寫(xiě)組件樣式*/
</style>

script 的部分通常包含有 交互邏輯 ， 業(yè)務(wù)邏輯 ， 數(shù)據(jù)轉(zhuǎn)換 以及 DOM操作 ，如果不加整理，很容易變得混亂不堪。 *.vue 文件的本質(zhì)是View層代碼，它應(yīng)該盡可能輕量并包含與視圖有關(guān)的信息，即 特性聲明 和 事件分發(fā) ，其他的代碼理論上都應(yīng)該剝離出去，這樣當(dāng)項(xiàng)目體量增大后，維護(hù)起來(lái)就更容易聚焦關(guān)鍵信息，下面就如何進(jìn)行腳本代碼拆分提供一些思路，有一些可能是很基本的原則，為盡可能完整就放在一起，你并不需要從最開(kāi)始就采納所有的建議。

1.組件劃分

這是View層減重的基礎(chǔ)，將可共用的視圖組件剝離出去，改為消息機(jī)制進(jìn)行通信，甚至直接剝離出包含視圖和業(yè)務(wù)代碼的業(yè)務(wù)邏輯組件，都可以有效地拆分View層，降低代碼的復(fù)雜度。

2.剝離業(yè)務(wù)邏輯代碼

script 中最大的一部分一般是業(yè)務(wù)邏輯，首先將業(yè)務(wù)邏輯代碼剝離為獨(dú)立的 [name].business.js 模塊，這樣做的直觀好處就是減輕了View層，另一方面是解除了業(yè)務(wù)邏輯和頁(yè)面之間的強(qiáng)綁定關(guān)系，如果其他頁(yè)面也涉及到這塊業(yè)務(wù)邏輯中的個(gè)別方法，就可以直接進(jìn)行復(fù)用，最后就是當(dāng)項(xiàng)目逐漸復(fù)雜，你決定引入 vuex 來(lái)進(jìn)行狀態(tài)管理時(shí)View層會(huì)相對(duì)更容易修改。

一段包含基本增刪改查邏輯的組件大概是下面的樣子：

<script>
 export default{
 name:'XXX',
 methods:{
  handleClickCreate(){},
  handleClickEdit(){},
  handleClickRefresh(){},
  handleClickDelete(){},
  sendCreate(){},
  sendEdit(){},
  sendGetAll(){},
  sendDelete(){}
 }
 }
</script>

簡(jiǎn)易的剝離方式是將交互邏輯保留在視圖層，將業(yè)務(wù)邏輯部分代碼放在另一個(gè)模塊中，然后利用 ES6 擴(kuò)展運(yùn)算符將其加入到組件實(shí)例的方法中，如下所示：

<script>
 import OrderBusiness from './Order.business.js';
 export default{
 name:'XXX',
 methods:{
  ...OrderBusiness,
  handleClickCreate(){},
  handleClickEdit(){},
  handleClickRefresh(){},
  handleClickDelete(){},
 }
 }
</script>

這種方式只是一種形態(tài)上的模塊化拆分，并沒(méi)有對(duì)業(yè)務(wù)邏輯本身進(jìn)行梳理。另一種方式是構(gòu)建獨(dú)立的業(yè)務(wù)邏輯服務(wù)，保留在View層中的代碼很容易轉(zhuǎn)換為使用 vuex 時(shí)的編碼風(fēng)格：

<script>
 import OrderBusiness from './Order.business.js';
 export default{
 name:'XXX',
 methods:{
  handleClickCreate(){
  OrderBusiness.sendCreate();
  },
  handleClickEdit(){
  OrderBusiness.sendEdit();
  },
  handleClickRefresh(){
  OrderBusiness.sendGetAll();
  },
  handleClickDelete(){
  OrderBusiness.sendDelete();
  }
 }
 }
</script>

筆者的建議是，前面三個(gè)示例隨著項(xiàng)目體量的增長(zhǎng)可以實(shí)現(xiàn)漸進(jìn)式的修改。

3. 剝離數(shù)據(jù)轉(zhuǎn)換代碼

在前后端分離的開(kāi)發(fā)模式下，前端所需要的數(shù)據(jù)支持需要從后端請(qǐng)求獲得，但請(qǐng)求來(lái)的原始數(shù)據(jù)通常都是無(wú)法直接使用的，甚至有可能引發(fā)代碼報(bào)錯(cuò)，例如時(shí)間可能是以時(shí)間戳形式傳過(guò)來(lái)的，或者你的代碼需要取用某個(gè)對(duì)象屬性時(shí)，后臺(tái)同學(xué)卻在該屬性上掛了一個(gè)默認(rèn)值 NULL 等，另一方面，開(kāi)發(fā)過(guò)程中的接口改動(dòng)是無(wú)法避免的，所以在代碼結(jié)構(gòu)的設(shè)計(jì)上，應(yīng)該盡可能將可能變化的部分聚合起來(lái)。

比較實(shí)用的做法就是為每一個(gè)接口建立一個(gè) Transformer 函數(shù)，從后臺(tái)請(qǐng)求來(lái)的數(shù)據(jù)先經(jīng)過(guò) Transformer 函數(shù)變換為前臺(tái)能夠流通使用的數(shù)據(jù)結(jié)構(gòu)，并在必要的屬性上添加適當(dāng)?shù)哪J(rèn)值防止報(bào)錯(cuò)，你可以盡情地在此使用 Lodash.js 等函數(shù)工具來(lái)加工和重組自己需要的數(shù)據(jù)，即使最初后臺(tái)傳給你的數(shù)據(jù)不需要加工，也可以保留一個(gè)透?jìng)骱瘮?shù)或是模塊說(shuō)明以提醒其他協(xié)作開(kāi)發(fā)者在面對(duì)這種場(chǎng)景時(shí)采用類似的做法，它的功能就是 為邏輯層提供直接可用的數(shù)據(jù) 。當(dāng)前端代碼越來(lái)越重時(shí)， Transformer 和 Request 部分可以很方便地移動(dòng)到中間層。

4. 善用computed和filters處理數(shù)據(jù)展示

對(duì)原始數(shù)據(jù)的轉(zhuǎn)換并不能覆蓋所有場(chǎng)景，這就需要在定制展示的場(chǎng)景中利用 computed 和 filters ，它們都可以用來(lái)在不改變數(shù)據(jù)的情況下更改展示結(jié)果，例如將數(shù)據(jù)中的0或1轉(zhuǎn)換為 未完成 和 已完成 ，或者是將時(shí)間戳和當(dāng)前時(shí)間作比較后改為可讀性更高的 剛剛 , 1分鐘前 , 1小時(shí)前 , 1天前 等等，這些開(kāi)發(fā)場(chǎng)景中是不能采用強(qiáng)行賦值來(lái)處理的，這是就可以使用計(jì)算屬性 computed 或過(guò)濾器 filters 來(lái)處理，它們的區(qū)別是 computed 一般用于組件內(nèi)部，不具有通用性，而 filters 一般用于可復(fù)用的場(chǎng)景，可以通過(guò)下面的形式來(lái)定義一個(gè) 展示效果為首字母大寫(xiě) 的全局過(guò)濾器：

Vue.filter('capitalize', function (value) {
 if (!value) return ''；
 value = value.toString()；
 return value.charAt(0).toUpperCase() + value.slice(1)；
})

當(dāng)項(xiàng)目中使用 vuex 來(lái)進(jìn)行狀態(tài)管理時(shí)， computed 通常會(huì)等價(jià)替換為 state 中的 getter 。

5. 使用directive處理DOM操作

盡管 Vue 提供了 refs 這個(gè)接口來(lái)實(shí)現(xiàn)在邏輯層直接操作 DOM ，但我們應(yīng)當(dāng)盡可能避免將復(fù)雜的 DOM 操作放在這里，有時(shí)候頁(yè)面上 DOM 變化的場(chǎng)景較多，將每個(gè)變化都使用數(shù)據(jù)驅(qū)動(dòng)的方式顯然是不合理的，這時(shí)就需要用到指令特性 directive ，它常用來(lái)補(bǔ)充實(shí)現(xiàn)一些業(yè)務(wù)邏輯無(wú)關(guān)的 DOM 變化（業(yè)務(wù)邏輯相關(guān)的變化大都通過(guò)數(shù)據(jù)綁定進(jìn)行了自動(dòng)關(guān)聯(lián)）。 directive 的基本用法可以直接參考 【官方指南】 ，需要注意的是許多初級(jí)開(kāi)發(fā)者都不太在意內(nèi)存泄漏的問(wèn)題，在 directive 的使用中需要格外注意這一點(diǎn)，通常我們會(huì)在 bind 事件鉤子中綁定事件并使用屬性持有這個(gè)監(jiān)聽(tīng)函數(shù)，并在 unbind 鉤子中解除對(duì)同一個(gè)監(jiān)聽(tīng)函數(shù)的綁定，即使沒(méi)有使用自定義指令，你也需要建立在必要時(shí)解綁監(jiān)聽(tīng)器的編碼習(xí)慣：

Vue.directive('clickoutside',{
 bind:function (el, binding){
  //定義監(jiān)聽(tīng)器
  function handler(e) {
  if (el.contains(e.target)) {
   return false;
  }
  if (binding.expression){
   binding.value(e);
  }
  }
  el.__clickOutSide__ = handler;
  document.addEventListener('click', handler);
 },
 unbind:function (el) {
  document.removeEventListener('click',el.__clickOutSide__);
  delete el.__clickOutSide__ ;
 }
 });

demo 中提供了一個(gè)簡(jiǎn)單的 directive 示例，你可以用它來(lái)做練習(xí)。

總結(jié)

以上所述是小編給大家介紹的Vue中拆分視圖層代碼的5點(diǎn)建議,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！