「网站架构设计」前端如何用最低成本提高代码质量，规整化关于编码规范 、JavaScript库与框架 和组件工具箱介绍。
请点击输入图片描述（最多18字）
上一期讲了前端架构需要考虑的问题，本期会讲这些问题的具体解决方案，我们先讲前端的规整化，经常发生这样的问题，同是使用vue、react或者angular的项目，为什么有些项目效果很好，却有些项目效果很差？
其实并没有任何框架能保证软件的质量，而且vue、react这些框架其实考虑的是软件结构，而真实项目中，项目过程才是决定软件质量的关键。
而规整化是提升软件质量最有效但又最容易忽略的手段，如果能规整出一套完整规则的话，那么，无论用vue还是react，或者其他框架的软件质量都是差不多的。
当然，规整化的目的，并不是让代码像工艺品一样，而是通过限制开发过程，让代码混乱度限制在一定范围内，代码混乱才是影响软件质量的关键。
前端规整化一般是从这几个方面下手
制定编码规范是最有效的整顿方法，这里以原生开发为例，脚手架等框架同理。
前端的编码规范需要考虑这几点：
1、编码规范
（1）规范化目录结构，目录结构需要非常清晰，
html文件、css文件、js文件、图片资源存放位置需要一目了然。
请点击输入图片描述（最多18字）
（2）规范化前端资源文件使用
限制每个网页只有专属的一个Html文件、一个CSS文件、一个JavaScript文件
让网页间代码解耦，互相不受影响
请点击输入图片描述（最多18字）
（3）抽离通用部分
将通用的Css、JavaScript部分抽离成通用文件，如抽离出主题Css文件、通用JavaScript文件，并且通过命名规范（如以Common_作为前缀）区分通用代码和网页专属代码，这样，在调试问题时，从命名就能区分出是通用代码还是专属代码。另外，抽离的通用部分应有专人负责，切勿让开发人员随意添加。
请点击输入图片描述（最多18字）
（4）规范化第三方插件的使用
虽然过度依赖第三方插件不是一个好的行为，但是合理使用一些较为稳定的第三方插件却能大大降低开发的工作量，第三方插件的使用应有专人评估引入，以防出现多个页面其实引用的是相同的插件，但是却在版本上有所区别的问题。
请点击输入图片描述（最多18字）
（5）其他
除了以上提到的几个点，还有很多细节需要考虑，如命名规则、禁用同步方式请求接口等。这些编码规范看起来是琐碎的事情，但是在实际项目当中却能预防很多问题。
2、JavaScript库与框架
JavaScript库如jQuery、Zepto等，框架如vue、react等，这些都可以降低工作量，但是，对于JavaScript库、框架的选择。需要基于团队的使用习惯，如果大部分人不熟悉vue-cli等脚手架等框架，却贸然选择此类框架，无论框架本身有多好，也只会徒增工作量和混乱度，反而弄巧成拙。
再者，诸如”jQuery是否过时“、”原生开发还是选用脚手架等框架“等问题。其实，从实际项目而言，这些问题都是无关紧要的，因为，技术本身是很难争论出孰优孰劣的，只会存在合不合适的技术，组件工具箱如BootStrap、Element-UI等，组件工具箱确实能降低编写Css的工作量。
3、组件工具箱
组件工具箱的选择，除了考虑团队的使用习惯，更重要的是，组件工具箱的UI风格是否与UI设计的风格相似的，因为组件工具箱的组件风格一般是不可大改的，如果采用了一个与UI设计风格完全不一致的组件工具箱，则反而会大大提高调整样式的工作量。
总结
做项目是一种经济行为，一个成熟的架构师，永远不会只考虑哪个技术流行，而应该从实际团队出发，制定一套规范以约束团队开发的过程。提升软件质量和开发效率技术并不是决定软件质量的关键，项目过程才是。