做一个高效的前端攻程狮之经验总结

不知大家有没类似这样的经历：一天忙到晚，一会被PM叫去确认需求，一会被设计拉去确认UI是否能实现，一会又被测试叫去确认bug，然后貌似做了很多事，但好像工作进度也没什么进展。然后，只能晚上加班，在夜深人静时还得敲代码，苦逼。。。

如果我们的工作效率能高一点 ，那也就不会那边的苦逼了。下面是我的总结的一些提高前端工作效率的方法

• 做好时间管理
• 用好工具
• 其他一些琐碎的

所谓时间管理，就是关于如何高效的使用时间。如果要详细的聊如何做好时间管理，那足够写一本书了，呵呵。我就简要谈谈我的一点经验吧

• 做好计划。在自己效率高的时候，做一些难的事情；效率低的时候，做一些简单的事。
• 专注。在我们专注工作时，如果有人来打扰，可以和他沟通，如果事情不紧急，可以稍后来处理他的事情。
• 一段时间只做一件事情。当一件事做的告一段落，再做另外一件事，而不是穿插着做。比如，写页面时，我会先写 HTML ，再写 CSS ，再切图，再写js。

用好工具，就是选择一个好用的工具，并且好好利用它。

用好工具能可以

• 减少一些重复劳动。如 Compass 可以自动生成图片精灵(CSS Sprites )
• 减少做一件事情的路径。如 cutterman 是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

从而提高我们的工作效率。

下面具体的聊聊。

编辑器

在我看来好用的编辑器至少有以下功能

• 语法高亮
• 括号匹配
• 能快速定位
  • 快速打开文件
  • 在文件中查找
  • 在文件夹中查找
  • 跳至某一行
• 能安装插件

能熟练用浏览器进行调试

主要包括

• 审查元素
• 打断点和条件断点
• 改变元素的状态，例如：hover,focus
• 熟练的使用浏览器的控制台
• 移动端调试:用PC浏览器模拟手机浏览器；在PC上远程调试手机页面的工具，推荐用Weinre

想了解更多好用的软件见这里。

项目模板

项目模板包括一个项目的文件结构，公共的一些资源，一些第三方的插件，构建工具等等。一个好的项目模板，能帮助我们进行快速高质量的开发。

推荐在 HTML5  BOILERPLATE 上做一些自己的定制。
如果是移动端的项目，推荐用 MOBILE  BOILERPLATE。    

我的项目模板,见这里,仍在完善中~

快速的生成模板项目，推荐使用 Yo。 

创建一个项目的组件页

创建一个项目的组件页，以便查阅参考。

可以参考bootstrap的。见这里

积累一些的高质量的常用第三方组件，并自己写一些使用组件的demo

网上总是不缺各种第三方组件。其中不乏很多带很多坑的组件。所以，发现高质量的组件，那就赶紧mark吧。我积累了一些，见这里。

虽然很多组件都有官方写的demo。但看官方的demo总是需要花一些时间去理解。我的做法是，理解了官方的demo后，自己也写一些demo。那以后再次使用时，就可以看自己写的demo了。

 积累些常用的代码片段

类似 http://css-tricks.com/snippets/ 。 

如果编辑器是用的sublime的话，可以创建代码片段(snippets)。要再用的时候，只需输入几个键，就可以将代码片段输出。

最后，欢迎大家来补充~