前端外包项目开发心得

我参与的第一个前端外包项目即将完成,（测试地址：http://jpptest.leanapp.cn）
通过这个外包项目我学习到了一些前端项目多人开发的经验，在这里分享给大家，菜鸟第一次做电商项目，欢迎吐槽。。。

多人合作时要分工明确

由于团队成员都比较习惯使用github，我们选用github作为代码仓库。刚开始的时候，我们经常陷入代码冲突的问题，十分尴尬。究其原因，是我们的分工不够明确。在这里，分工明确指的不仅是每个人分模块开发，而是要细致到每一行代码。

因为大多数项目都有很多可复用的代码，如基本的按钮模块。在这种模块中有时我们要根据项目的推进修改代码，在这里只有两种方式，一种是在别人的基础上改进，一种是直接修改核心代码。第一种容易造成代码冗余，而第二种则极易造成代码冲突，前期我们经常把时间花在解决冲突上，后期我们为了避免冲突就全部采用了第一种方式，造成大量代码冗余。

这里介绍下，样式方面，我们选用的是compass+sass预编译工具。刚开始，我们只是把一些可复用的代码放进_common.scss里，比如下面这种：

a.large-button {
  text-decoration: none;
  width: 192px;
  height: 50px;
  line-height: 50px;
  background-color: $orange;
  display: inline-block;
  color: #ffffff;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
}

a.large-button:hover {
  color: white;
}

然后在需要的地方@import '_common.scss'，然而随着项目的推进，修改它的成员越来越多，极易造成代码冲突，在以后的项目中应该尽量把代码细分，如_button.scss、_form.scss等，然后每人负责一个模块或者安排专人负责。

还有就是一些可复用的微调样式，如字体、对齐等尽量写成mixin的形式，这样使用起来比较方便，不需要引入一堆class。

与后端沟通好交互方式再开工

刚开始的时候我们有些自以为是，比如看到有个输入框就写了表单，结果人家后来说用Ajax，比如弹出层的逻辑等等，如果早知道这些情况的话我们说不定可以给出更优的布局或样式方案，所以要与后端沟通好交互方式再开工。

（未完待续）