使用vue重构资讯页面的实例代码解析-创新互联
从我接手到将这个页面代码重构前，一直都还是使用angular1的代码去做的，需求来了也是用angular去实现；作为一个憧憬新技术的前端，怎么忍受得了现在还在使用这么有历史感的框架，所以，以前就一直在酝酿着如何将angular重构成vue。
代码结构设计
这个资讯项目代码整体都是使用angular.js来去实现的，而此次想重构的资讯详情页面只是其中的一个页面，所以新建了一个文件夹 /newApp 、作为以后新技术的文件夹，以后使用vue技术的都放在这个文件夹下，区别于原先文件夹 /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
在这个文件夹下放着一些资讯的业务js
detailSensor.js -- 引入神策统计的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文件执行完毕之后才渲染出页面（即用户看到东西），所以页面的主js是进行了延迟加载的，但是分享这一逻辑是希望还是能提前加载，所以单独将这一功能抽取成一个js，让页面按照顺序正常去加载。
组件间通信
因为将页面按照功能拆分成了很多小的模块，在不同的模块之间的通信就需要想方法实现，这些模块之间大多是一种兄弟组件的关系。
我们首先能想到的vue中父子组件的通信功能的实现，但是父子组件的场景不适合现在的多个兄弟组件之间的通信，或者说实现起来很啰嗦。
所以考虑另外两种方法实现：eventBus和vuex。考虑到资讯详情页只有一个单页面，引入vuex的话可能会太重了，使代码体积增加不少，因而使用了EventBus事件总线这一方法来实现。
事件总线
在Vue中可以使用 EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所有组件都可以上下平行地通知其他组件。
具体做法是在eventBus.js这个文件中创建一个vue对象，并且将其export出去。其实就是创建一个vue对象作为eventBus，使用它的 $on 和 $emit 来实现。这种设计模式是发布/订阅模式，即 pub/sub 。
//eventBus.js import vue from 'Vue'; export default new Vue();
当前标题：使用vue重构资讯页面的实例代码解析-创新互联
地址分享：http://azwzsj.com/article/dseojo.html
