7招提升你的前端开发效率

前言
前端工程师其实是一个工作很杂的职位，除了要负责切图、写html/css/js外，还要解决一系列的浏览器兼容性、网页性能优化等问题，所以提高前端工程师的开发效率是势在必行的，也是前端工程化的体现。
对于开发效率，我个人理解是

开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率

那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分。下面我就介绍下7个提高前端开发效率的方法。
前端工程化
方法
1.切图
切图是一个前端最基础的技能，一般我们使用Photoshop或者FireWorks基本都能搞定设计师交付给我们的设计图，但是要提高切图效率的话就得使用一些诀窍了，比如利用PS里的动作来实现“一键切图”功能，具体可以看我的这篇文章：www.cnblogs.com/luozhihao/p… ，这里除了切图外还介绍了其他的实用方法和工具。
2.编码
对于编写代码部分我们首先要找到一款合适自己的IDE工具，建议不要使用Notepad++或者Dreamweaver，这些工具已经不符合前端潮流了，无法让自己优雅地敲代码。这里我主要推荐Sublime Text、Atom或者Webstrom，因为它们除了人性化的界面和支持大多数语法的高亮外，还可以安装各种各样的插件来拓展你的IDE工具，下面我主要介绍几款Sublime Text提高开发效率的插件：

其中Emmet是用于快速编写html/CSS的，比如输入 ul>li 后按下tab键便可以生成一个ul标签里面包含一个li标签，其官方文档为：docs.emmet.io/cheat-sheet…
JSFormat用于格式化JS；CSScomb用于对样式属性进行一键排序；HTML-CSS-JS Prettify可以一键规范我们的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用于调用本地调色板功能。这些工具都非常实用，一定程度上可以提高我们的编码效率。
3.自动化
说到提高开发效率，这里不得不提一些前端的自动化工具，毕竟前端自动化是目前及未来的趋势，能够很大程度上缩减前端不必要的工作量，使我们能够专注前端本身。
前端自动化
这里我们可以使用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.规范与模式
团队协作离不开编码规范和开发模式的帮助。遵循编码规范文档可以帮助我们在团队开发时提高合作开发的效率。一个团队遵循一套编码规范可以使每个人的代码写出一个人的风格，这样团队间相互审查、测试、完善功能时会非常高效。下方是一些开源的前端编码规范文档：

codeguide.bootcss.com/
tguide.qq.com/main/index.…
cssguidelin.es/
github.com/adamlu/java…

除了编码规范我们在开发时经常会沿袭了一些已经存在的模式来解决问题，比如当用JS编写弹框时我们往往会用到单例模式，用CSS编写动画时直接套用动画的常用属性等，我们不再需要从头开始思考某一个功能的实现，这就是模式带来的意义。
结语
当然除了以上7点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。只有将前端无序、繁杂的操作组织起来，利用工具简化、规范前端流程，才能实现项目构建、开发、维护的一体化。希望本文能够给初识前端的同学带来启发并付诸实践。

7招提升你的前端开发效率相关推荐

前端组件化和模块化最大的区别是什么_7招提升你的前端开发效率
前言前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. ...
dotnet watch+vs code提升asp.net core开发效率
在园子中,已经又前辈介绍过dotnet watch的用法,但是是基于asp.net core 1.0的较老版本来讲解的,在asp.net core 2.0的今天,部分用法已经不太一样,所以就再写一篇文 ...
Android Studio 2.0：速度提升，极大提高开发效率
转至:http://android.jobbole.com/82127/ Android Studio 2.0:速度提升,极大提高开发效率 11月24日,在 Android Developer Sum ...
招银网络科技前端开发电话面试
招银网络科技前端开发电话面试整个过程26分钟,都没让自我介绍...大致问题如下 1.http协议的html文档结构 2.闭包 3.http与https的区别 4.给出一个列表,其中有一个对象是姓名和 ...
web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
该页面仅以HTML格式保存_轻松实现页面自动刷新功能，提高前端开发效率
作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...
cropper.js 图像旋转问题_快速提高前端开发效率：10个JavaScript图像处理库
用JavaScript处理图像可能非常困难且繁琐.幸运的是,有许多库可以使事情变得简单得多.以下就是一些前端开发经常要使用到的图片处理库,和千锋广州前端小编一起来看看吧! 如果发现有用的东西,请尝试将 ...
这5个可以提高前端开发效率的 Chrome扩展程序，建议你尝鲜体验下
扩展程序是个性化的小程序,可以为你的浏览器添加新功能.你可以通过 Chrome 应用商店添加扩展程序来定制 Chrome 使用体验. 以下是我用来保持专注和提高开发效率的五个 Chrome 扩展程序: ...
activex for chrome扩展程序下载”_提升前端开发效率：你应该知道的10个Chrome扩展程序...
作者 | Chidume Nnamdi 译者 | 王强策划 | 李俊辰 "进步不是勤奋者的功劳.它是懒惰者在尝试寻找更简单的方法时取得的成果." --罗伯特·海因莱因 CSSV ...

7招提升你的前端开发效率

7招提升你的前端开发效率相关推荐

最新文章

热门文章