Vue中拆分檢視層程式碼的5點建議

大史不說話發表於2019-08-14
Vue

目錄

示例程式碼託管在：http://www.github.com/dashnowords/blogs

部落格園地址：《大史住在大前端》原創博文目錄

華為雲社群地址：【你要的前端打怪升級指南】

分享一篇尤大大演講鎮樓：「2019 JSConf.Asia - 尤雨溪」在框架設計中尋求平衡

一.框架的定位

框架通常只是一種設計模式的實現，它並不意味著你可以在開發中避免所有分層設計工作。

SPA框架幾乎都是基於MVC或MVVM設計模式而建立起來的，這些模式都只是巨集觀的分層設計，當程式碼量開始隨著專案增大而增多時，問題就會越來越多。許多企業內部的專案仍然在使用angularjs1.X，你會發現許多controller的體積大到令人髮指，稍有經驗的團隊會利用好angularjs1構建的controller,service,filter以及路由和訊息機制來完成基本的拆分和解耦，這已經能讓他們的開發能力中等體量的專案，往往只有掌握了angularjs1玩法精髓——directive的隊伍，才能夠在應付大型專案時使程式碼保持足夠的清晰度，當然這只是在程式碼形態和模組劃分上的工作，相當於程式碼的骨骼，想要讓業務邏輯本身更加清晰，就需要更高階的建模設計知識來對業務邏輯進行分層，例如領域驅動模型。如果你仍然在使用angularjs1.x的版本進行開發，可以參考【如何重構Controller】進行基本的分層拆分設計。

有趣的是一些團隊認為無法承載大型專案是angularjs1.x的原罪，與他們的開發水平無關，於是將希望寄託於擁有自動化工具加持的現代化SPA框架，然而如果有機會觀察你就會發現，許多專案對新框架的使用方式和之前並沒有本質的差別，只不過是把以前臃腫到不行的程式碼又換了一種形式塞進了前端工程裡，然後藉著ES6語法和新型框架本身的簡潔性，開始沾沾自喜地認為這是自己重構的功勞。

請記住，如果不進行結構設計，即便使用最新版本的最熱門的框架，寫出來的程式碼依舊會是一團亂麻。

二. Vue開發中的script拆分優化

以Vue框架為例，在工程化工具和vue-loader的支撐下，主流的開發模式是基於*.vue這種單檔案元件形態的。一個典型的vue元件包含如下幾個部分：

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

<script>
    /*編寫元件指令碼*/
    export default {
        name:'component1'
    }
</script>

<style>
    /*編寫元件樣式*/
</style>

script的部分通常包含有互動邏輯，業務邏輯，資料轉換以及DOM操作，如果不加整理，很容易變得混亂不堪。*.vue檔案的本質是View層程式碼，它應該儘可能輕量幷包含與檢視有關的資訊，即特性宣告和事件分發，其他的程式碼理論上都應該剝離出去，這樣當專案體量增大後，維護起來就更容易聚焦關鍵資訊，下面就如何進行指令碼程式碼拆分提供一些思路，有一些可能是很基本的原則，為儘可能完整就放在一起，你並不需要從最開始就採納所有的建議。

1.元件劃分

這是View層減重的基礎，將可共用的檢視元件剝離出去，改為訊息機制進行通訊，甚至直接剝離出包含檢視和業務程式碼的業務邏輯元件，都可以有效地拆分View層，降低程式碼的複雜度。

2.剝離業務邏輯程式碼

script中最大的一部分一般是業務邏輯，首先將業務邏輯程式碼剝離為獨立的[name].business.js模組，這樣做的直觀好處就是減輕了View層，另一方面是解除了業務邏輯和頁面之間的強繫結關係，如果其他頁面也涉及到這塊業務邏輯中的個別方法，就可以直接進行復用，最後就是當專案逐漸複雜，你決定引入vuex來進行狀態管理時View層會相對更容易修改。

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

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

簡易的剝離方式是將互動邏輯保留在檢視層，將業務邏輯部分程式碼放在另一個模組中，然後利用ES6擴充套件運算子將其加入到元件例項的方法中，如下所示：

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

這種方式只是一種形態上的模組化拆分，並沒有對業務邏輯本身進行梳理。另一種方式是構建獨立的業務邏輯服務，保留在View層中的程式碼很容易轉換為使用vuex時的編碼風格：

<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>

筆者的建議是，前面三個示例隨著專案體量的增長可以實現漸進式的修改。

3. 剝離資料轉換程式碼

在前後端分離的開發模式下，前端所需要的資料支援需要從後端請求獲得，但請求來的原始資料通常都是無法直接使用的，甚至有可能引發程式碼報錯，例如時間可能是以時間戳形式傳過來的，或者你的程式碼需要取用某個物件屬性時，後臺同學卻在該屬性上掛了一個預設值NULL等，另一方面，開發過程中的介面改動是無法避免的，所以在程式碼結構的設計上，應該儘可能將可能變化的部分聚合起來。

比較實用的做法就是為每一個介面建立一個Transformer函式，從後臺請求來的資料先經過Transformer函式變換為前臺能夠流通使用的資料結構，並在必要的屬性上新增適當的預設值防止報錯，你可以盡情地在此使用Lodash.js等函式工具來加工和重組自己需要的資料，即使最初後臺傳給你的資料不需要加工，也可以保留一個透傳函式或是模組說明以提醒其他協作開發者在面對這種場景時採用類似的做法，它的功能就是為邏輯層提供直接可用的資料。當前端程式碼越來越重時，Transformer和Request部分可以很方便地移動到中間層。

4. 善用computed和filters處理資料展示

對原始資料的轉換並不能覆蓋所有場景，這就需要在定製展示的場景中利用computed和filters，它們都可以用來在不改變資料的情況下更改展示結果，例如將資料中的0或1轉換為未完成和已完成，或者是將時間戳和當前時間作比較後改為可讀性更高的剛剛,1分鐘前,1小時前,1天前等等，這些開發場景中是不能採用強行賦值來處理的，這是就可以使用計算屬性computed或過濾器filters來處理，它們的區別是computed一般用於元件內部，不具有通用性，而filters一般用於可複用的場景，可以通過下面的形式來定義一個展示效果為首字母大寫的全域性過濾器：

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

當專案中使用vuex來進行狀態管理時，computed通常會等價替換為state中的getter。

5. 使用directive處理DOM操作

儘管Vue提供了refs這個介面來實現在邏輯層直接操作DOM，但我們應當儘可能避免將複雜的DOM操作放在這裡，有時候頁面上DOM變化的場景較多，將每個變化都使用資料驅動的方式顯然是不合理的，這時就需要用到指令特性directive，它常用來補充實現一些業務邏輯無關的DOM變化（業務邏輯相關的變化大都通過資料繫結進行了自動關聯）。directive的基本用法可以直接參考【官方指南】，需要注意的是許多初級開發者都不太在意記憶體洩漏的問題，在directive的使用中需要格外注意這一點，通常我們會在bind事件鉤子中繫結事件並使用屬性持有這個監聽函式，並在unbind鉤子中解除對同一個監聽函式的繫結，即使沒有使用自定義指令，你也需要建立在必要時解綁監聽器的編碼習慣：

Vue.directive('clickoutside',{
      bind:function (el, binding){
          //定義監聽器
          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中提供了一個簡單的directive示例，你可以用它來做練習。

相關文章