使用vue重構(gòu)資訊頁面的實(shí)例代碼解析

從我接手到將這個頁面代碼重構(gòu)前，一直都還是使用angular1的代碼去做的，需求來了也是用angular去實(shí)現(xiàn)；作為一個憧憬新技術(shù)的前端，怎么忍受得了現(xiàn)在還在使用這么有歷史感的框架，所以，以前就一直在醞釀著如何將angular重構(gòu)成vue。

代碼結(jié)構(gòu)設(shè)計(jì)

這個資訊項(xiàng)目代碼整體都是使用angular.js來去實(shí)現(xiàn)的，而此次想重構(gòu)的資訊詳情頁面只是其中的一個頁面，所以新建了一個文件夾 /newApp 、作為以后新技術(shù)的文件夾，以后使用vue技術(shù)的都放在這個文件夾下，區(qū)別于原先文件夾 /app 。

在舊的angular1的js文件中，由于頁面功能豐富，所有的功能代碼全都擠在了同一個js中，這就導(dǎo)致主要的js一共有1500+行的代碼。每次打開看到長長的一摞代碼、還要在里面找到對應(yīng)的功能代碼，就不禁吐槽其中的不合理。。

所以這次重構(gòu)，我按照頁面中的每個模塊、每個功能，來將頁面拆分成不同的.vue組件模塊，以后想要去維護(hù)、或者新增功能時(shí)，可以直接去對應(yīng)的模塊文件中修改或者是新增一個vue文件。

components

存放著vue的組件代碼

base

這個文件夾下，存放著一些可以被復(fù)用的組件

commentInput.vue -- 評論輸入框
commentList.vue -- 評論列表
replyBar.vue -- 固定懸浮于底部的評論條、提示用戶可以評論
report.vue -- 對評論進(jìn)行舉報(bào)會彈出的舉報(bào)信息框

photoswipe.vue

資訊里面的圖片瀏覽組件、在app內(nèi)會調(diào)用客戶端的瀏覽器組件能力、端外使用第三方組件庫photoSwipe的來實(shí)現(xiàn)點(diǎn)擊瀏覽大圖。

adImg.vue -- 廣告展示模塊
audioBar.vue -- 語音播放功能模塊
bannerTop.vue -- 站外顯示的頂部拉新banner模塊
comments.vue -- 評論列表功能模塊
fontconfig.vue -- 設(shè)置字體大小功能模塊
footBar.vue -- 展示點(diǎn)贊人數(shù)和瀏覽人數(shù)模塊
hotRecommend.vue -- 熱點(diǎn)推薦模塊
mask.vue -- 頁面蒙版
relatedStock.vue -- 相關(guān)個股模塊
relatedTopic.vue -- 關(guān)聯(lián)專題模塊
shareBar.vue -- 文末快速分享模塊

detailBusiness

在這個文件夾下放著一些資訊的業(yè)務(wù)js

detailSensor.js -- 引入神策統(tǒng)計(jì)的sdk
drawTimeline.js -- 畫出股票的行情線圖

i18n

語言包

sass

資訊頁面用到的sass文件、不過由于node-sass的安裝有點(diǎn)麻煩（在技術(shù)選型時(shí)未考慮此情況），后面可能會重構(gòu)成使用less來做css的預(yù)處理器。

utils

一些公用的函數(shù)被抽成單獨(dú)的文件放在這里

allCommentsMain.js

評論列表頁面主js

commentDetailMain.js

評論詳情頁面主js

eventBus.js --

使用eventBus來實(shí)現(xiàn)頁面的通信

i18n.js

使用vue-i18n來實(shí)現(xiàn)頁面的多語言

Main.js

資訊詳情頁面主js

mixin.js

混入

shareInfoSettingMain.js

將分享的邏輯單獨(dú)抽取成一個js。這里單獨(dú)抽成一個js是因?yàn)?，在安卓的webview加載h6時(shí)，會等js文件執(zhí)行完畢之后才渲染出頁面（即用戶看到東西），所以頁面的主js是進(jìn)行了延遲加載的，但是分享這一邏輯是希望還是能提前加載，所以單獨(dú)將這一功能抽取成一個js，讓頁面按照順序正常去加載。

組件間通信

因?yàn)閷㈨撁姘凑展δ懿鸱殖闪撕芏嘈〉哪K，在不同的模塊之間的通信就需要想方法實(shí)現(xiàn)，這些模塊之間大多是一種兄弟組件的關(guān)系。

我們首先能想到的vue中父子組件的通信功能的實(shí)現(xiàn)，但是父子組件的場景不適合現(xiàn)在的多個兄弟組件之間的通信，或者說實(shí)現(xiàn)起來很啰嗦。

所以考慮另外兩種方法實(shí)現(xiàn)：eventBus和vuex?？紤]到資訊詳情頁只有一個單頁面，引入vuex的話可能會太重了，使代碼體積增加不少，因而使用了EventBus事件總線這一方法來實(shí)現(xiàn)。

事件總線

在Vue中可以使用 EventBus來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊發(fā)送事件或接收事件，所有組件都可以上下平行地通知其他組件。

具體做法是在eventBus.js這個文件中創(chuàng)建一個vue對象，并且將其export出去。其實(shí)就是創(chuàng)建一個vue對象作為eventBus，使用它的 $on 和 $emit 來實(shí)現(xiàn)。這種設(shè)計(jì)模式是發(fā)布/訂閱模式，即 pub/sub 。

//eventBus.js
import vue from 'Vue';
export default new Vue();

在想要通信的組件中使用 $on 和 $emit 方法。

例如，資訊詳情頁面有一個接口是去請求幾個數(shù)據(jù)：廣告、相關(guān)個股等。這個接口其實(shí)在頁面中只需要在初始化時(shí)去請求一次，然后將數(shù)據(jù)保存下來就好。

所以在Main.js中負(fù)責(zé)去請求這個接口，然后請求回來了，發(fā)布一個 dataReady 的事件，將數(shù)據(jù)也帶出去。而在其他的、需要用到這個初始化數(shù)據(jù)的組件就去訂閱這個事件，拿到初始化的數(shù)據(jù)后，就將其render到頁面中。

// Main.js

_initData() {
 // ****
 
 //使用eventBus廣播這個事件，多個子組件中用到了初始化數(shù)據(jù)
 EventBus.$emit('dataReady', data);
}

//adImg.vue 廣告模塊
mounted() {
 EventBus.$on('dataReady', data => {
  // *****
 })
}

//relatedStock.vue 相關(guān)個股模塊
mounted() {
 Event.$on('dataReady', data => {
  // ****
 })
}

在這里其實(shí)有個小優(yōu)化，可以將直接在Vue的原型上添加一個vue對象實(shí)例作為全局的消息總線，就不用每次都去import 一次eventBus.js。

//Main.js
Vue.prototype.$bus = new Vue();
//使用時(shí)：
this.$bus.$on('', () => {});

在使用eventbus完成項(xiàng)目之后發(fā)現(xiàn)，事件總線這一個機(jī)制確實(shí)很方便，不同的組件之間可以隨意通信，但是由此很容易造成難以管理的災(zāi)難。比如，在某個模塊中訂閱了某個事件，這個事件是從哪里發(fā)布的、什么時(shí)候發(fā)布的，在代碼中似乎有點(diǎn)難以搜索發(fā)布的時(shí)機(jī)。

其他特性

資訊詳情頁面中實(shí)現(xiàn)了其他的一些功能，比如多皮膚、多語言這些特性。

多皮膚

多皮膚，使用了css的預(yù)處理器sass來實(shí)現(xiàn)，用到了sass的變量、混入指令等特性。

首先讓視覺給一個不同皮膚下的色彩對照表，然后將其寫入sass文件中，用變量來保存對應(yīng)的顏色值。根據(jù)外部的class來使用對應(yīng)的顏色變量。

面的class則是由后端在渲染html時(shí)，將對應(yīng)的皮膚class添加在最外層的div中，在.vue組件中加入對應(yīng)的class樣式，就能做到隨膚、且不閃屏。

不過我一開始在重構(gòu)時(shí)的想法并不是通過三組對皮膚的變量來實(shí)現(xiàn)，我一開始的想法是在sass里面，就能拿到對應(yīng)的皮膚的值，從而在使用時(shí)都是只需要知道是要哪個層級的顏色值就可以，而不需要在外部的sass代碼里分別寫三種。

但是問題在于， 無法將js能拿到的皮膚信息傳入sass中 ，這個想了很久也沒想到解決方案。如果能在sass中就可以拿到皮膚信息，從而直接賦予元素對應(yīng)的皮膚值，這樣就很方便了。所以這里對sass、less這些語言的局限性也深有感觸，它們終究只是一個“預(yù)處理器”而已。

多語言

多語言特性，使用了vue-i18n這個插件來實(shí)現(xiàn)。

可改進(jìn)的地方

整合資訊詳情頁面

其實(shí)現(xiàn)在包括資訊詳情說是只有一個頁面，但由于它具有的評論功能，是可以聚合成一個spa的，包括資訊詳情頁面(Main.js)、資訊評論列表頁面(commentDetailMain.js)、評論詳情頁面(allCommentsMain.js)。這三個頁面用到的技術(shù)棧在重構(gòu)之后非常相似，甚至將公共的組件都已經(jīng)抽取出來了。但是我在重構(gòu)時(shí)還是把它們?nèi)齻€當(dāng)成不同的頁面拆開了，這一點(diǎn)有待改進(jìn)。

目前是通過mixin這一特性，將三個頁面公共的一些東西抽取在其中，分別在三個頁面的js中引入這個mixin，可以避免一些重復(fù)的東西。

//mixin.js
// 資訊詳情頁、資訊評論列表頁、資訊評論詳情頁公用的一些東西

import i18n from './i18n';
import ReplyBar from '**/replyBar.vue';
import BannerTop from '**/bannerTop.vue';
import CommentInput from '**/commentInput.vue';

let mixin = {
 i18n,
 components: {
  ReplyBar, //底部懸浮框
  BannerTop, //頂部的banner條
  CommentInput //評論輸入框
 }
}

export default mixin;

---- 后來又想了下，由于當(dāng)前模式還是使用php渲染html的方式，所以沒法做成SPA這樣子，只能等待加上了node的ssr之后才能實(shí)現(xiàn)= =。

使用less代替sass

由于node-sass的安裝有時(shí)會出現(xiàn)一些問題，所以還是使用less作為替代比較穩(wěn)妥..

總結(jié)

以上所述是小編給大家介紹的使用vue重構(gòu)資訊頁面的實(shí)例代碼解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！