1、1中小型项目前端架构2一、为什么要有一个好的架构首先明确一点，架构是为需求服务的。前端架构存在的目的，就我个人理解来说，有以下几点：1. 提高代码的可读性一个好的架构，代码的可读性一定是很强的。简单来说，假如有一个新人加入团队，那么他接手这个项目，一定是容易上手的，能简单轻松的了解整个前端部分的相互关系，从而找到自己需要重点关注的点。而不是需要花很多时间去熟悉这个项目的很多细节，才能开始上手做东西。就文件来说，可以从文件名上，分清哪些是页面、哪些是逻辑、哪些是样式、哪些是可以复用的组件、哪些是图标组、又有哪些是移动端或是 PC 端专享的样式/逻辑等。就代码来说，包括统一的命名风格，封装在同一个
2、文件里的代码的相关性足够强等。2. 提高代码的可维护性3一个好的架构，一定是易于维护的，例如在新增需求、更改需求、修正 bug，都不会造成意料之外的变化，比如说修改了一个页面组件的内容，却导致另外一个页面组件发生变化（这也太坑了）。因此，要低耦合，高内聚，以及输入和输出是可预期的。3. 提高代码的可扩展性一个好的架构，一定扩展性要强，不能写死。需求变更太 TM 正常了，新增需求也太 TM 正常了。因此好的架构，必须要考虑到这些情况的发生，因为这些是一定会发生的。所以，一定要避免把代码写死。比如页面组件 A 里需要有一个日历组件，而这个日历组件引用的是别人的（比如从 github 上找的）。那么
3、尽量不要直接在页面组件 A 里面直接引用这个日历组件，而是将写一个日历组件 B，在这个日历组件 B 里封装你引用的日历组件 C，然后通过这个日历组件 B 来进行操作。原因很简单，假如某天产品经理说，这个日历组件太丑了，我们换一个吧。如果你直接在页面组件 A 里内嵌这个引用的日历组件 C，你很可能就要改很多代码（因为不同日历组件的使用方法和暴露的接口可能不同）。假如你还在其他多个地方引用了这个日历组件，那就更糟糕了！每个地方都要改。4而若是将引用的日历组件 C 封装到自己写的日历组件 B 之中，那么你只需要改日历组件 B 里的相应代码即可，而因为日历组件 B 暴露的接口是不变的，那么自然不用修改
4、页面中的代码了。附图，以日历组件为例，是否考虑到扩展性的结果 未考虑到扩展性：5 考虑到扩展性： 4. 便于协同包括前端和后端的协同，前端和前端之间的协同。具体来说，前后端的协同通常是以 ajax 为交互，那么应至少有一个用于专门封装了所有 ajax 请求的文件，所有 ajax 请求都封装在这里。在开发时，这里封装的方法应该可以模拟发送和接收约定好的交互内容，方便开发联调。6而前端和前端的协同，主要体现在同时在更改代码时，不会影响对方代码的正常运行。因此要求封装、解耦以及低干扰度是必须的。5. 自动化自动打包，压缩，混淆，如果有必要，再加上自动单元测试。总结：总结来说，一个好的架构的目的是，让
5、前端写代码写的舒服，让后端联调的舒服，让产品经理改需求改的舒服。二、我如何设计架构我不敢说自己的架构是好的架构（显然不是啦），只能分享自己最近做的一个项目，它的架构的如何做的。7首先，确定需求：1、一个中小型网站，同时面向移动端和 PC 端（单端大概 15 个页面，算上弹窗大约 20 个）；2、预算有限（给的钱少），开发时间有限（一个月）；3、可能存在一定程度上的需求变更（比如增加页面或修改某些页面内容）；4、客户可能不太在乎优化（但是我自己在乎啊）；5、要求兼容 IE9 以上。其次开始决定：1、兼容 IE9 以上说明可以使用主流框架，而无需必须使用 jQuery。因此我采用了 vue，版本是
6、 2.0；2、预算有限，时间有限，因此 PC 端和移动端共 html 和 js，独立 css；3、页面有限，因此无需将架构层级划分的比较细，只需要按其类型划分即可；4、根据原型图来看，页面复杂程度有限，复用部分不是很多，因此可以确定哪些东西需要封装复用，哪些比较复杂需要独立封装，哪些比较简单为了简化开发难度可以直接耦合；5、自己比较熟练单页面网站，因此采用以单页面为主，异步加载其他页面的形式。8于是使用相关配套的东西，比如 webpack，vue-router 等，另外为了开发和生产的方便性，采用以下模式进行开发。 9第三，划分功能：首先有一个根 html，用户需要通过访问它来加载我们的 js
7、 逻辑，因此 js 逻辑的代码被写在 main.js 之中。在 main.js 之下，我们的前端代码可以被划分为三部分： 组件树 功能模块 各种资源如下图： 10功能划分好之后，相同功能的放在同一个文件夹下，命名风格应该类似。具体来说，组件树相关的东西，通常是以.vue 结尾，放置在 components 文件夹下；资源，有图片或者国际化资源等，以.png 或者.js 或.json 结尾，放置在 resources 文件夹下；而功能插件、服务等，因为可能被多处引用，因此为了方便引用，放在 src 文件夹下，并且该文件夹是 components 文件夹和 resources 文件夹的上级文件夹。
