html5前端开发工程师_如何提高前端开发效率

时间: 2018-03-29阅读: 969标签: 效率

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

如果我们的工作效率能高一点 ,那也就不会那边的苦逼了。所谓高效,就是,在更少的时间做更多的事。如何做?

我的做法是,观察自己做事的每个流程,看哪些可以优化。举个例子,做一个页面的流程

  • 理解需求。
  • 思考实现方法。
  • 切图。
  • 编码。
  • 调试。
  • 改 bug。

如果某个流程花了很多时间,可以考虑优化。比如,如果编码很慢,考虑,是不是不熟悉框架,所以要经常查文档?还是做了很多可以用工具做的事情?以此,找到解决方案,来提高效率。

下面时一些具体的建议。


时间管理

  • 不同的时间段做不同的事。头脑清醒的时候,做一些难的事情;状态欠佳的时候,做一些简单的事,或干脆出去走走,休息休息。
  • 做事时要专注。在我们专注做事时,要减少外界的干扰,比如带上耳机,将手机开静音。如果此时有人来打扰,稍后来处理他的事情;如果事情比较紧急,则记录下当前的状态,方便切换回来的时候,能迅速进入状态。我们可以尝试使用番茄工作法:在一段时间内(一般是25分钟),只做一件事情,结束后,休息一会,继续做事,以此循环。

不做不必要做的事

  • 实现不靠谱的需求。拒绝不靠谱的需求。
  • 理解需求出现偏差。对于不理解的需求,要及时和 PM 沟通,不要自己揣测。
  • 做与整个项目风格不一致的页面。如果设计师的设计的和当前项目的风格不一致,与其沟通,看是否能用项目中统一的风格(样式)。
  • 想清楚实现思路后,再开始编码。有时候一个好的算法比一个差的,会简单很多。
  • 重复造轮子。
  • 一拿到项目就开始编码。应该熟悉当前项目所用的技术。避免重复实现项目已经实现过的功能。

优化做事的方式

  • 重复的事情让程序来做。
    • 项目脚手架生成器。基于此快速搭建一个项目。主流的框架都有 xx-cli 项目。也可以用 Yo 自己搭建一个。
    • 自动添加浏览器前缀。可以用 AutoPrefix。
    • 自动生成图片精灵。可以用 Compass
    • 一键切图。可以用 Cutterman
    • 代码改变时,浏览器自动刷新。
    • 代码发布前做的一些事情。代码压缩,合并等。
  • 选用合适的框架和第三方库。
  • 用好软件。
    • 熟悉常用快捷键。
      • 快速定位到项目中的某文件;某方法。
      • 全局搜索,替换。
      • 等等。
    • 敲更少的代码。
      • 安装一些代码补全插件。如 Emmet, Bootstrap Snippents 等
      • 设置一些命令的简写。如,git 可以配置一些简写。
    • 能快速启动常用软件。
  • 减少查找的时间。
    • 保持工作环境的整洁。丢掉不用的东西,删除不用的文件。
    • 常用链接的导航。
    • 常用第三方组件整理。我积累了一些,见这里
    • 自己写的代码参考示例。
    • 文档聚合网站devdocs
  • 其他
    • 两个显示屏。
    • 保持身体健康。
    • 做事时,保持一个积极的心态。


作者:九彩拼盘,原文标题:如何做一个高效的前端
链接:https://www.jianshu.com/p/9bc4951c9d80

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/568

关闭

7大笔记应用,让你的代码效率翻7倍

编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。

55个提高你 CSS 开发效率的必备片段

这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找;浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦

你是一直认为MySQL count(1) 比 count(*) 效率高么?

MySQL count(1) 真的比 count(*) 快么? 反正同事们都是这么说的,我也姑且觉得对吧,那么没有自己研究一下究竟?如果我告诉你他们一样,你信么?

有哪些可以提升编程效率的技巧和方法?

传说程序员打字速度要快,很多人仍然会以这样一个标准来片面判断技术水平.拜托,你是一个程序员,不是一个打字员,打字快可以代表一些,但也并不代表什么.互联网行业还在纠结打字速度的,不是外行,就是一个没有独立思考的人.

jQuery 效率提升建议

jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效。

提高开发效率的 9 个工具

互联网真是个神奇的地方,它不仅教你如何写代码,还提供了很多有用的工具,在开发的各个阶段帮你节约宝贵时间。本文将列出 9 个有用的在线工具,对任何开发人员而言,它们都会是得力助手(排名不分先后)

5个console.log() 技巧帮你提高工作效率

我们知道 console.log(message)用法很简单,表示将参数message 打印到控制台上。本文主要介绍5个有用的技巧,可帮助你在使用console.log()时提高工作效率。

Vue Template 修饰符和简写,让开发效率有所提高

vue 是一个易于使用的Web应用程序框架,可用于开发交互式前端应用程序。在本文中,我们将介绍指令的修饰符和一些有用的模板简写指令。事件修饰符例如,v-on指令的.prevent修饰符将在设置为该值的事件处理函数上自动运行

提高远程工作效率的工具

近年来,远程工作愈来愈流行。远程工作能够帮助雇主能够降低运营成本,同时员工有机会实现工作与生活之间的平衡并避免通勤。下面我们就为大家推荐13个有用的工具

如何提升javascript的效率?

为了提供新鲜、别致的用户体验,很多网站都会使用 JavaScript来改善设计、验证表单、检查浏览器,以及Ajax请求,cookie操作等等,实现无刷新动态效果 。但是,要将大量内容在浏览器呈现,如果处理不好,网站性能将会急剧下降

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!