文档介绍：. .
. 时，不会影响对方代码的正常运行。因此要求封装、解耦以及低干扰度是必须的。
. .
. .word.
5. 自动化
自动打包，压缩，混淆，如果有必要，再加上自动单元测试。
总结：总结来说，一个好的架构的目的是，让前端写代码写的舒服，让后端联调的舒服，让产品经理改需求改的舒服。
二、我如何设计架构
我不敢说自己的架构是好的架构〔显然不是啦〕，只能分享自己最近做的一个工程，它的架构的如何做的。
首先，确定需求：
1、一个中小型，同时面向移动端和PC端〔单端大概15个页面，算上弹窗大约20个〕；
2、预算有限〔给的钱少〕，开发时间有限〔一个月〕；
3
. .
. .word.
、可能存在一定程度上的需求变更〔比方增加页面或修改某些页面内容〕；
4、客户可能不太在乎优化〔但是我自己在乎啊〕；
5、要求兼容IE9以上。
其次开场决定：
1、兼容IE9以上说明可以使用主流框架，而无需必须使用jQuery。因此我采用了vue，；
2、预算有限，时间有限，因此PC端和移动端共html和js，独立css；
3、页面有限，因此无需将架构层级划分的比较细，只需要按其类型划分即可；
4、根据原型图来看，页面复杂程度有限，复用局部不是很多，因此可以确定哪些东西需要封装复用，哪些比较复杂需要独立封装，哪些比较简单为了简化开发难度可以直接耦合；
5、自己比较熟练单页面，因此采用以单页面为主，异步加载其他页面的形式。
于是使用相关配套的东西，比方webpack，vue-router等，另外为了开发和生产的方便性，采用以下模式进展开发。 
. .
. .word.
第三，划分功能：
首先有一个根html，用户需要通过访问它来加载我们的js逻辑，。
. .
. .word.
，我们的前端代码可以被划分为三局部：
组件树
功能模块
各种资源
如以下图： 
. .
. .word.
功能划分好之后，一样功能的放在同一个文件夹下，命名风格应该类似。
具体来说，组件树相关的东西，，放置在ponents文件夹下；资源，有图片或者国际化资源等，，放置在resources文件夹下；而功能插件、效劳等，因为可能被多处引用，因此为了方便引用，放在src文件夹下，并且该文件夹是ponents文件夹和resources文件夹的上级文件夹。
.