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

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

為銅川等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及銅川網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、銅川網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

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

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

components

存放著vue的組件代碼

base

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

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

photoswipe.vue

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

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

detailBusiness

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

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

i18n

語(yǔ)言包

sass

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

utils

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

allCommentsMain.js

評(píng)論列表頁(yè)面主js

commentDetailMain.js

評(píng)論詳情頁(yè)面主js

eventBus.js --

使用eventBus來(lái)實(shí)現(xiàn)頁(yè)面的通信

i18n.js

使用vue-i18n來(lái)實(shí)現(xiàn)頁(yè)面的多語(yǔ)言

Main.js

資訊詳情頁(yè)面主js

mixin.js

混入

shareInfoSettingMain.js

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

組件間通信

因?yàn)閷㈨?yè)面按照功能拆分成了很多小的模塊，在不同的模塊之間的通信就需要想方法實(shí)現(xiàn)，這些模塊之間大多是一種兄弟組件的關(guān)系。

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

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

事件總線

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

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

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

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

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

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

// Main.js

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

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

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

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

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

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

其他特性

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

多皮膚

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

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

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

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

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

多語(yǔ)言

多語(yǔ)言特性，使用了vue-i18n這個(gè)插件來(lái)實(shí)現(xiàn)。

可改進(jìn)的地方

整合資訊詳情頁(yè)面

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

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

//mixin.js
// 資訊詳情頁(yè)、資訊評(píng)論列表頁(yè)、資訊評(píng)論詳情頁(yè)公用的一些東西

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 //評(píng)論輸入框
 }
}

export default mixin;

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

使用less代替sass

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

總結(jié)

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

分享題目：使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析
網(wǎng)站路徑：http://bm7419.com/article24/pcdpce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、定制網(wǎng)站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、企業(yè)建站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)