中小型项目前端架构.docx

中小型工程前端架构
一、为什么要有一个好的架构
首先明确一点， 架构是为需求效劳的。前端架构存在的目的，就我个人理解来说，有以下几点：
.提高代码的可读性
一个好的架构，代码的可读性一定是很强的。
简单来说，假设有一个新人参加团队瑞小年 . 修劫景田=
害胃酊 I国际化资源 IQ二
功能划分好之后，一样功能的放在同一个文件夹下，命名风格应该类似。
具体来说，组件树相关的东西，，放置在components文件夹下；资源，有图片或者国际化资
源等，，放置在resources文件夹下；而功能插件、效劳等，因为可能被多处引用，因 此为了方便引用，放在src文件夹下，并且该文件夹是components文件夹和resources文件夹的上级文件夹。
第四，细化功能模块: 功能、组件树以及资源，我们已经明确了有哪些东西，那么接下来，我们要明确这些东西该如何以文件的形式 来划分。
如下列图:
.工程构建相关
? ,也要使用es6语法，因此babel是必须的;
? 最后因为要方便多人协同, 来安装依赖，也是必须的。
? 又因为要自动化混淆打包，因此webpack也是必须的；
，方便不同人可以快速自动化通过npm install
. CDN相关
CDN加速是必须的，该字体文件放在 html
而又因为我们要采用外部字体〔需求要求引入非常见字体〕，因此 中来配置引用即可。
.配置和插件
? 我们需要直接引入一些插件和配置文件；
? 为了使用vue,我们需要一个根组件，那么就是
? 使用vue-router,我们需要配置路由文件，因此
? 然后我们还需要以插件形式引入一些功能和效劳, 根据需要封装好的低耦合高聚方法；
；
router-；
因此有了 Plugin-开头的假设干个 vue插件，这些都是
.需要的npm依赖
当然，要使用 ,类似的还有 vue- polyfill和全局插件
.抽离出的功能模块
?除了直接引用的这些插件，我们还有一些和工程高度耦合的功能效劳，我认为不能作为插件，但依然需
要抽离出来封装好，方便使用和修改；
? ,所有的ajax请求都放置其中，只对外暴露接口，方便管理和使用；
? §他需要引入国际化资源和管理国际化资源的加载；
? 又例如实现跨组件通信的event-；
?
总结：而这些划分，都表达在上图之中。这就是 src目录下的功能模块文件，我们需要的绝大多数功能都可以包
括在其中，我们只需要按照实际开发中的需要，将对应的功能写入在这些文件中并引用即可。
第五，组件树:
之前谈了功能模块的划分，接下来是组件树。
因为是中小型页面，因此组件树的层级无需太深，但该抽离出来的依然还是要抽离，尽量保证抽离出来的组件 解耦以及一个页面组件的逻辑不要太多。如下列图：


所有组件最终往上找，,根组件只负责管理他的直接子组件。
每个组件都只负责管理自己的直接子组件，不跨级管理，并且不依赖于自己的子组件〔否那么可能因为子组件 的未加载或错误而导致父组件错误〕，做到解耦和聚。
.弹窗dialog和弹窗tips
因为弹窗dialog和弹窗提示tips可能同时存在，因此将其划分为2个组件，方便管理。
.未登录页面和登录页面
因为页面存在登录和未登录状态，而为了加载速度考虑，当未登录时，不加载已登录页面，因此需要划分出来, 并进展异步加载处理。
.未登录页面
未登录页面又分为三种情况:
? 初始页面：毫无疑问要直接加载
? 登录弹窗：点击登录时加载〔异步〕
? 注册弹窗：点击注册时加载〔异步〕
之所以分拆开，是因为根据需求，已登录用户刷新页面，可以直接进入登录后页面，因此无需登录和注册，这 种处理可以减少流量消耗，提升加载页面加载速度〔特别是注册弹窗需要加载的容还比拟多〕。
.已登录页面
已登录页面有较多页面，采用默认加载初始页，然后异步加载其他页面〔访问时〕
.弹窗 dialog
由于逻辑较少，代码量不多，因此为了方便管理，统一将其合并在一个vue文件中，共同一样的翻开逻辑，根
据传递的key决定翻开哪一个。这样在新增弹窗时，无需再去写弹窗的翻开、关闭逻辑。
假设有较复杂的弹窗，可以以子组件的形式