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

文成網站建設公司創(chuàng)新互聯建站,文成網站設計制作，有大型網站制作公司豐富經驗。已為文成近1000家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿營銷網站建設要多少錢，請找那個售后服務好的文成做網站的公司定做！

代碼結構設計

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

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

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

components

存放著vue的組件代碼

base

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

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

photoswipe.vue

資訊里面的圖片瀏覽組件、在app內會調用客戶端的瀏覽器組件能力、端外使用第三方組件庫photoSwipe的來實現點擊瀏覽大圖。

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

detailBusiness

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

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

i18n

語言包

sass

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

utils

一些公用的函數被抽成單獨的文件放在這里

allCommentsMain.js

評論列表頁面主js

commentDetailMain.js

評論詳情頁面主js

eventBus.js --

使用eventBus來實現頁面的通信

i18n.js

使用vue-i18n來實現頁面的多語言

Main.js

資訊詳情頁面主js

mixin.js

混入

shareInfoSettingMain.js

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

組件間通信

因為將頁面按照功能拆分成了很多小的模塊，在不同的模塊之間的通信就需要想方法實現，這些模塊之間大多是一種兄弟組件的關系。

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

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

事件總線

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

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

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

網頁名稱：使用vue重構資訊頁面的實例代碼解析-創(chuàng)新互聯
文章URL：http://jinyejixie.com/article20/dseojo.html

成都網站建設公司_創(chuàng)新互聯，為您提供建站公司、外貿網站建設、網站建設、網站策劃、網站營銷、搜索引擎優(yōu)化

廣告

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