如何成为优秀的前端攻城师 （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学院版权全部，转载请注明出处，谢谢合做！）