Vue的編碼技巧與規(guī)范使用詳解

2019-11-19 10:56:58

字體：大中小

供稿：網(wǎng)友

當(dāng)我們完成項(xiàng)目的構(gòu)建，進(jìn)入開發(fā)階段的時(shí)候，除了你需要了解框架本身的知識(shí)點(diǎn)外，我們還需要提前掌握一些項(xiàng)目的編碼技巧與規(guī)范，在根源上解決之后因編碼缺陷而導(dǎo)致的項(xiàng)目維護(hù)困難、性能下降等常見問題，為項(xiàng)目多人開發(fā)提供編碼的一致性。

本文將羅列項(xiàng)目中常用的一些編碼技巧與規(guī)范來幫助大家提升代碼質(zhì)量，并會(huì)結(jié)合代碼片段加強(qiáng)大家的理解與認(rèn)知。當(dāng)然不是所有實(shí)例都是針對(duì) Vue.js 開發(fā)的，有些同樣也適用于其他前端項(xiàng)目。

實(shí)例

1. 使用對(duì)象代替 if 及 switch

在很多情況下，我們經(jīng)常會(huì)遇到循環(huán)判斷執(zhí)行賦值操作的場(chǎng)景，一般我們都會(huì)使用 if 及 switch 的條件判斷，如果符合則執(zhí)行賦值，不符合則進(jìn)入下個(gè)判斷，比如：

let name = 'lisi';let age = 18;if (name === 'zhangsan') { age = 21;} else if (name === 'lisi') { age = 18;} else if (name === 'wangwu') { age = 12;}// 或者switch(name) { case 'zhangsan':  age = 21;  break case 'lisi':  age = 18;  break case 'wangwu':  age = 12;  break}

這樣的寫法不僅冗余，而且代碼執(zhí)行效率不高，我們可以使用對(duì)象的形式簡(jiǎn)寫：

let name = 'lisi';let obj = { zhangsan: 21, lisi: 18, wangwu: 12};let age = obj[name] || 18;

以上這種技巧適用于循環(huán)判斷一次賦值的情況，如果判斷過后有較多處理邏輯的還需要使用 if 或 switch 等方法。

2. 使用 Array.from 快速生成數(shù)組

一般我們生成一個(gè)有規(guī)律的數(shù)組會(huì)使用循環(huán)插入的方法，比如使用時(shí)間選擇插件時(shí)，我們可能需要將小時(shí)數(shù)存放在數(shù)組中：

let hours = [];for (let i = 0; i < 24; i++) { hours.push(i + '時(shí)');}

如果使用 Array.from 我們可以簡(jiǎn)寫為：

let hours = Array.from({ length: 24 }, (value, index) => index + '時(shí)');

3. 使用 router.beforeEach 來處理跳轉(zhuǎn)前邏輯

在某些情況下，我們需要在路由跳轉(zhuǎn)前處理一些特定的業(yè)務(wù)邏輯，比如修改路由跳轉(zhuǎn)、設(shè)置 title 等，代碼如下：

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 首頁const Home = (resolve => { require.ensure(['../views/home.vue'], () => {  resolve(require('../views/home.vue')) })})let base = `${process.env.BASE_URL}`;let router = new Router({ mode: 'history', base: base, routes: [  {   path: '/',   name: 'home',   component: Home,   meta: { title: '首頁' }  }, ]})router.beforeEach((to, from, next) => { let title = to.meta && to.meta.title;  if (title) {  document.title = title; // 設(shè)置頁面 title }  if (to.name === 'home') {   // 攔截并跳轉(zhuǎn)至 page2 單頁，$openRouter 方法在第 5 節(jié)中封裝  Vue.$openRouter({   name: 'page2'  }); }  next();})export default router

注意最后需要調(diào)用 next() 方法執(zhí)行路由跳轉(zhuǎn)。

4. 使用 v-if 來優(yōu)化頁面加載

在 Vue 頁面中，一些模塊可能需要用戶主動(dòng)觸發(fā)才會(huì)顯示，比如彈框組件等這樣的子組件，那么我們可以使用 v-if 來進(jìn)行按需渲染，沒必要一進(jìn)頁面就渲染所有模塊。比如：

<template> <div @click="showModuleB = true"></div> <module-b v-if="isShowModuleB"></module-b></template><script>import moduleB from 'components/moduleB'export default { data() {  return {   isShowModuleB: false  }  }, components: {  moduleB }}</script>

這樣當(dāng) isShowModuleB 為 false 的時(shí)候便不會(huì)加載該模塊下的代碼，包括一些耗時(shí)的接口調(diào)用。當(dāng)然 v-if 主要適用于代碼量較多、用戶點(diǎn)擊不是很頻繁的模塊的顯示隱藏，同時(shí)如果涉及到權(quán)限問題的代碼都需要使用 v-if，而不是 v-show。

5. 路由跳轉(zhuǎn)盡量使用 name 而不是 path

我們前期配置的路由路徑后期難免會(huì)進(jìn)行修改，如果我們頁面跳轉(zhuǎn)的地方全是使用的 path，那么我們需要修改所有涉及該 path 的頁面，這樣不利于項(xiàng)目的維護(hù)。而相對(duì)于 path，name 使用起來就方便多了，因?yàn)槠渚哂形ㄒ恍裕词刮覀冃薷牧?path，還可以使用原來的 name 值進(jìn)行跳轉(zhuǎn)。

this.$router.push({  name: 'page1'});// 而不是this.$router.push({  path: 'page1'});

6. 使用 key 來優(yōu)化 v-for 循環(huán)

v-for 是 Vue 提供的基于源數(shù)據(jù)多次渲染元素或模板塊的指令。正因?yàn)槭菙?shù)據(jù)驅(qū)動(dòng)，所以在修改列表數(shù)據(jù)的時(shí)候，Vue 內(nèi)部會(huì)根據(jù) key 值去判斷某個(gè)值是否被修改，其會(huì)重新渲染修改后的值，否則復(fù)用之前的元素。

這里如果數(shù)據(jù)中存在唯一表示 id，則推薦使用 id 作為 key，如果沒有則可以使用數(shù)組的下標(biāo) index 作為 key。因?yàn)槿绻跀?shù)組中間插入值，其之后的 index 會(huì)發(fā)生改變，即使數(shù)據(jù)沒變 Vue 也會(huì)進(jìn)行重新渲染，所以最好的辦法是使用數(shù)組中不會(huì)變化且唯一的那一項(xiàng)作為 key 值。例如：

<template> <ul>  <li v-for="(item, index) in arr" :key="item.id">{{ item.data }}</li> </ul></template><script>export default { data() {  return {   arr: [    {     id: 1,     data: 'a'    },    {     id: 2,     data: 'b'    },    {     id: 3,     data: 'c'    }   ]  } }}</script>

7. 使用 computed 代替 watch

很多時(shí)候頁面會(huì)出現(xiàn) watch 的濫用而導(dǎo)致一系列問題的產(chǎn)生，而通常更好的辦法是使用 computed 屬性，首先需要區(qū)別它們有什么區(qū)別：

watch：當(dāng)監(jiān)測(cè)的屬性變化時(shí)會(huì)自動(dòng)執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)
computed：計(jì)算的屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值

其實(shí)它們?cè)诠δ苌线€是有所區(qū)別的，但是有時(shí)候可以實(shí)現(xiàn)同樣的效果，而 computed 會(huì)更勝一籌，比如：

<template> <div>  <input type="text" v-model="firstName">  <input type="text" v-model="lastName">  <span>{{ fullName }}</span>  <span>{{ fullName2 }}</span> </div></template><script>export default { data() {  reurn {   firstName: '',   lastName: '',   fullName2: ''  } },  // 使用 computed computed: {  fullName() {   return this.firstName + ' ' + this.lastName  } },  // 使用 watch watch: {  firstName: function(newVal, oldVal) {   this.fullName2 = newVal + ' ' + this.lastName;  },  lastName: function(newVal, oldVal) {   this.fullName2 = this.firstName + ' ' + newVal;  }, }}</script>

上方我們通過對(duì)比可以看到，在處理多數(shù)據(jù)聯(lián)動(dòng)的情況下，使用 computed 會(huì)更加合理一點(diǎn)。

computed 監(jiān)測(cè)的是依賴值，依賴值不變的情況下其會(huì)直接讀取緩存進(jìn)行復(fù)用，變化的情況下才會(huì)重新計(jì)算；而 watch 監(jiān)測(cè)的是屬性值，只要屬性值發(fā)生變化，其都會(huì)觸發(fā)執(zhí)行回調(diào)函數(shù)來執(zhí)行一系列操作。

8. 統(tǒng)一管理緩存變量

在項(xiàng)目中或多或少會(huì)使用瀏覽器緩存，比如 sessionStorage 和 localStorage，當(dāng)一個(gè)項(xiàng)目中存在很多這樣的緩存存取情況的時(shí)候就會(huì)變得難以維護(hù)和管理，因?yàn)槠渚拖袢肿兞恳粯由⒙湓陧?xiàng)目的各個(gè)地方，這時(shí)候我們應(yīng)該將這些變量統(tǒng)一管理起來，放到一個(gè)或多個(gè)文件中去，比如：

/* types.js */export const USER_NAME = 'userName';export const TOKEN = 'token';

在需要存取的時(shí)候，直接引用：

import { USER_NAME, TOKEN } from '../types.js'sessionStorage[USER_NAME] = '張三';localStorage[TOKEN] = 'xxx';

使用這種方法的好處在于一旦我們需要修改變量名，直接修改管理文件中的值即可，無需修改使用它的頁面，同時(shí)這也可以避免命名沖突等問題的出現(xiàn)，這類似于 vuex 中 mutations 變量的管理。

9. 使用 setTimeout 代替 setInterval

一般情況下我們?cè)陧?xiàng)目里不建議使用 setInterval，因?yàn)槠鋾?huì)存在代碼的執(zhí)行間隔比預(yù)期小以及 “丟幀” 的現(xiàn)象，原因在于其本身的實(shí)現(xiàn)邏輯。很多人會(huì)認(rèn)為 setInterval 中第二個(gè)時(shí)間參數(shù)的作用是經(jīng)過該毫秒數(shù)執(zhí)行回調(diào)方法，其實(shí)不然，其真正的作用是經(jīng)過該毫秒數(shù)將回調(diào)方法放置到隊(duì)列中去，但是如果隊(duì)列中存在正在執(zhí)行的方法，其會(huì)等待之前的方法完畢再執(zhí)行，如果存在還未執(zhí)行的代碼實(shí)例，其不會(huì)插入到隊(duì)列中去，也就產(chǎn)生了 “丟幀”。

而 setTimeout 并不會(huì)出現(xiàn)這樣的現(xiàn)象，因?yàn)槊恳淮握{(diào)用都會(huì)產(chǎn)生了一個(gè)新定時(shí)器，同時(shí)在前一個(gè)定時(shí)器代碼執(zhí)行完之前，不會(huì)向隊(duì)列插入新的定時(shí)器代碼。

// 該定時(shí)器實(shí)際會(huì)在 3s 后立即觸發(fā)下一次回調(diào)setInterval(() => { // 執(zhí)行完這里的代碼需要 2s}, 1000);// 使用 setTimeout 改寫，4秒后觸發(fā)下一次回調(diào)let doSometing = () => { // 執(zhí)行完這里的代碼需要 2s  setTimeout(doSometing, 1000);}doSometing();

延伸閱讀：對(duì)于“不用setInterval，用setTimeout”的理解

10. 不要使用 for in 循環(huán)來遍歷數(shù)組

大家應(yīng)該都知道 for in 循環(huán)是用于遍歷對(duì)象的，但它可以用來遍歷數(shù)組嗎？答案是可以的，因?yàn)閿?shù)組在某種意義上也是對(duì)象，但是如果用其遍歷數(shù)組會(huì)存在一些隱患：其會(huì)遍歷數(shù)組原型鏈上的屬性。

let arr = [1, 2];for (let key in arr) { console.log(arr[key]); // 會(huì)正常打印 1, 2}// 但是如果在 Array 原型鏈上添加一個(gè)方法Array.prototype.test = function() {};for (let key in arr) { console.log(arr[key]); // 此時(shí)會(huì)打印 1, 2, ƒ () {}}

因?yàn)槲覀儾荒鼙ＷC項(xiàng)目代碼中不會(huì)對(duì)數(shù)組原型鏈進(jìn)行操作，也不能保證引入的第三方庫(kù)不對(duì)其進(jìn)行操作，所以不要使用 for in 循環(huán)來遍歷數(shù)組。

結(jié)語

本文羅列了 10 個(gè)項(xiàng)目開發(fā)中常見的編碼技巧與規(guī)范，其實(shí)技巧和規(guī)范之間本身就是相輔相成的，所以沒有分別進(jìn)行羅列。當(dāng)然實(shí)際的項(xiàng)目開發(fā)中存在著很多這樣的例子需要大家自己去歸納和整理，比如使用 name 來命名你的組件等。如果你有不錯(cuò)的點(diǎn)子，也可以分享在下方的評(píng)論區(qū)域中供大家學(xué)習(xí)。

拓展閱讀：前端各類規(guī)范集合

思考 & 作業(yè)