Web前端开发技术与学习探讨

2016-10-10李强

长治学院学报 2016年2期

关键词：插件开发者浏览器

李强

（山西机电职业技术学院信息与管理工程系，山西长治046011）

Web前端开发技术与学习探讨

李强

（山西机电职业技术学院信息与管理工程系，山西长治046011）

Web前端开发越来越受到IT从业人员和互联网企业的关注。优秀的Web前端开发工程师一直是互联网行业HR竞相追逐的人才。文章从Web前端开发的核心技术出发，对web前端开发的主流技术及特点作了综述，并对Web前端开发工程师应具备的技术能力和学习方法做了探讨。

Web前端；学习；HTML5

1　概述

Web前端开发从网页制作发展而来，在这之前，网页设计师使用Fireworks、Dreamweaver等工具就可高效率地制作网页。但在web2.0时代，网页的内容更加生动、丰富、高度交互，这就对前端开发人员提出了更多更高的要求。文章以开发Web前端所需要的核心技术：HTML、CSS和JavaScript为基础，参考拉钩网上web前端开发工程师岗位要求，对Web前端开发的主流技术做了综述，并分享了个人的一些学习方法和心得，希望对有意从事Web前端开发的同学们有所启示和帮助。

2　Web前端开发技术综述（HTML5　、CSS、JavaScript、jQuery、Bootstrap、Ajax）

对于前端开发，业内有这样的说法：“html是内容，CSS是表现，JavaScript是行为”。HTML、CSS、JavaScript是Web前端开发的三大技术核心，在此基础上延伸了大量的插件、框架和模板和开发工具，诸如JQuery、Bootstrap、Ajax等，它们的引入丰富了Web前端的交互内容，提高了Web的开发效率。以下分别就这些技术和工具加以介绍。

2.1HTML5

HTML5是继HTML4.01和XHTML1.0之后最新版本的超文本标记语言。它由一群自由思想者组成的团队设计，并最终实现多媒体支持、交互性、更加智能的表单，以及更好的语义化标记，它是web前端开发需要掌握的首要技术。

HTML5较早期版本具有以下的优点。

（1）更具包容性

相对于XHTML2.0要求遵循规则，否则不予显示的方式，HTML5显得更包容。它实行“不破坏Web”的原则。也就是说，以往已存在的Web页面，还可以保持正确显示。

（2）用户至上

HTML5遵循“用户至上”的原则，在出现具体问题时，会把用户放在第一位，其次是开发者，然后是浏览器厂商，最后才是规范制定者。

（3）化繁为简

HTML5对比之前的XHTML，做了大量的简化工作：①以浏览器的原生能力代替复杂的JavaScript；②DOCTYPE被简化到极致；③字符集声明被简化；④简单强大的API。

（4）无插件

在HTML5出现之前，很多功能只能通过插件（如Flash插件）来实现，而使用插件有很多问题。HTML5原生提供了这些支持，这给开发人员带来了更多的便利。

（5）引入语义

HTML5引入了一些用来区分不同含义和内容的标记元素。这样做极大提高了代码的可读性和代码区域查询的便利性。

（6）引入原生媒体支持

HTML5支持在浏览器中直接播放视频和音频文件，以前都需要借助插件才能实现此类功能。

（7）引入可编程内容

HTML5最大的变化就是引入了之前需要通过JavaScript编程才能完全的各种效果，现在这些都是原生的。HTML5可以理解为HTML+CSS+JavaScript的总称。

2.2CSS

CSS即层叠样式表（Cascading StyleSheet），使用它可以对页面的布局、字体、背景、颜色、边界和其它效果实现精确控制。CSS3是CSS技术的最新版本，使用样式表可轻松将页面内容与表现分离，便于修改，降低了维护成本。这时的网页布局也从表格嵌套布局发展到了DIV+CSS阶段。

Div+CSS的页面布局有很多优点：相比表格布局，Div+CSS布局方式能大大缩减页面代码，提高页面浏览速度；代码结构也更清晰，更易被搜索引擎收录；并且CSS3兼容性好，且与web标准规范的发展趋势相符，它几乎支持所有的浏览器；缩短改版时间；代码干净利落，具有强大的字体控制和排版能力。

2.3JavaScript

JavaScript是一种面向对象的、解释型的程序设计语言。是一种基于对象和事件驱动的脚本语言，它不需要在一个专门语言环境下运行，只要浏览器的支持即可。它的主要功用是在客户端进行数据验证，而不是提交给服务器，由于是在客户端完成，这样减少了对服务器的频繁访问，提高了效率，节省了带宽。同时实现了交互、增强了用户体验度等。比如：网站在注册新用户时，通常要检测用户名输入的有效性以及两次密码输入是否一致，假若这些功能都发回给服务器判断处理，随着在线用户的增加，服务器将不堪重负，耗费大量网络带宽，延缓系统响应，降低用户体验满意度。

2.4jQuery框架

jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。它是由John Resig，于2006年创建的一个开源项目发展而来，随着越来越多开发者的加入，jQuery具有了集JavaScript、CSS、DOM和Ajax于一体的强大功能。利用它可以用最少的代码，完成更多复杂而困难的功能，它受到越来越前端开发人员的青睐。

jQuery作为JavaScript封装的库，它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点：

（1）像CSS那样访问和操作DOM；

（2）修改CSS控制页面外观；

（3）简化JavaScript代码操作；

（4）事件处理更加容易；

（5）各种动画效果使用方便；

（6）让Ajax技术更加完美；

（7）基于jQuery大量插件；

（8）自行扩展功能插件。

2.5Bootstrap

Bootstrap提供了优雅的HTML和CSS规范、丰富的元素和组件，它使形式和功能达到很好的结合。Bootstrap最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC、PAD、以及手机移动端的页面访问。

Bootstrap的流行，得益于它非常实用的功能和特点，列举如下：

（1）跨设备、跨浏览器：Bootstrap可以兼容所有现代浏览器，包括比较诟病的IE7、8。

（2）响应式布局：Bootstrap可以根据实际显示页面的大小，实时调整页面布局。不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示。

（3）提供的全面的组件：Bootstrap提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

（4）内置jQuery插件：Bootstrap提供了很多实用性的jQuery插件，这些插件方便开发者实现Web中各种常规特效。

（5）支持HTML5、CSS3：三者可以完美配合。

（6）支持LESS动态样式：LESS使用变量、嵌套、操作混合编码，编写更快、更灵活的CSS。LESS与Bootstrap可以很好的配合开发。

2.6Ajax

Ajax是“Asynchronous JavaScript And Java XML”的缩写（即：异步JavaScript和XML），它并不是一门新的语言或技术，实际上它是几项技术按一定方式的组合。这个组合包括：使用XHTML和CSS标准化呈现；使用DOM实现动态显示和交互；使用XML和XSLT进行数据交换与处理；使用XML-Http Request进行异步数据读取；使用JavaScript绑定和处理所有数据。

传统的（指不使用Ajax）网页，如果需要更新内容，就必须加载整个页面。而Ajax则是按需加载数据，无需刷新整个页面，就可实现网页的部分更新。Ajax把原来由服务器端完成的工作转移到了客户浏览器端，减少了用户心理和实际等待时间，带来更好的用户体验，同时促进了页面呈现与数据的分离。

3　Web前端开发技术学习方法

3.1要深刻理解技术的本质，必须动手亲身实践

“纸上得来终觉浅，绝知此事要躬行”，学习web前端技术也是这样，只是一味地在课堂上听老师讲、看书，或者看一些学习视频效果并不会太好，一定要通过实践来检验和深刻理解所学知识，才能快速提高实战水平。

3.2保持良好的习惯

一定要坚持手写代码，不要急于借助Dreamweaver之类的web开发工具。保持良好的文档结构和编码风格，代码命名要规范，尽量使用语义化的标签，重视代码优化，长期这样做不但利于将来团队协作，更能培养编写高质量代码的能力。

3.3学会从网上获取学习资源

多多搜集和整理国内外的资源站点和技术论坛，提高自主学习能力。万维网是个大宝库，搜索引擎是学习的好帮手。互联网上有丰富的学习资源等待你去利用，像ycku.com，XinRan001.com等站点都是不错的去处。如今，网络微课程结合智能手机让人随时随地进行学习，这里推荐知名讲师李炎恢的相关视频课程供大家参考学习。

3.4努力掌握一门后台开发技术

由于大多数的网站都是动态的，前端开发人员一定要和后台开发人员一起协作才能完成一个项目，只掌握Web前端技术还不够，掌握一门如php、C#、Java的后台开发技术，你将是一个不可多得的IT精英，为了团队配合，至少也应了解这些后台开发技术。

3.5学习UI（User Interface）方面的技术

熟话说：“艺多不压身”，软件公司总是希望自己的员工像孙悟空一般样样精通，对于大公司来说，通常都有专门的UI设计师，但小公司顾及成本，UI工作常常由前端工程师代劳。如果一个web前端工程师可以独立完成UI的设计，一定会让老板对你器重有加。