导语 前端工程师其实是一个工作很杂的职位, 除了要负责切图, 写 html CSS JS 外, 还要处理一系列的浏览器兼容性问题, 优化网页性能等, 所以提高前端工程师的开发效率是势在必行的, 也是前端共工程化的体现. 那么如何提高
前端工程师其实是一个工作很杂的职位, 除了要负责切图, 写 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 的模块化功能来实现我们的前端模块化.
前端工程师
(五) 前端组件化
前端组件化的概念也是由来已久, 我们可以通过将我们的代码划分成不同组件来实现公用并方便维护, 同样可以提升我们的开发效率. 以下是目前流行的前端框架 vue 的单文件组件的概念图:
前端工程师
当然除了以上 5 点, 对于前端来说需要提高开发效率的地方还有很多, 可谓任重而道远. 希望以上几点能够给初识前端的同学带来启发并能够亲自实践.
最后, 给大家推荐一个前端学习进阶内推交流群 685910553(前端资料分享), 不管你在地球哪个方位,
不管你参加工作几年都欢迎你的入驻!(群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档!)
如果您对这个文章有任何异议, 那么请在文章评论处写上你的评论.
如果您觉得这个文章有意思, 那么请分享并转发, 或者也可以关注一下表示您对我们文章的认可与鼓励.
愿大家都能在编程这条路, 越走越远.
来源: http://www.jianshu.com/p/0aa0055259f2