1. 怎样提高前端工程师开发效率,都在这里
前端工程师其实是一个工作很杂的职位,除了要负责切图、写html/css/js外,还要解决一系列的浏览器兼容性、网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现。
对于开发效率,我个人理解是
开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率
那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分。下面我就介绍下7个提高前端开发效率的方法。
1.切图
切图是一个前端最基础的技能,一般我们使用Photoshop或者FireWorks基本都能搞定设计师交付给我们的设计图,但是要提高切图效率的话就得使用一些诀窍了,比如利用PS里的动作来实现“一键切图”功能,这里除了切图外还介绍了其他的实用方法和工具。
2.编码
对于编写代码部分我们首先要找到一款合适自己的IDE工具,建议不要使用Notepad++或者Dreamweaver,这些工具已经不符合前端潮流了,无法让自己优雅地敲代码。这里我主要推荐Sublime Text、Atom或者Webstrom,因为它们除了人性化的界面和支持大多数语法的高亮外,还可以安装各种各样的插件来拓展你的IDE工具,下面我主要介绍几款Sublime Text提高开发效率的插件:
其中Element是用于快速编写html/CSS的,比如输入 ul>li 后按下tab键便可以生成一个ul标签里面包含一个li标签
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.前后端分离
前后端分离的项目对提升前端开发效率非常有帮助,因为前端不再需要后台配置路由、搭建服务器环境、编写模板等,这样一来前端的生产力就会得到很大程度的解放,但是前后端分离的项目有利也有弊,如下图所示:
最终我们需要根据项目需求衡量利弊来决定是否使用前后端分离的模式。
7.规范与模式
团队协作离不开编码规范和开发模式的帮助。遵循编码规范文档可以帮助我们在团队开发时提高合作开发的效率。一个团队遵循一套编码规范可以使每个人的代码写出一个人的风格,这样团队间相互审查、测试、完善功能时会非常高效。下方是一些开源的前端编码规范文档:
网页链接
首页-TGuide
网页链接
网页链接
除了编码规范我们在开发时经常会沿袭了一些已经存在的模式来解决问题,比如当用JS编写弹框时我们往往会用到单例模式,用CSS编写动画时直接套用动画的常用属性等,我们不再需要从头开始思考某一个功能的实现,这就是模式带来的意义。
结语
当然除了以上7点,对于前端来说需要提高开发效率的地方还有很多,可谓任重而道远。只有将前端无序、繁杂的操作组织起来,利用工具简化、规范前端流程,才能实现项目构建、开发、维护的一体化。希望本文能够给初识前端的同学带来启发并付诸实践。
2. 如何面试前端工程师
随着时代的发展,很多新兴的就业职位随之产生。前端工程师将就是随着互联网的快速发展而产生的。其实在很多人的观念里,前端工程师也就是一个切页面的而已,他们也就是会html、css、javascript这些没有任何技术含量的网页制作而已。然而随着技术飞速发展,人们对这些技术的要求也是越来越高,如果只凭着一个人来把所有的事情都解决是很困难的,所以这个时候前端工程师就开始发挥着他们很大的作用了。
那我们应该如何来面试前端工程师呢?
谈吐要大方得体
在我们在面对面试官时我们千万不要紧张。在进行自我介绍时我们要努力做到自信大方、吐字清晰。我们在自我介绍时要用简明扼要的话语来介绍自己,突出自己的优点表明自己的求职意向。你要通过寥寥数语把自己的优势都向面试官介绍清楚。记住不必要的话语要少说。
好了关于如何面试前端工程师这个话题我就聊到这了。希望我的回答能对你有所帮助。
3. 一个优秀的前端工程师应具备哪些技能
1、熟练而全面的掌握web前端技术
优秀的web前端开发工程师要在知识体系上既要有广度和深度。如果你的html、css(包括现在的HTML5+CSS3)基础不会,或者不够扎实,或者JS很好,但布局基础不行……这些表现不仅和优秀的标准相差深远,甚至连合格的web前端都谈不上。一个优秀的web前端至少能实现视觉和交互功能,以及与后端服务器通信,完成业务逻辑。我理解的前端工程师的核心价值就是对用户体验的极致追求。
2、具备快速学习的悟性及本能
web发展的很快,甚至可以说这些技术几乎每天都在变化.如果没有快速学习能力,就跟不上web发展的步伐。优秀的前端工程师必须不断提升自己,不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。web的明天与今天必将有天壤之别,而前端工程师的工作就是要搞清楚如何通过自己的web应用程序来体现这种翻天覆地的变化。
3、培养良好的代码规范编写习惯
一名优秀的web前端从程序设计风格,即在编制程序时所表现的特点和思维逻辑就能展现出来。这就要求我们在设计程序中要使用结构合理、清晰,形成良好编程习惯,对程序的要求不仅是可以在机器上执行,也要给出正确的结果,便于程序调试和维护。
4. Web前端工程师必备技能盘点
1、HTML5
HTML是超级文本标记语言,是为“网页创建和其他可在网页浏览器中看到的信息”设计的语言。HTML5是由万维网发布的最新的语言规范,是开放的Web网络平台的奠基石,所以做Web前端,精通HTML5是必须要掌握的一项技能。
2、CSS3
CSS即层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、背景和边框 、文字特效 、多栏布局等。CSS3对于Web前端整个页面的设计是必备的技能。
3、JavaScript
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能,为用户提供更流畅美观的浏览效果。
4、jQuery
JQuery,顾名思义也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。它是轻量级的JS库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),JQuery2.0及后续版本将不再支持IE6/7/8浏览器。
以上就是Web前端工程师必备技能,小编在这里建议,只要你打好基础,并且一步一个脚印踏实完成学习和项目,成为一名Web前端开发工程师并不难。所以,小伙伴们,加油吧!
5. 前端工程师需要掌握哪些知识
前端工程师需要掌握的知识如下:
1、学习HTML,这是最简单的,最基本的是掌握div、表格表、UL Li、p、跨度、字体这些标签,这些都是最常用的,尤其是div和表,div,表也可以用于布局布局,但不灵活,基本是表处理数据。
2、严格模式与混杂模式:如何触发这两种模式,区分它们有何意义。
3、浮动元素:怎么使用它们、它们有什么问题以及怎么解决这些问题。
4、JSON:作用、用途、设计结构。
5、DOM操作:如何添加、移除、移动、复制、创建和查找节点等。
6. 前端工程师需要拥有哪些技能
1.开发语言
HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又是一次革新。有些人认为前端开发要掌握的技能简单,不就是制作网页 嘛,其实不然,web前端需要掌握的核心语言xHTML+CSS+JavaScript,JavaScript作为最难的语言之一,许多编程高手也不敢妄 自菲薄自封精通。由于JavaScript与html的差异性,以及静动态分开处理的一些好处。在大公司编写静态效果和动态效果往往是分开由不同的人完成的。小公司因为需要压缩成本,就要求每个人会得越多越好,如果您想往项目经理发展,能懂一两门后台语言,绝对是锦上添花!
2.浏览器兼容性
互联网目前主流浏览器有IE6789,Firefox,Chrome,Opera,Safari,遨游,包括国内主流的搜狗,腾讯 TT,360,the World等等;从内核上讲主要有IE的,遨游版IE,safari,firefox以及opera的,这些都是大家常见的,如果你身边有老网虫喜欢收藏 浏览器,你翻翻他的硬盘,相信几十款肯定是有的。每种内核对代码的解析是不完全一样的,即使同样内核也可能存在很大差异,如IE和遨游版的IE。不说非主流的浏览器,就主流的浏览器要做到完全兼容,也并非易事,需要长时间的积累和测试,需要前端开发工程师对前端开发的热爱和激情。
目前移动互联网的发展趋势也不容小觑,将慢慢占据互联网的主要份额。移动互联网最突出的好处是方便和及时,试想一下,走在某地风景很好,拍下来后自 动分享给各路好友,因此手机上的浏览器兼容也看刻不容缓,现在手机上的浏览器也是纷繁复杂,主流的UCWEB,safari,IE,3G门户的,以及 symbian低端机的“残缺儿童”,包括国外流行手机我们不知道的一些浏览器,更糟糕的是这些浏览器解析因为手机硬件的不同,每个浏览器得到的结果都是 完全不同的。
3.hack技术
由于不同的浏览器对CSS的解析认识不一样,因此会导致生成的页面效果不一样,这个时候就需要针对不同的浏览器写不同的CSS,这个过程叫CSS hack。虽然我们写代码都要求按照标准,不写hack代码,但实际工作中为了兼容主流浏览器,hack代码是免不了的,所以这也应该是每个前端开发人员 必备的技能。
4.业内标准
目前Web前端开发中提到最多的就是W3C标准,这是一系列标准的集合,代表了互联网发展的方向,也代表了前端开发的一种信仰。写的代码都要100%通过标准验证,为通过标准验证而感到自豪,会有效推动互联网的快速发展。
5.开发工具
目前比较流行的是Dreamweaver, 其曾经风靡一时,到现在也没有退出历史舞台,证明DW还是有很大优势的,尤其是针对初学者,其强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,但现 在更提倡的是纯手写代码,既体现技能方面的卓越,也可有效避免使用DW等工具产生的冗余代码。此外再掌握一些photoshop技能,即使没有美工,也能 简单处理一些图像。
小结,掌握以上技能,可以说你是一个合格的前端开发人员,能够参与到一个大的项目中,或者自己独立写出一个网页。虽然这看起来和网页制作设计差不多,从效果上来看,都是制作网页的,但实际上,技术上所超出的已经是好几个档次的东西了。
7. 前端开发需要掌握的技能知识
首先作为前端工程师,掌握前端基础是最重要的,如果基础不扎实,一切应用技能就都是“浮云”。前端的基础是什么?HTML、CSS、JavaScript基本功,数学、算法、数据结构、操作系统、编译原理基本功。
另外必须要有自己擅长的领域,并且钻研得足够深入,同时要有眼界,能“跨界”。可以以前端作为职业,但千万不要把自己的技能限制在前端领域,因为有很多东西,只有站在前端之外,才能看得更清晰更透彻。想要学习更多技能,建议选择优就业,优就业的web前端课程有着优秀的讲师,科学的课程,建议去实地考察一下,看看实际情况如何。
8. 前端工程师如何提升能力提高效率有哪些方法
1、使用正确的工具。正所谓“工欲善其事必先利其器”,如果你是一个网页设计师,你可能需要Photoshop和Illustrator。如果你是一名开发人员,你需要一些优秀的Web开发应用程序。拥有一些优秀的、你知道如何更有效地使用的工具和装备可以帮助你尽可能的高效完成工作。
2、善用Web开发框架。一个良好的Web开发框架,可以帮助你解决常见的Web开发问题,可以测试Web开发的bug、安全和性能,使代码重用更容易等,借助框架会节省你的时间以及提高项目的质量。
3、建立一个代码片段库。回收你的代码,创建一个你最喜欢和经常使用的代码片段集,并确保代码组织良好,可以被轻易搜索到。你可以在硬盘中建立源代码目录,也可以使用允许保存代码片段的源代码编辑器或IDE,或者使用专门的片段工具,如Snippet或Snipplr。
4、冲刺式工作。不要连续工作几个小时,这样你的效率可能会下降,随着时间的推移,你的工作品质也会下降。每次连续工作10-20分钟,可以保持你大脑活跃,可以更好地产生新的想法。
5、不断学习。通过在自我提高上投入时间,你可以在工作的其他方面节省时间,可以增加你的劳动成果并提高工作质量。要保持你的时间表灵活变化,超过规划的工作,可能会一拖再拖。
6、做好工作规划。当你开始一个项目的工作,确保知道你对这个项目的期望。做网页设计项目时,需要了解客户期望做的、首页内容、颜色设置等工作。了解有关项目的某些内容,可能会使你工作在正确的方向,而不至于在黑暗中摸索。
掌握以上方法,可以大大简化你的Web开发流程,使开发的每一个环节快速、流畅。
9. 浅谈如何做一名优秀的WEB前端工程师
首先,优秀的Web前端开发工程师要在知识体系上既要有广度和深度!做到这两点,其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白,只有对和错,而技巧则见仁见智。
再者,优秀的前端工程师需要具备良好的沟通能力,因为前端工程师至少都要满足四类客户的需求。
1、会用PS来进行图片的处理(比如切图,微调等)
2、用HTML/CSS实现mockup(可能还有SASS/LESS等工具)
3、熟悉JavaScript(比如前端的MVVM框架,客户端模板)
4、前端开发的工作流程(代码检查,精简化,模块化CSS,LiveReload,调试)
5、编写测试(静态检查,单元测试)
6、跨浏览器、跨设备的解决方法(不同分辨率,不同厂商)
7、会根据项目的特点选择不同的前端技术栈(移动端,Web站点,响应式设计等)
在有了基础的HTML/CSS/JS技能之后,你会尝试做的更好:
1、如何更高效的操作DOM
2、如何将CSS写的更加清晰易懂
3、如何编写更加易于维护的代码(更有意义的单元测试)
4、如何组织大型的项目结构,模块化,组件化等等
这些要求事实上已经不那么容易做到了。它可能会花费你2到3年时间来全掌握。但是2到3年之后,即便你已经成为了一个“合格的”前端工程师,这也还远远不够。在现实世界中,一个软件产品除了前端,还有非常广阔的空间,还有很多有趣的东西值得学习:
1、HTTP协议本身(缓存,鉴权)
2、Web容器/HTTP服务器如何工作
3、无状态的Web应用的工作原理(如何让网站正确地运行在集群上)
动态,静态内容如何分离部署(反向代理配置)
4、安全机制如何配置
5、监控机制如何配置
有了这些,也算是有点端到端的意思了。这时你也已经不是一个“纯前端”工程师了,系统中的大部分问题你都可以搞定,不过日常工作中可能更多的职责还是做前端的开发。但是这些还不够,软件除了交付之外,还有一些非功能性的需求:
1、端到端测试(UI测试,比如selenium server/web driver)
2、devops(比如数据库环境,测试服务器,CI服务器的自动化provision)
3、基本的UI设计原则(在某些页面确实的情况下,根据系统的已有UI做设计)
4、数据库性能优化
5、性能测试
这时候,你才能算是一个严格意义上的“前端”工程师。可见要想成为一名优秀的Web前端工程师是需要经历一番历练的,有基础的人可以自学,没基础的需要参加Web前端培训课程,这样学起来更方便。