當我們完成項目的構建，進入開發階段的時候，除了你需要了解框架本身的知識點外，我們還需要提前掌握一些項目的編碼技巧與規范，在根源上解決之后因編碼缺陷而導致的項目維護困難、性能下降等常見問題，為項目多人開發提供編碼的一致性。

本文將羅列項目中常用的一些編碼技巧與規范來幫助大家提升代碼質量，并會結合代碼片段加強大家的理解與認知。當然不是所有實例都是針對 Vue.js 開發的，有些同樣也適用于其他前端項目。

實例

1. 使用對象代替 if 及 switch

在很多情況下，我們經常會遇到循環判斷執行賦值操作的場景，一般我們都會使用 if 及 switch 的條件判斷，如果符合則執行賦值，不符合則進入下個判斷，比如：

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}

這樣的寫法不僅冗余，而且代碼執行效率不高，我們可以使用對象的形式簡寫：

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

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

2. 使用 Array.from 快速生成數組

一般我們生成一個有規律的數組會使用循環插入的方法，比如使用時間選擇插件時，我們可能需要將小時數存放在數組中：

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

如果使用 Array.from 我們可以簡寫為：

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

3. 使用 router.beforeEach 來處理跳轉前邏輯

在某些情況下，我們需要在路由跳轉前處理一些特定的業務邏輯，比如修改路由跳轉、設置 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; // 設置頁面 title }  if (to.name === 'home') {   // 攔截并跳轉至 page2 單頁，$openRouter 方法在第 5 節中封裝  Vue.$openRouter({   name: 'page2'  }); }  next();})export default router