前端工程师怎样提高开发效率?

北大青鸟大学城校区logo 北大青鸟大学城校区
招生简章校园环境师资力量就业明星招生问答软件工程师北京大学学历学员项目联系我们 报名通道

免费在线咨询通道>>

免费在线报名通道>>

北大青鸟报名电话
当前位置:北大青鸟 > 北大青鸟 > 北京北大青鸟 >

前端工程师怎样提高开发效率?

标签:   分类:北京北大青鸟

很多人会疑问在北大青鸟学习前端工程师容不容易,怎么学习才能更加有效率,前端工程师其实是一个工作很杂的职位,除了要负责切图、写html/css/js外,还要处理一系列的浏览器兼容性问题、优化网页性能等,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现。那么如何提高便可以按照前端工程师涉及的工作点来进行划分。下面我就介绍下平时我在工作中使用的一些提高开发效率的方法。

  切图是一个前端最基础的技能,一般我们使用photoshop或者fireworks基本都能搞定设计师交付给我们的设计图,但是要提高切图效率的话就得使用一些诀窍了,比如利用PS里的动作来实现“一键切图”功能。

  编写html/css/js,对于编写代码部分我们首先要找到一款合适自己的IDE工具,建议不要使用notepad++或者dreamweaver,这些工具已经不符合前端潮流了,无法让自己优雅地敲代码。这里我主要推荐sublime text、atom或者webstrom,因为它们除了人性化的界面和支持大多数语法的高亮外,还可以安装各种各样的插件来拓展你的IDE工具,下面我主要介绍几款sublime text提高开发效率的插件:其中Element是用于快速编写html的,比如输入 ul>li后按下tab键便可以生成一个ul标签里面包含一个li标签,其官方文档为:http://docs.emmet.io/cheat-sheet/。

  JSFormat用于格式化JS;CSScomb用于对样式属性进行一键排序;HTML-CSS-JS Prettify可以一键规范我们的HTML/CSS/JS,甚至JSON格式;SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用于调用本地调色板功能。这些工具都非常实用,一定程度上可以提高我们的编码效率。

  说到提高开发效率,这里不得不提一些前端的自动化工具,毕竟前端自动化是目前及未来的趋势,能够很大程度上缩减前端不必要的工作量,使我们能够专注前端本身。
这里我们可以使用npm来管理我们的项目包文件;利用webpack来打包压缩我们的代码;利用node.js来实现构建本地服务器;利用karma、jasmine来测试我们的前端代码。
用好前端自动化工具可以帮助我们处理很多琐碎的事情,比如一键压缩代码、图片,一键合并JS,检测文件更新等。实现前端模块化能够方便我们项目代码的维护,实现按需加载,从长远来看对我们提高项目的开发效率是很有帮助的。

  在ES6出来之前应该说前端代码本身不具备实现模块的功能,我们必须要使用一些插件库来实现,比如require.js、sea.js等。而随着ES6的普及,目前像require.js、sea.js这样的工具已经没有存在的必要了。所以在基于ES6的开发环境下我建议使用ES6的模块化功能来实现我们的前端模块化。

若有疑问请拨打北大青鸟咨询热线:010-80146691或点击免费在线咨询!
  • xml地图 网站地图 招生简章 合作企业 学员项目 联系我们
  • 关闭窗口