Vue 開發(fā)過程的探索與實(shí)踐

作者：凹凸實(shí)驗(yàn)室 2017-09-08 17:25:18

本文主要講了實(shí)際業(yè)務(wù)在結(jié)合 vue 開發(fā)的過程中的探索與實(shí)踐。

[[202859]]

本文主要講了實(shí)際業(yè)務(wù)在結(jié)合 vue 開發(fā)的過程中的探索與實(shí)踐。

業(yè)務(wù)介紹

基于目標(biāo)用戶的孩子畫像，打通、聚合京東現(xiàn)有體系關(guān)聯(lián)資源，建立共生關(guān)系的開放式生態(tài)平臺(tái)，涵蓋滿足家庭陪伴孩子成長(zhǎng)過程中的多維度需求。覆蓋場(chǎng)景場(chǎng)景導(dǎo)購、精準(zhǔn)推薦、專屬權(quán)益等，為京東有孩家庭購物提供優(yōu)質(zhì)優(yōu)購體驗(yàn)。在項(xiàng)目開發(fā)中我們遇到的問題主要有以下三個(gè)：

接口眾多：近90個(gè)數(shù)據(jù)接口，數(shù)據(jù)字段不規(guī)范、不統(tǒng)一、難理解，接口開發(fā)經(jīng)常延期且頻繁變更;
交互復(fù)雜：各種交互及狀態(tài)，且一態(tài)多用，給用戶展示的是多狀態(tài)共同作用的結(jié)果，用戶操作異步更新頁面;
快速上線：同時(shí)規(guī)劃多版本，多版本并行開發(fā)。

技術(shù)選型

技術(shù)選型要對(duì)癥下藥，為了統(tǒng)一管理接口和數(shù)據(jù)，所采用的框架要有統(tǒng)一的數(shù)據(jù)中心，能做到視圖與邏輯的分離，用數(shù)據(jù)來驅(qū)動(dòng)視圖，項(xiàng)目可以工程化來應(yīng)對(duì)快速上線，以及利于后期維護(hù)。從學(xué)習(xí)成本來說，Vue 更容易上手，更輕量，結(jié)合 Vuex 管理狀態(tài)，視圖邏輯和數(shù)據(jù)的耦合度低，項(xiàng)目結(jié)構(gòu)清晰明了，Vue 的可擴(kuò)展性也非常好。Vue 核心技術(shù)主要有以下幾點(diǎn)：

聲明式渲染：通過簡(jiǎn)潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM，DOM 狀態(tài)是數(shù)據(jù)狀態(tài)的一個(gè)映射。
組件系統(tǒng)：跟大多數(shù)前端框架一樣，都是把 UI 結(jié)構(gòu)拆解成小的、可復(fù)用的組件樹，然后像零件一樣組裝它們，Vue 還有比較獨(dú)特的地方，那就是單文件組件，把歸屬于同一組件的模板、腳本、樣式放在一個(gè)文件中，你不必再同時(shí)維護(hù)一個(gè)組件的多個(gè)文件，這樣是不是很酷。
客戶端路由：結(jié)合 vue-router，Vue 就可以實(shí)現(xiàn)一個(gè) SPA 應(yīng)用了，主要通過 hash 值來控制路由，路由又可以傳遞狀態(tài)參數(shù)給組件。
狀態(tài)管理：Vue 的基本狀態(tài)觸發(fā)過程是，用戶行為使得 state 發(fā)生變化，state 的變化又觸發(fā)視圖的更新。而結(jié)合 Vuex 則可以管理全局的數(shù)據(jù)。

項(xiàng)目詳解

項(xiàng)目結(jié)構(gòu)

項(xiàng)目開發(fā)

下面將分為以下幾方面來闡述：開發(fā)輔助、路由、組件化、mixins、常量管理、數(shù)據(jù)中心、環(huán)境兼容、滾動(dòng)行為。

開發(fā)依賴

項(xiàng)目采用 Webpack，并結(jié)合了 ESLint 和 Babel 等來進(jìn)行開發(fā)和編譯打包，Webpack 的基本配置不詳講，在基本配置的基礎(chǔ)上，再分了開發(fā)環(huán)境的生產(chǎn)環(huán)境的配置：

// Dev 的配置 
module.exports = merge(base, { 
  plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
    }), 
    new HtmlWebpackPlugin({ 
      filename: 'index.html', 
      template: '../index.html' 
    }) 
  ] 
}) 
// Prod 的配置 
module.exports = merge.smart(base, { 
  module: { 
    loaders: [ 
      { 
        test: /\.s[a|c]ss$/, 
        loader: ExtractTextPlugin.extract({ 
          fallbackLoader: "style-loader", 
          loader: 'css!sass' 
        }) 
      } 
    ] 
  }, 
  plugins: [ 
    new ExtractTextPlugin('style.css'), 
    new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production') 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      filename: 'vendor.js' 
    }), 
    new webpack.LoaderOptionsPlugin(loadersConf), 
    new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
        warnings: false 
      } 
    }) 
  ] 
})

開發(fā)環(huán)境中，用 express 和 webpack-dev-middleware 來搭建一個(gè) dev server：

const express = require('express') 
const webpackDevMiddleware = require('webpack-dev-middleware') 
const webpack = require('webpack') 
const conf = require('./webpack.dev.conf') 
const app = express() 
const port  = process.env.PORT || 8080 
conf.entry.app = ['webpack-hot-middleware/client', conf.entry.app] 
const compiler = webpack(conf) 
app.use(webpackDevMiddleware(compiler, { 
  publicPath: conf.output.publicPath, 
  stats: { 
    colors: true, 
    chunks: false 
  } 
})) 
app.use(require('webpack-hot-middleware')(compiler)) 
app.listen(port, () => { 
  console.log(`server started at localhost:${port}`) 
})

路由

一個(gè)路由子項(xiàng)如下：

{ 
  name: 'index', path: '/index', 
  meta: {title: '陪伴空間', pv: 50, profiles: true, visitor: true, verify () { return true }}, 
  components: {default: Index2, navbar: Navbar} 
}

其中，配置里的 meta 包含了該頁面(視圖)的配置信息：

title：頁面的標(biāo)題
pv：用作記錄頁面的 PV
profiles：用于判斷是否需要有孩子才能進(jìn)入這個(gè)頁面
visitor: 是否支持游客訪問
verify：如果支持游客訪問，可選的額外的放行校驗(yàn)

問題：在 ios 里，單頁面應(yīng)用切換視圖時(shí)頁面標(biāo)題不能更新

解決：切換路由時(shí)用 iframe 加載一個(gè)空頁面即可觸發(fā) title 更新，如下所示

const iframeLoad = (src) => { 
  let iframe = document.createElement('iframe') 
  iframe.style.display = 'none' 
  iframe.src = src 
  document.body.appendChild(iframe) 
  iframe.addEventListener('load', function() { 
    setTimeout(function() { 
      iframe.remove() 
    }, 0) 
  }) 
}

路由中還要處理比較多的事情，在 router.beforeEach 中處理傳進(jìn)頁面的參數(shù)，請(qǐng)求登陸狀態(tài)和檔案數(shù)據(jù)等基本接口，上報(bào) PV，在 router.afterEach 中處理比較次要的事情。

組件化

接下來講的是項(xiàng)目中的單文件組件。下面是一段特別編輯過的單文件組件代碼：

<template> 
<div v-show="isShow" class="test"> 
  <!-- slot 的運(yùn)用 --> 
  <slot></slot> 
  <slot name="slot2"></slot> 
  <template v-if="testProp"></template> 
  <template v-else></template> 
  <!-- 對(duì)于嵌套較深的組件，可以用 function-type-prop 來代替 emit 觸發(fā)鏈 --> 
  <div @click="changeNickname && changeNickname('小鎮(zhèn)')"></div> 
  <div @click="close" class="test_btn">{{btnText}}</div> 
</div> 
</template> 
<script> 
import Utils from '@/utils' 
export default { 
  props: { 
    testProp: { 
      type: [Number, String], 
      required: true 
    }, 
    changeNickname: Function 
  }, 
  data () { 
    return { 
      isShow: false, 
      btnText: '', 
      closeFn: null 
    } 
  }, 
  methods: { 
    close () { 
      this.isShow = false 
      this.closeFn && this.closeFn() 
    }, 
    // 除了 poops 傳參，函數(shù)傳參也是一種方式 
    open (btnText = '', closeFn) { 
      this.isShow = true 
      this.btnText = btnText 
      this.closeFn = closeFn 
    } 
  } 
} 
</script> 
<style lang="sass"> 
@import "common"; 
.test { 
  background-image: url(~@img/test/bg.png); 
} 
</style>

slot 對(duì)于可復(fù)用組件來說意義重大，因?yàn)槲覀冊(cè)趯?shí)際的應(yīng)用中，組件往往大同小異，看起來可以做成組件的模塊總會(huì)或多或少差異的地方，通過參數(shù)來控制這些差異也是可行的，但非常不利于組件的擴(kuò)展，所以這些地方就交給 slot 來應(yīng)對(duì)，slot 的意思是插槽，意指我們能在父組件中需要的時(shí)候，給組件填充自定義內(nèi)容。

父組件通過 props 給子組件傳值，或者，父組件還可以通過子組件實(shí)例的方法來給子組件傳參(如代碼中的 open 方法)。

子組件可以通過 emit 觸發(fā)事件來向上通信，或者，通過直接調(diào)用作為 prop 傳進(jìn)來的父組件方法也可以實(shí)現(xiàn)向上通信(如代碼中的 changeNickname)。

mixins

通常來說，不建議使用全局的 mixin，但總會(huì)有特殊需要，比如在本項(xiàng)目中，由于埋點(diǎn)和其他需要，幾乎每個(gè)組件都要用到幾個(gè)公用的全局?jǐn)?shù)據(jù)，所以放到全局的 mixin 是***不過的了 Vue.mixin(mixins)。使用全局的 mixin 要注意的是，不要把邏輯放到 mixin 里，因?yàn)槊總€(gè)組件都會(huì)執(zhí)行一遍 mixin 的內(nèi)容，組件一多就非?？膳铝恕?/p>

常量管理

為了以后能更好地維護(hù)代碼，需要對(duì)常量作歸集管理，這里的常量主要是鏈接和數(shù)據(jù)的字段等。

// 鏈接常量的統(tǒng)一管理 
export const REBUY_LIST = `${NIGHT}/re_purchase_detail` 
export const REBUY_SWITCH = `${NIGHT}/re_purchase_switch_good` 
export const REBUY_REMIND = `${NIGHT}/re_purchase_remind` 
// ...

// 數(shù)據(jù)字段的統(tǒng)一管理 
export const ID = 'id' 
export const SKU = 'sku' 
export const LINK = 'link' 
export const NAME = 'name' 
export const IMAGE = 'image' 
export const JD_PRICE = 'jdPrice' 
export const PRICE = 'price' 
// ...

統(tǒng)一的常量管理也有利于規(guī)范統(tǒng)一，比如數(shù)據(jù)字段，接口給到的數(shù)據(jù)可能有字段不統(tǒng)一，或者不表意，或者臟數(shù)據(jù)多等問題，這就需要在獲取到后端數(shù)據(jù)后對(duì)其進(jìn)行“修剪”，規(guī)范的統(tǒng)一的字段名也有利于組件化。

數(shù)據(jù)中心

項(xiàng)目用了 vuex 來統(tǒng)一管理數(shù)據(jù)，在 view 組件中通過 vuex 提供的 mapActions 和 mapGetters 來求取數(shù)據(jù)，如下代碼所示。

computed: { 
  ...mapGetters({ 
    cate1st: 'cate1st', 
    cate2nd: 'cate2nd' 
  }) 
}, 
methods: { 
  ...mapActions([ 
    'getCate1st', 
    'getCate2nd' 
  ]) 
}

而在“數(shù)據(jù)中心”中，getters 從 state 中取值，調(diào)用 action 請(qǐng)求后端接口，主動(dòng)觸發(fā) mutation，在 mutation 里進(jìn)行數(shù)據(jù)的“修剪”，得到我們真正想要的數(shù)據(jù)。大致過程如下圖所示：

環(huán)境兼容

項(xiàng)目需要兼容多環(huán)境，包括購物車相關(guān)、商詳頁鏈接、優(yōu)惠券鏈接、搜索鏈接等因環(huán)境不同而不同的方法，為此得針對(duì)不同環(huán)境分別定義它們，再根據(jù) ua 進(jìn)行選擇：

// ... 
let configs = { 
  [uaTypes.APP]: App, 
  [uaTypes.WECHAT]: Wechat, 
  [uaTypes.QQ]: QQ, 
  [uaTypes.MOBILE]: Mobile 
} 
export default configs[UA.type]

滾動(dòng)行為

對(duì)于 SPA 應(yīng)用來說滾動(dòng)行為是個(gè)挺頭疼的問題，畢竟其本質(zhì)只是一個(gè)頁面，又是異步渲染的，所以難以保證各個(gè)視圖的滾動(dòng)行為能像多頁面應(yīng)用一樣。為此進(jìn)行了以下幾步的探索。

結(jié)合 vuex 來存儲(chǔ)滾動(dòng)

在 view 的 beforeDestory 時(shí)，主動(dòng)記錄該視圖的滾動(dòng)值，在下次 mounted 時(shí)延時(shí)滾動(dòng)到該位置。

這個(gè)方案需要為每個(gè)需要記錄滾動(dòng)的視圖添加 state、mutation 和 action，并在視圖添加額外的代碼，實(shí)際操作繁瑣，且跳外部鏈接后再返回時(shí)所記錄的值也已經(jīng)被銷毀。

使用瀏覽器存儲(chǔ)

為了解決跳外部鏈接后返回也能定位滾動(dòng)位置，使用 localStorage 來記錄滾動(dòng)值，而且使用了 mixin，這樣有需要操縱滾動(dòng)行為的視圖插入這個(gè) mixin 就可以了，不需要在視圖里加額外代碼。

但是問題來了，我們并不能區(qū)分當(dāng)次訪問是***次打開還是剛從外鏈返回，就導(dǎo)致了***次訪問也會(huì)被定位，就想到了 cookie，讓 cookie 保持 30min。顯然，這不是好的解決方案，再考慮到的是 sessionStorage，在當(dāng)前會(huì)話中它能一直保持?jǐn)?shù)據(jù)，跳外鏈返回后數(shù)據(jù)也還能保持著(此前以為跳外鏈后 sessionStorage 的數(shù)據(jù)也會(huì)被清除)，新標(biāo)簽打開視為新會(huì)話，互不共用數(shù)據(jù)，這幾點(diǎn)特性正好符合我們的要求。

另外要考慮的一個(gè)問題是，頁面是異步渲染的，我們并不知道它的接口什么時(shí)候都請(qǐng)求完了，于是除了有默認(rèn)的延時(shí)滾動(dòng)外，還添加了主動(dòng)觸發(fā)滾動(dòng)的特性，讓開發(fā)者考慮什么時(shí)候頁面才算加載完(通常是 watch 某個(gè)或多個(gè)異步請(qǐng)求的狀態(tài))，然后主動(dòng)去調(diào)用滾動(dòng)方法。

***要指出的是，滾動(dòng)行為的解決方案也并不是***的，比如，這個(gè)方案并不適用于有模塊懶加載的頁面。

最終 mixin 代碼如下：

/** 
 * 如需手動(dòng)觸發(fā)滾動(dòng)： 
 * manualTriggerLivescroll: true 
 * this._livescroll() 
 */ 
import Tools from '@/utils/tools' 
const ss = window.sessionStorage 
export default { 
  data () { 
    return { 
      routeName: this.$route.name, 
      liveScrollFlag: false, 
      liveScrollFn: null, 
      liveScrollTimer: null 
    } 
  }, 
  computed: { 
    liveScrollTop () { 
      return ss ?  
        ss.getItem(`view-${this.routeName}`) :  
        Tools.getCookie(`view-${this.routeName}`) 
    } 
  }, 
  methods: { 
    _livescroll () { 
      if (this.liveScrollFlag || !this.liveScrollTop) { 
        return 
      } 
      this.liveScrollFlag = true 
      // $nextTick 發(fā)揮不太穩(wěn)定 
      this.liveScrollTimer = window.setTimeout(() => { 
        document.body.scrollTop = document.documentElement.scrollTop = this.liveScrollTop 
      }, 500) 
    } 
  }, 
  mounted () { 
    document.body.scrollTop = document.documentElement.scrollTop = 0 
    !this.manualTriggerLivescroll && this._livescroll() 
    this.liveScrollFn = () => { 
      ss ?  
        ss.setItem(`view-${this.routeName}`, this.getScrollTop()) :  
        Tools.setCookie(`view-${this.routeName}`, this.getScrollTop(), 0.2083) 
    } 
    window.addEventListener('touchend', this.liveScrollFn, false) 
  }, 
  beforeDestroy () { 
    window.removeEventListener('touchend', this.liveScrollFn, false) 
    this.liveScrollTimer && window.clearTimeout(this.liveScrollTimer) 
  } 
}

其他

以下都是些瑣碎的小問題，也有在項(xiàng)目開發(fā)過程踩過的坑。

接口延遲

為了盡量減少請(qǐng)求到的數(shù)據(jù)為空出的情況，基于 vue 的請(qǐng)求方法上包了一層，對(duì)于超時(shí)的接口重新發(fā)起一次請(qǐng)求。

支持 rest spread

給 babel 加 "plugins": ["transform-object-rest-spread"] 以支持 rest spread 的寫法，或者直接用 babel-preset-env，同時(shí) eslint 的配置加上 "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true } }

如何切換 Webpack 的 publicPath 在開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置

一開始是手動(dòng)去更改，后來根據(jù)當(dāng)前環(huán)境自動(dòng)去選擇

const publicPath = { 
  development: '/', 
  labs: 'http://xx.xxx.xx/mtd/h5/accompany/3.0.0-alpha/', 
  production: '//xx.xxx.xx/mtd/h5/accompany/3.2.2/' 
}[env]

別名在 mixin 資源路徑的應(yīng)用

由于頁面的路徑跟 includePath 的路徑不一樣，比如有個(gè) @mixin iconAddcart { background: url(../addcart.png); }，在組件樣式里 include 它時(shí)會(huì)提示找不到圖片，這時(shí)如果改成帶別名的路徑 ~@img/addcart.png 就能很好解決這個(gè)問題。