Vue中拆分視圖層代碼的5點建議

目錄

* 一.框架的定位 <https://www.cnblogs.com/dashnowords/p/11354469.html#一.框架的定位>
* 二. Vue開發(fā)中的script拆分優(yōu)化
<https://www.cnblogs.com/dashnowords/p/11354469.html#二.-vue開發(fā)中的script拆分優(yōu)化>
* 1.組件劃分 <https://www.cnblogs.com/dashnowords/p/11354469.html#組件劃分>
* 2.剝離業(yè)務(wù)邏輯代碼 <https://www.cnblogs.com/dashnowords/p/11354469.html#剝離業(yè)務(wù)邏輯代碼>
* 3. 剝離數(shù)據(jù)轉(zhuǎn)換代碼 <https://www.cnblogs.com/dashnowords/p/11354469.html#剝離數(shù)據(jù)轉(zhuǎn)換代碼>
* 4. 善用computed和filters處理數(shù)據(jù)展示
<https://www.cnblogs.com/dashnowords/p/11354469.html#善用computed和filters處理數(shù)據(jù)展示>
* 5. 使用directive處理DOM操作
<https://www.cnblogs.com/dashnowords/p/11354469.html#使用directive處理dom操作>
示例代碼托管在：http://www.github.com/dashnowords/blogs
<https://github.com/dashnowords/blogs/tree/master/Demo/vue-demos/directive-demo>

博客園地址：《大史住在大前端》原創(chuàng)博文目錄 <https://www.cnblogs.com/dashnowords/p/10127926.html>

華為云社區(qū)地址：【你要的前端打怪升級指南】
<https://bbs.huaweicloud.com/blogs/8ae7e6420a4611e9bd5a7ca23e93a891>

分享一篇尤大大演講鎮(zhèn)樓：「2019 JSConf.Asia - 尤雨溪」在框架設(shè)計中尋求平衡
<https://zhuanlan.zhihu.com/p/76622839>

一.框架的定位

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

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

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

請記住，如果不進行結(jié)構(gòu)設(shè)計，即便使用最新版本的最熱門的框架，寫出來的代碼依舊會是一團亂麻。

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

以Vue框架為例，在工程化工具和vue-loader的支撐下，主流的開發(fā)模式是基于*.vue這種單文件組件形態(tài)的。一個典型的vue組件包含如下幾個部分：
<template> <!--視圖模板--> </template> <script> /*編寫組件腳本*/ export default {
name:'component1' } </script> <style> /*編寫組件樣式*/ </style>
script的部分通常包含有交互邏輯，業(yè)務(wù)邏輯，數(shù)據(jù)轉(zhuǎn)換以及DOM操作，如果不加整理，很容易變得混亂不堪。*.vue
文件的本質(zhì)是View層代碼，它應(yīng)該盡可能輕量并包含與視圖有關(guān)的信息，即特性聲明和事件分發(fā)
，其他的代碼理論上都應(yīng)該剝離出去，這樣當(dāng)項目體量增大后，維護起來就更容易聚焦關(guān)鍵信息，下面就如何進行腳本代碼拆分提供一些思路，有一些可能是很基本的原則，為盡可能完整就放在一起，你并不需要從最開始就采納所有的建議。

1.組件劃分


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

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

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

一段包含基本增刪改查邏輯的組件大概是下面的樣子：
<script> export default{ name:'XXX', methods:{ handleClickCreate(){},
handleClickEdit(){}, handleClickRefresh(){}, handleClickDelete(){},
sendCreate(){}, sendEdit(){}, sendGetAll(){}, sendDelete(){} } } </script>
簡易的剝離方式是將交互邏輯保留在視圖層，將業(yè)務(wù)邏輯部分代碼放在另一個模塊中，然后利用ES6擴展運算符將其加入到組件實例的方法中，如下所示：
<script> import OrderBusiness from './Order.business.js'; export default{
name:'XXX', methods:{ ...OrderBusiness, handleClickCreate(){},
handleClickEdit(){}, handleClickRefresh(){}, handleClickDelete(){}, } }
</script>
這種方式只是一種形態(tài)上的模塊化拆分，并沒有對業(yè)務(wù)邏輯本身進行梳理。另一種方式是構(gòu)建獨立的業(yè)務(wù)邏輯服務(wù)，保留在View層中的代碼很容易轉(zhuǎn)換為使用vuex
時的編碼風(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>
筆者的建議是，前面三個示例隨著項目體量的增長可以實現(xiàn)漸進式的修改。

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


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

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

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

對原始數(shù)據(jù)的轉(zhuǎn)換并不能覆蓋所有場景，這就需要在定制展示的場景中利用computed和filters
，它們都可以用來在不改變數(shù)據(jù)的情況下更改展示結(jié)果，例如將數(shù)據(jù)中的0或1轉(zhuǎn)換為未完成和已完成，或者是將時間戳和當(dāng)前時間作比較后改為可讀性更高的剛剛,1分鐘前,
1小時前,1天前等等，這些開發(fā)場景中是不能采用強行賦值來處理的，這是就可以使用計算屬性computed或過濾器filters來處理，它們的區(qū)別是computed
一般用于組件內(nèi)部，不具有通用性，而filters一般用于可復(fù)用的場景，可以通過下面的形式來定義一個展示效果為首字母大寫的全局過濾器：
Vue.filter('capitalize', function (value) { if (!value) return ''； value =
value.toString()； return value.charAt(0).toUpperCase() + value.slice(1)； })
當(dāng)項目中使用vuex來進行狀態(tài)管理時，computed通常會等價替換為state中的getter。

5. 使用directive處理DOM操作

盡管Vue提供了refs這個接口來實現(xiàn)在邏輯層直接操作DOM，但我們應(yīng)當(dāng)盡可能避免將復(fù)雜的DOM操作放在這里，有時候頁面上DOM
變化的場景較多，將每個變化都使用數(shù)據(jù)驅(qū)動的方式顯然是不合理的，這時就需要用到指令特性directive，它常用來補充實現(xiàn)一些業(yè)務(wù)邏輯無關(guān)的DOM
變化（業(yè)務(wù)邏輯相關(guān)的變化大都通過數(shù)據(jù)綁定進行了自動關(guān)聯(lián)）。directive的基本用法可以直接參考【官方指南】
<https://cn.vuejs.org/v2/guide/custom-directive.html>
，需要注意的是許多初級開發(fā)者都不太在意內(nèi)存泄漏的問題，在directive的使用中需要格外注意這一點，通常我們會在bind
事件鉤子中綁定事件并使用屬性持有這個監(jiān)聽函數(shù)，并在unbind
鉤子中解除對同一個監(jiān)聽函數(shù)的綁定，即使沒有使用自定義指令，你也需要建立在必要時解綁監(jiān)聽器的編碼習(xí)慣：
Vue.directive('clickoutside',{ bind:function (el, binding){ //定義監(jiān)聽器 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示例，你可以用它來做練習(xí)。

• ? 上一篇：神奇的 SQL 之溫柔的陷阱 → 三值邏輯 與 NULL ！
• ? 下一篇：你以為你為知識付費了，其實你只是為內(nèi)容付費了