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

Web前端整体技术的发展和前端工程师个人的能力是相辅相成的。目前前端工程师大都是半道出家,一部分是从页面UI开发转行为Web前端开发的,一部分则是由后端工程师转行而来,所以前端工程师普遍是自学成才,并没有受过足够的专业训练,也缺乏实际的项目经验。

除了以上这些Web前端开发的外在环境外,Web前端在技术方面也存在着大量的挑战,大量旧的网站需要重构来提高网站用户体验和性能等。这些网站的前端代码普遍存在的问题有:代码组织混乱,CSS代码和JavaScript代码混合在HTML代码中;代码的格式问题突出,不够整洁;页面布局随意,HTML代码不符合标准;网站整体性能差,还没有意识到要去应用诸如缓存、动态加载、脚本压缩、图片压缩等提高性能的技术。

Web前端开发的现状可以概括为:前端技术发展迅速,但起步晚,基础薄弱;前端工程师热情高涨,但缺乏足够技能培训,对代码规范重视不足,对一些基础原理的理解不够深刻。

规范的web前端代码:更好维护、更好性能和更安全

规范的代码,这是所有软件开发中对代码的基本要求,前端开发也是一样的,要求写规范的HTML、CSS和JavaScript代码。

什么样的前端代码才能称的上是规范的代码?探讨这个问题之前,首先需要强调的是规范不是标准,不是放之四海而皆准的,不同的项目中的代码规范是有可能有差异的,比如命名,有些项目规定HTML标签的id必须要以控件的缩写名作为前缀。如按钮的id名以”btn”作为前缀,有些只是规定命名有意义就可以。再比如有些项目规定JavaScript代码语句结尾必须添加分号,但是有些项目并不要求,大名鼎鼎的bootstrap源代码中并没有给JavaScript语句结尾添加分号。所以规范的作用只是让同一个团队代码风格的统一,减少协作时的复杂性,确保后续的维护和修改方便。不同团队中遵循的规范有可能存在部分差异,但是在同一个团队中规范必须是统一的,团队中的成员应该严格遵循。澄清了规范的作用后,接着上面的问题来探讨什么才是规范的前端代码。

Web前端的代码规范主要针对的是HTML、CSS和JavaScript代码。尽管前端代码规范在不同场合会有差异,但是规范的前端代码应该具有如下的特征:

1. 符合标准

所谓的标准指的是W3C制定的Web标准,W3C制定的标准包括使用语言的规范,开发中使用的原则和解释引擎行为等。主要由3个部分组成:结构标准(Structure)、表现标准(Presentation)和行为标准(Behavior)。结构标准包括XML标准、XHTML标准和HTML标准,目前使用的标准版是HTML4.01标准,HTML5是HTML和XHTML的最新标准;表现标准主要指的是CSS样式标准,目前使用标准版的是CSS2,CSS3尚未发布最终版;行为标准主要包括ECMAScript标准和DOM标准,ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript),DOM是文档对象模型(Document Object Model)的缩写,是一个中立于语言的应用程序接口,容许程序访问并更改页面的内容、结构和样式。目前推荐遵循的是ECMAScript标准是ECMAScript 262第5版,DOM标准是DOM级别2,DOM级别3还没有发布正式版本。W3C推荐的这些标准受到了各浏览器厂商和IT互联网公司的欢迎,前端代码遵循标准则可以保证网页在不同浏览器上可以正常展现。

2. 格式规范统一

前端代码的格式主要包括命名、代码缩进、空格和空行的使用以及代码注释。命名主要有HTML元素的id和class名,JavaScript中函数和变量的命名;HTML、CSS和JavaScript代码中都需要通过代码的缩进来体现代码的层次关系;空格和空行主要用在CSS和JavaScript代码中,用来提高代码可读性,如操作符前后添加空格、不同代码段逻辑之间添加空行等; CSS和JavaScript代码中都需要添加必要的注释来解释说明代码文件及代码段,HTML代码中使用注释的情况较少。和其它代码格式规范一样,前端代码格式规范也是为了提高代码的可读性和可维护性。

3. 高性能

前端性能体现在浏览器的响应速度上,包括网页的加载速度和页面的交互响应速度。网页加载所占有的时间包括后端处理请求的时间、代码文件从服务器端传输的时间、HTML和CSS的组合展现的时间以及JavaScript加载和运行的时间。除了第一条,其余都和前端代码有直接的关系,减小文件传输时间的最直接的方式就是减小文件的大小,越小的代码文件相对传输就会更快;简洁和符合标准的HTML和CSS代码能减小浏览器解析的时间,加快浏览器渲染过程;页面中请求数量越少相对页面加载时间也会越快;JavaScript代码中选择性能更好的实现方案,如延迟加载、动态加载等技术,会让页面加载更快和交互更流畅。规范的前端代码应该针对这些方面来编写高性能的前端代码,提高用户的前端体验。

4. 高安全性

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

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