如何成为优秀的前端攻城师 (V客学院知识分享)

什么是前端呢?大部分人都停留在‘前端就是切页面,而且页面开发没什么技术含量,很简单!’,事实上前端不仅仅只限于此。

不同时期对互联网技术的看法是不一样的,对前端的认知一也是不一样的。在互联网早期时,小车还是比房子贵的,烧饼和粉丝还只是用来吃的,菊花还只是用来泡茶的。那时的页面设计风格相对单一,对应的页面需求比较简单,并且当时的浏览器也基本是IE6的天下,javascript也只是网页特效的代名词,HTML页面本身没有引起太多人关注,似乎只要能用div甚至table加css辅助把图片定好位,把页面内容预留好就OK了,所以我们不能把认知停留在过去,随着互联网的发展,前端技术早已发生天翻地覆的改变。交互复杂性的增加,AJAX的应用,浏览器的更新换代,移动端的应用等等。

优秀的前端需要具备那些?

实现效果图是最基本的工作

把视觉稿通过页面代码的方式表现出来包含两个基本诉求:1. 能够真实反映视觉稿;2.能够通过浏览器的兼容。这两个诉求的达成需要我们有追求细节的态度和一定的页面功底,能完成这两个内容就可以初步进入页面前端的从业者行列了,但这仅代表前端工作才刚刚开始!

项目的参与的沟通

沟通很重要。前端开发除了要与设计师参与沟通外,还有跟后台程序编码进行沟通。可谓是 UI 跟后台的一个中间桥梁。

良好的页面结构

页面结构的编写好比盖房的地基建设,其好坏会直接影响到CSS代码的质量、js开发、后台开发还会影响到以后的页面拓展、迭代和页面调整。拿到视觉稿后,不要忙着动手开始,多观察思考。先分析布局,划分框架,然后规划结构,编写代码。特别在大型项目中,合理使用模块化的开发不论从整体进行还是拓展维护都有相当大的好处。

关于hack

很多同学在页面开发时上网搜索最多的就是hack了,是否我们完全要依赖hack来实现页面兼容性,答案是否定的。大家经常比喻IE6向我们撒了一个谎,结果我们要再撒一百个谎来圆这个谎。不否认IE6经常让我们口吐鲜血,但不代表我们用更多的“谎言”来弥补就可以心安理得。大部分情况下可以通过变换思路调整HTML结构,或使用一些虽然无法解释但相对安全的css来干掉hack。谁都无法预计使用hack什么时候会让我们栽一个大跟头。比如触发layout或position:relative就可以帮助解决很多IE6的问题。

优美的代码

现在很多web项目功能复杂,代码规模也变得很庞大,如何更好地进行协同开发和维护是我们面临的一个问题。需要考虑完善统一的规划,还有要养成良好的代码开发习惯才会在面临各种情况时游刃有余。翻阅页面代码,看到合理的标签使用、良好的注释、清晰的代码结构、用意准确的css,不仅犹如欣赏一个艺术品,更为下游开发和协同开发降低了不小的沟通成本,我们有什么理由不去这么做呢?举个反面例子:div滥用是现在比较典型的一个问题。数数看自己使用的标签有多少个呢?不同的语义都该使用对应的标签代码,特别是HTML5提供了更丰富的语义化标签,它们都苦苦地在等待战场上的冲锋号,让我们去解放它们吧!

无障碍页面开发

可访问性与易用性是非常主观且人性化的东西。普通人看上去上完美呈现的页面在特殊群体中不一定显得那么贴心。当盲人用读屏软件在页面某个区域内陷入循环时,我们应该感到内疚。只能说目前国内网站对此的重视程度还远远不够,这就需要我们共同努力,让更多的人感受到我们的热情。

保障效率

作为项目开发中比较靠前的一环,页面开发可能需要尽早完成为项目争取时间,这就需要我们尽可能提高效率。“工欲善其事,必先利其器”,除了实战经验和代码习惯的形成可以帮助我们提高效率外,想要提高对自己开发的进度掌控能力,还有很多辅助工具帮助我们进行页面开发。比如使用Less或Sass可以帮助我们拓展和组织CSS,大大提高CSS的编写效率,增加可维护性。比如可以通过zen coding的自动完成和自定义代码块让你可以剑指如飞。甚至还见过通过自定义输入法的代码块关键字来提升开发速度的。多多发掘,一定会找到最合适自己使用的工具。

针对服务器的优化

页面开发也需要了解服务器优化,尽量减小服务器负担。比如css sprite就是一个典型减小服务器请求数的例子。在网易邮箱的页面前端开发中大家不停地做着各种优化,比如一直在寻求文件大小与服务器请求数的平衡;为了尽可能提高缓存利用率采用了补丁升级;对class名进行了混淆压缩避免命名过长的冗余;应用base64减少请求数量等等措施。这些都是综合权衡的结果,需要考虑各个方面整体优化。因为当页面访问量达到一定的数量级时,再小的一点优化都会达到可观的效果,再小的问题都可能会形成巨大的灾难。

拥抱HTML5

这是一个充满机会的时代,HTML5时代的来临伴随着移动互联网的兴起,创造了更大的机会,还有太多的东西值得我们去学习去发现。HTML5提供了丰富的JS API接口,需要我们去研究;CSS3的绚丽吸引了足够多的眼球,需要我们去研究;移动设备上如何开发更加适配的页面,需要我们去研究……

总之一句:‘learn little  use every where’.

(PHP开发、web前端、UI设计、VR开发专业培训机构--V客IT学院版权所有,转载请注明出处,谢谢合作!)

时间: 2024-10-28 18:40:15

如何成为优秀的前端攻城师 (V客学院知识分享)的相关文章

前端工程师在实在支付功能的时候能做些什么(V客学院技术分享)?

现在最流行的两种支付微信支付和支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及. 一.业务逻辑 (电商平台为例子) 支付大部分用在电商平台,各种打赏,游戏充值等等,只要涉及到支付,就一定会有订单逻辑: 1.用户选择产品后进入提交订单流程 ----> 生成订单 (待付款) 2.生成订单后进入支付流程 --->选择支付方式(支付或者微信) 3.唤起对应的支付应用程序,用户确认金额并支付,支付成功后 ----->完成订单 (已付款): 在这个过程中,前

如何成为一名优秀的web前端工程师(前端攻城师)?

我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括

一个在校java攻城师的学习计划

首先自我介绍一下,我是来自杭州的一名普通的计算机本科生,今年大三.近期呢,由于机缘巧合被一家公司收留,成为一名苦逼攻城师实习生.真的苦逼啊!以前上学的时候,多少幸福啊,现在每天7点多到晚上8点才能回到寝室.废话不多说了,啪啪啪地有点说远了.写这篇博客是想列一下接下来准备深入研究下的一些技术. 1.java设计模式(我靠,我以前在没学之前感觉好牛逼啊,设计模式一听就是大牛要接触到的东西,奈何现在实习面试中也经常看到这样一条要求:熟悉各种设计模式!) 2.j2ee(我想深入研究一下servlet,之

掌握11项技能,你就是优秀的前端开发project师

导读: 你或许会认为前端开发是一个非常easy的工作,对呀,你就是刚刚从网页设计转型过来的.但当你深入当中时,一定会发现好像前端开发不是那么简单,光站点性能优化.响应式.框架就让你焦头烂额, 确实,做前端开发就是先易后难,想成为一个优秀的前端开发,没有那么简单. 只是,天下事难则不会,会则不难,你仅仅须要掌握11项技能就能够成为前端"大拿",以下,就告诉你这11项技能是什么?以及每项技能的要点,最后是相关的专业图书. 入门必备的技能: 第1项技能:HTML超文本标记语言: 技能要点:

零基础前端攻城狮养成计划

本喵至今已经做了一年半的前端了,还不能自封前端大牛,但是也算是入门了~这段时间里,从一个测试实习生到写文案,到成为一枚前端实习并入职正式工作一年.对于前端知识来讲可以说是从0开始了~得到过大牛们指点,踩过很多坑,自己也在不断的摸索着,学习着,成长着. 先说说自己目前的技术能力,给想要入门前端的小白们一颗定心丸~ 现在自己差不多3个小时可以切出一个兼容PC端和移动端的活动页面:一个和后端有交互并有表单验证的功能基本上1天就可以完成:一个没有见过的插件,看看文档就可以愉快的使用了:自己亲手写过两个插

【大前端攻城狮之路·二】Javascript&QA?程师

今天给大家分享的主题的是Javascript&QA?程师.看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还需要关心这些?但事实上呢,测试是前端开发非常重要的环节,也是迈向高级前端工程师的必经之路! 本文主要分为一下四个部分: · 单元测试 · 性能测试 · 功能测试 · 安全测试 一. 单元测试 单元测试(unit testing),是指对程序中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,J

前端开发攻城师绝对不可忽视的五个HTML5新特性

本文固定链接:http://www.verydemo.com/demo_c101_i62930.html 日期:2013-7-2??来源:GBin1.com HTML5已经火了一段时间了,相信作为web相关开发project师,肯定或多或少的了解和尝试过一些HTML5的特性和编程. 还记得曾经我们介绍过的HTML5新标签. 作为未来前端开发技术的潮流和风向标.HTML5绝对不容忽视. 在今天这篇技术分享文章中.我们将介绍几个HTML5的重要特性.能够帮助你提高整个web应用的使用体验和开发效率,

作为 .Net 攻城师,所必需掌握的 .Net Profiling 技术

众所周知,性能问题是所有实用应用在迭代过程中必然要面对的问题.对于此类问题,简单地投入更多硬件资源的做法可能会取得一定效果.但总的来看,此类做法的边际成本是不断上升的.换言之,随着性能需求的上涨,要换取同样的性能提升,仅凭硬件升级所需要的成本会越来越高.故而性能优化是每一位运维/软件开发人员必须掌握的技术. .Net Profiling 在进行应用性能优化实践时,首先面对的就是热点定位,即确定那些带来巨大资源耗散的代码位置.而在不借助外部工具的前提下,定位资源热点是一件相当困难的事.它需要当事人

java攻城师之路--复习java web之jsp入门_El表达式_JSTL标签库

JSP 技术掌握:JSP语法 + EL + JSTL 为什么sun推出 JSP技术 ? Servlet 生成网页比较复杂,本身不支持HTML语法,html代码需要通过response输出流输出,JSP支持HTML语法,生成HTML方便. JSP技术与Servlet 技术区别和关系?JSP和Servlet技术都是用来动态生成网页的,Servlet不支持HTML语法,生成网页麻烦,JSP支持HTML语法,生成网页方便,JSP运行时翻译Servlet 执行的.JSP 就是 Servlet . JSP运