前端架构设计需要注意的方面

1.提高代码的可读性。

有了好的架构，代码的可读性一定很强。

简单来说，如果一个新人加入团队，他接手这个项目一定很容易，也很容易了解整个前端部分的关系，从而找到自己需要重点做什么。而不是花很多时间去熟悉这个项目的很多细节，然后才能开始做东西。

就文件而言，我们可以从文件名来区分哪些是页面，哪些是逻辑，哪些是样式，哪些是可重用组件，哪些是图标组，哪些是手机或PC专属的样式/逻辑。

就代码而言，包括统一的命名风格，封装在同一个文件中的代码足够强的相关性等。

[div][div]

2.提高代码的可维护性。

一个好的架构必须易于维护。比如增加需求，改变需求，修复bug，都不会引起意想不到的变化。比如修改一个页面组件的内容会导致另一个页面组件改变(太坑)。

因此，低耦合、高内聚、输入输出是可以预期的。

[div][div]

3.提高代码的可扩展性。

好的架构一定是可扩展的，不能写死。

改变需求太正常了，增加新的需求太正常了。因此，一个好的架构必须考虑到这些情况，因为它们必然会发生。所以，一定要避免把代码写死。

比如页面组件A中需要有一个日历组件，而这个日历组件引用了别人的(比如来自github)，那么尽量不要在页面组件A中直接引用这个日历组件北京网站关键词优化系统，而是写一个日历组件B，把你引用的日历组件C封装在这个日历组件B中，然后通过这个日历组件B进行操作。

原因很简单。如果有一天产品经理说这个日历组件太丑了，那就换一个吧。如果将这个引用的日历组件C直接嵌入到页面组件A中，很可能要修改很多代码(因为不同日历组件的使用方法和暴露的接口可能不一样)。如果你在其他很多地方引用过这个日历，那你就要改了。

如果将引用的日历组件C封装到自己的日历组件B中，只需要在日历组件B中修改相应的代码，而且由于日历组件B的暴露接口不变，自然不需要修改页面中的代码。

[div][div]

4.便于协作。

包括前端和后端协同，前端和前端协同。

具体来说，前端协作通常以ajax为交互，所以应该至少有一个文件专门用来封装所有的ajax请求，所有的ajax请求都封装在这里。开发时，这里封装的方法应该可以模拟发送和接收约定的交互内容，方便开发联调。

前端和前端的协作主要体现在，在同时更改代码时，不会影响对方代码的正常运行。所以必须要求封装，去耦，低干扰。

[div][div]

5.自动化

自动打包、压缩、混淆，以及必要时的自动单元测试。

[div]