使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析-創(chuàng)新互聯(lián)

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

文成網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,文成網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為文成近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的文成做網(wǎng)站的公司定做！

代碼結(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)論條、提示用戶(hù)可以評(píng)論
report.vue -- 對(duì)評(píng)論進(jìn)行舉報(bào)會(huì)彈出的舉報(bào)信息框

photoswipe.vue

資訊里面的圖片瀏覽組件、在app內(nèi)會(huì)調(diào)用客戶(hù)端的瀏覽器組件能力、端外使用第三方組件庫(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)專(zhuān)題模塊
shareBar.vue -- 文末快速分享模塊

detailBusiness

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

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

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è)面（即用戶(hù)看到東西），所以頁(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à)可能會(huì)太重了，使代碼體積增加不少，因而使用了EventBus事件總線(xiàn)這一方法來(lái)實(shí)現(xiàn)。

事件總線(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();

網(wǎng)頁(yè)名稱(chēng)：使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析-創(chuàng)新互聯(lián)
文章URL：http://bm7419.com/article20/dseojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站營(yíng)銷(xiāo)、搜索引擎優(yōu)化

廣告

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