高效前端er必备技能

2015-11-10 14:00  阅读 1,044 次 评论 2 条 已收录

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

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

高效前端er必备技能

管理时间

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

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

善用工具

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

善用工具可以

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

从而提高我们的工作效率。下面具体的聊聊:

编辑器

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

  1. 语法高亮
  2. 括号匹配
  3. 能快速定位

    • 快速打开文件
    • 在文件中查找
    • 在文件夹中查找
    • 跳至某一行
  4. 能安装插件

熟练用浏览器进行调试

主要包括

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

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

项目模板

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

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

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

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

项目的组件页

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

可以参考bootstrap的。见这里

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

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

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

积累些常用的代码片段

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

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

最后,欢迎大家来补充~

本文地址:http://humicai.cn/efficient-front-end-er-skill.html
关注我们:请关注一下我们的微信公众号:扫描二维码轻微生活的公众号,公众号:kivilife
版权声明:本文为原创文章,版权归 胡敉才 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. 刚哥笔记
    刚哥笔记 【铁杆粉丝】 @回复

    搞前端的好高大上的感觉,我非此专业,自学一点皮毛。

    • 轻微生活
      轻微生活【博主】2015-11-16 at 20:44  回复

      @刚哥笔记前端其实就是入门易进阶难的一个过程,其实有时我们掌握了一定的技巧,能高效工作,自身也是比较高大上的,我也是自学了一些皮毛,我们共同迈向高大上的阶层[嘻嘻]