7招提高你的前端开发效率
关于
前言
前端工程师实际上是一个工做很杂的职位，除了要负责切图、写html/css/js外，还要解决一系列的浏览器兼容性、网页性能优化等问题，因此提升前端工程师的开发效率是势在必行的，也是前端工程化的体现。javascript
对于开发效率，我我的理解是css
开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率html
那么如何提升前端开发效率即可以按照前端工程化的理念来进行划分。下面我就介绍下7个提升前端开发效率的方法。前端
方法
1.切图
切图是一个前端最基础的技能，通常咱们使用Photoshop或者FireWorks基本都能搞定设计师交付给咱们的设计图，可是要提升切图效率的话就得使用一些诀窍了，好比利用PS里的动做来实现“一键切图”功能，具体能够看个人这篇文章：www.cnblogs.com/luozhihao/p… ，这里除了切图外还介绍了其余的实用方法和工具。java
2.编码
对于编写代码部分咱们首先要找到一款合适本身的IDE工具，建议不要使用Notepad++或者Dreamweaver，这些工具已经不符合前端潮流了，没法让本身优雅地敲代码。这里我主要推荐Sublime Text、Atom或者Webstrom，由于它们除了人性化的界面和支持大多数语法的高亮外，还能够安装各类各样的插件来拓展你的IDE工具，下面我主要介绍几款Sublime Text提升开发效率的插件：webpack
其中Emmet是用于快速编写html/CSS的，好比输入 ul>li 后按下tab键即可以生成一个ul标签里面包含一个li标签，其官方文档为：docs.emmet.io/cheat-sheet…git
JSFormat用于格式化JS；CSScomb用于对样式属性进行一键排序；HTML-CSS-JS Prettify能够一键规范咱们的HTML/CSS/JS，甚至JSON格式；SublimeTmpl能够快速新建HTML/CSS/JS文件; ColorPicker用于调用本地调色板功能。这些工具都很是实用，必定程度上能够提升咱们的编码效率。github
3.自动化
说到提升开发效率，这里不得不提一些前端的自动化工具，毕竟前端自动化是目前及将来的趋势，可以很大程度上缩减前端没必要要的工做量，使咱们可以专一前端自己。web
这里咱们可使用NPM来管理咱们的项目包文件；利用webpack来打包压缩咱们的代码；利用Node.js来实现构建本地服务器；利用Karma、Jasmine来测试咱们的前端代码。后端
用好前端自动化工具能够帮助咱们处理不少琐碎的事情，好比一键压缩代码、图片，一键合并JS，检测文件更新等。
4.模块化
随着web2.0时代的到来，Ajax技术获得普遍应用，前端代码日益膨胀，而前端模块化可以方便咱们对项目代码的维护，进行按需加载，从长远角度来看对咱们提升项目的开发效率一样大有益处。
在ES6出来以前应该说前端代码自己不具有实现模块的功能，咱们必需要使用一些模块化加载器来实现，好比RequireJS、SeaJs等。而随着ES6的普及，目前像RequireJS、SeaJs这样的工具已经没有存在的必要了。因此在基于ES6的开发环境下我建议使用ES6的模块化功能来实现咱们的前端模块化。
5.组件化
前端组件化的概念也是由来已久，咱们能够经过将咱们的代码划分红不一样组件来实现功能公用，一个一样的功能咱们可能不用再次编写相同的代码，同时也能够提升前端代码的可维护性和清晰度。如下是目前流行的前端框架Vue的单文件组件的概念图：
咱们能够将公用的组件抽离，将大组件拆分红小组件的形式实现前端组件化，组件与组件之间能够存在父子关系，也能够存在兄弟关系。在Vue的单文件组件中，一个组件包含了其HTML、CSS、JS的代码片断。
6.先后端分离
我曾经写过一篇关于先后端分离的文章《咱们为何要尝试先后端分离》，地址为：www.cnblogs.com/luozhihao/p… 。
先后端分离的项目对提高前端开发效率很是有帮助，由于前端再也不须要后台配置路由、搭建服务器环境、编写模板等，这样一来前端的生产力就会获得很大程度的解放，可是先后端分离的项目有利也有弊，以下图所示：
最终咱们须要根据项目需求衡量利弊来决定是否使用先后端分离的模式。
7.规范与模式
团队协做离不开编码规范和开发模式的帮助。遵循编码规范文档能够帮助咱们在团队开发时提升合做开发的效率。一个团队遵循一套编码规范可使每一个人的代码写出一我的的风格，这样团队间相互审查、测试、完善功能时会很是高效。下方是一些开源的前端编码规范文档：
除了编码规范咱们在开发时常常会沿袭了一些已经存在的模式来解决问题，好比当用JS编写弹框时咱们每每会用到单例模式，用CSS编写动画时直接套用动画的经常使用属性等，咱们再也不须要从头开始思考某一个功能的实现，这就是模式带来的意义。
结语
固然除了以上7点，对于前端来讲须要提升开发效率的地方还有不少，可谓任重而道远。只有将前端无序、繁杂的操做组织起来，利用工具简化、规范前端流程，才能实现项目构建、开发、维护的一体化。但愿本文可以给初识前端的同窗带来启发并付诸实践。
本文对你有帮助？欢迎扫码加入前端学习小组微信群：