前端代码规范的重要性及如何组件化开发

    从吐槽开始，最近连续接了两个代码质量让自己吐血的项目，出自两个不同的靓妹之手（我没有性别歧视的意思，相反我非常喜欢靓妹）。A妹写的代码，我改了一个月的bug还没有改完，从一开始他们写了一半，然后就长期闲置了该项目。然后有一天，产品突然推了这个项目的进行，就交由我去拯救了。我拿到手，发现所有的分页、所有的缺省页、所有的表单验证、所有的loading、所有的筛选都没有，测试提的bug大多就用了“所有”去形容。我拿到手，发现从一开始的布局就有问题，搞不通页面长放不下的时候为什么会用“overflow:hidden”，数字总缺一个0或多一个0，很多页面实在不想改了就重写了...总之那段时间生不如死。

    B妹的代码质量比A好一丢丢，至少该写的功能都写了，但一点开看代码，好家伙，都2019年了，vue马上都出到3.0了动辄一千多行的代码，那一瞬间我觉得在看上古时期几千行的jQuery，而且据说没写完，逻辑过于复杂写不下去了....而且，新增表单和编辑表单是分两个页面写的！就相当于大多数相同的css、template、逻辑代码是重复的！

    对于程序员来说，代码就是自己的脸面，如果说某一天别人接手了你的项目，发现没有注释，变量跳跃式的，方法也是这些一块那写一块，不疯了才怪！这时候我就发现代码规范性，以及公司里实行自测、自动化测试、代码Review或者审批后才能提交的制度是多么重要。

    A的问题我们先不说了，这是态度的问题，用技术无法补救的，所以A妹这个月就高高兴兴的回家了...那我们说B妹，就是前段组件化。

一、项目建立初

    项目建立初，我们要建立好共用的文件。一些全局的样式，如果是比较大的项目且用到一些css预处理，如scss,less等，还得要去写一些混入的css块，最好把一些css样式用变量存起来，把这些变量专门放到一个文件里，方便以后这些样式的更改或者做换肤功能。js也需要做一些公用的文件，比如时间格式化，一些获取路由数据的方法，处理格式的方法还有一个ajax拦截器，存放url请求的文件等，还有一些公共方法的引入，拿Vue为例，可以在main.js上用Vue.prototype变成一个全局方法。

二、编写过程中

    编写过程中需要做到充分的组件化，拿一个文件不得超过5百行为准则约束自己，超出了就立马能抽的尽量抽出来，在这一部分中，我们需要以下几种技术：

1.AMD、CMD、CommonJs、es6 Module语法，现在用的最多的就是Module语法，但有些不得不用CommonJs，比如在使用vue的动态加载图片:src的时候，如果使用es6的Module语法,由于webpack中会将图片当做模块来使用，所以url-loader无法解析图片地址，这时候可以使用require将图片作为模块加载进去。

2.组件之间传值，那Vue来说，主要就是VueX、总线机制、$parent和$child、$emit和$on等的使用，请查看Vue文档，写的相当全面。

    程序的执行是非常严格的，因此，我觉得程序员也应该严格要求自己的代码质量，望进步。