Web前端开发最佳实践(1):前端开发概述

我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法。可以说,博客园是我参与技术讨论的一个主要的平台。在这其间,随着接触技术的广度和深度的增加,也写了一些得到了大家认可的技术文章,多篇文章也得到了编辑推荐。大家的认可也更激发了我写技术文章的热情,借助公司在博客园的账号葡萄城控件技术团队博客发布了多篇有关Web前端开发的文章,尤其是如下三篇前端开发最佳实践相关的文章引来了大家的热烈讨论:

前端代码标准最佳实践:javascript篇

前端代码标准最佳实践:CSS篇

前端代码标准最佳实践:HTML篇

也正是这三篇文章的编写促成了我的新书《Web前端开发最佳实践》的出版。多年来技术的长进都得益于在博客园技术社区的讨论和借鉴前辈们的技术思想。得益于社区,也应该回馈社区,所以从今天起,计划在博客园发布前端开发相关的系列文章,和大家讨论我所认为的Web前端开发最佳实践方法。本文为开篇,简单介绍前端开发的一些概念和方向,后续将依次从HTML、CSS、JavaScript、移动端开发为主体展开讨论。

Web前端开发需要具备的技能

由于Web前端技术兴起的时间不长,因此还没有明确的界限定义,不同的Web项目中可能要求的Web前端开发技术会有所不同。比如,某些项目可能需要前端开发人员了解一些后端技术,这样前端开发人员才可以更好地与后端开发人员配合,比如在页面上留下一些后端需要调用的钩子等,而某些项目可能需要前端开发懂一些UI设计、Photoshop工具的使用方法等,以便于和UI设计师沟通和配合。尽管Web前端开发的范畴广泛,并且界限模糊,但是以下7点则是Web前端开发必备的技能。

1. 页面标记(HTML)

由于页面HTML代码结构基本固定,HTML的标签数量也不多,所以从学习的难易程度来说,HTML应该是前端技术中非常容易上手的技术。即使是一个新手也能在较短的时间里学会并编写一个结构良好的页面来。虽说入门容易,但是要编写语义良好、简洁整齐的HTML代码则需要大量的实践学习才能掌握。HTML是页面的基本结构组成,是网站的基础,臃肿混乱的HTML代码不但会影响其本身的展现,而且与其对应的CSS和JavaScript代码也会变得难以编写和维护。

2. 页面样式

CSS 是 Cascading Style Sheets(层叠样式表)的简称。在标准页面设计中,CSS负责网页内容的表现,所以CSS也是前端开发需要掌握的核心内容。丰富的CSS样式能让平淡的HTML展现出绚丽的效果,使得页面更为友好。好的样式可以让用户在页面上停留的时间更久一些,也可以帮助用户更好地阅读网站内容,同时,还可以让用户在不同浏览器上有着相同的体验。CSS和HTML代码一样,没有复杂的逻辑,上手也比较容易。其主要的难点在于如何合理利用CSS的组合和继承特性来编写简洁、可维护性好的CSS代码。以上这两项基本技能是前端UI开发必备技能。

3. 前端编程

前端编程技能主要指定是JavaScript编程。JavaScript是一种居于对象和事件驱动的客户端脚本语言,是页面实时动态交互的技术基础。相较于HTML和CSS,编写JavaScript代码更能让前端开发人员找到后端程序员的感觉。JavaScript是非常灵活的脚本语言,包含了高阶函数、动态类型以及灵活的对象模型等强大的语言特性,当然,JavaScript的灵活性也导致代码不易维护。此外,浏览器的兼容性也增加了JavaScript编码的难度。同一个功能,可能在不同的浏览器中有不同的实现, 例如,在IE浏览器中事件绑定使用的是attachEvent()方法,但其它浏览器则使用的是addEventListener()方法。开发人员在熟悉JavaScript基本语法和基本的编码规范之外,还应该掌握在不同浏览器中JavaScript的兼容性问题。另外,作为前端开发工程师,必定会涉及后端的编程,一些原因是目前流行的Web编程方式会有部分后端代码存在于前端页面中,和前端的HTML、JavaScript等混合在一起,比如PHP、JSP、ASP.net等,所以前端工程师也有必要了解一些后端编程技术。

4. 跨平台,跨浏览器

前端代码本来是不存在跨平台方面的问题,但是随着移动Web平台的兴起,跨平台的问题就逐渐显现出来了。移动设备如智能手机和平板电脑在近几年发展迅猛,用户通过移动设备访问Web站点的比率也是逐年增高。如何在众多移动平台、众多屏幕尺寸上展现友好的Web站点成为了一项前端技能。不过,目前跨浏览器没有像几年前表现得那么突出了,这要归功于IE6、IE7浏览器的占有率快速下降和众多浏览器对标准的重视,另外目前流行的前端框架已经很好地处理了浏览器的兼容问题。尽管如此,但是还需要熟悉常见的浏览器兼容方法,主要包括:IE7、IE8的兼容,HTML5中新特性的兼容等。

5. 前端框架

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwssxp.html