前端规范说明文件.docx

《前端规范说明文件.docx》由会员分享，可在线阅读，更多相关《前端规范说明文件.docx（15页珍藏版）》请在冰豆网上搜索。

前端规范说明文件

规范的目的

规范不是标准，在不同公司代码规范是有差异的。

规范的作用只是让同一个团队代码风格统一，减少协作时的复杂性，便于前端开发人员输出更易维护、更高性能与更安全的前端代码，特定制该文档。

本文档一经确认，前端开发人员必须按照本文档规范进行前台页面开发，本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档.

WEB前端人员具备如下7点技能：

1、页面标记语言：

编写语义良好、简洁的HTML代码。

2、页面样式：

合理的利用CSS的组合与继承特性来编写简洁、可维护性好的CSS代码。

3、前端编程：

JavaScript是一种基于对象与事件驱动的、灵活的脚本语言，是动态交互的技术基础。

开发人员在熟悉语法与编码之外，还需要了解并解决在不同浏览器中的JavaScript兼容问题。

4、跨平台、跨浏览器：

如何在众多移动平台、众多屏幕尺寸上展现友好的WEB站点。

虽然目前前端框架已经解决了大部分兼容问题，还是需要了解熟悉常见的浏览器兼容方法，主要包括：

IE8的兼容，HTML5中新特性的兼容。

5、前端框架：

前端框架很大程度上降低了前端开发难度。

作为前端工程师需要熟悉一些常用的框架的使用方法，并且要了解如何编写常用框架的扩展插件。

6、调试工具：

常用浏览器自带调试工具。

7、沟通能力：

WEB前端开发介于UI设计与后端逻辑开发之间。

因此WEB前端在开发中必定会与UI设计及后端开发合作。

前端开发需要与UI设计沟通，确定效果是否可以实现及实现的代价，并对UI设计提出建议；还需要与后端开发沟通，确定前后端交互的接口以及传输的数据实体结构等。

良好的沟通会让这些过程变得轻松。

前端代码规范主要针对的是HTML、CSS与JavaScript代码。

规范的前端代码应该具有以下特征：

1、符合标准：

所谓的标准指的是W3C制定的Web标准。

主要由3个部分组成：

结构标准、表现标准与行为标准。

a）结构标准包含XML、XHTML、HTML标准。

HTML5是XHTML与HTML的最新标准。

目前使用的标准是HTML5标准；

b）表现标准主要是指CSS样式标准，目前使用的标准是CSS3；

c）行为标准主要包括ECMAScript与DOM标准，目前使用的ECMAScript标准是ECMAScript262第5版，DOM标准是DOM级别2。

2、格式规范统一：

前端代码格式主要包括命名、代码缩进、空格与空行的使用及代码注释。

a）命名主要有HTML元素ID与Class名，JavaScript中函数与变量的命名；

b）HTML、CSS与JavaScript代码中都需要缩进代码来表达代码层次关系；

c）空格与空行主要用在CSS与JavaScript中，用来提高代码可读性；

d）CSS与JavaScript代码中都需要添加必要的注释来解说代码文件及代码片段，HTML代码中使用注释的情况比较少。

3、高性能：

高性能表达在浏览器的响应速度上，包括网页的加载速度与页面的交互响应速度。

网页加载所占用的时间包括后端处理请求的时间、代码从服务器端传输的时间、HTML与CSS组合展现的时间以及JavaScript加载与运行时间。

规范的前端代码针对这些方面来编写高性能的前端代码。

提高用户前端体验。

4、高安全性：

是指跨站点攻击、CooKie劫持。

这些攻击通过设置javascript变量、HTML标签的值与属性，CSS属性值等方式伪造恶意代码来达到攻击的目的。

因此，规范的前端代码至少要针对这些方面做必要的安全校验与编码，提高代码的安全性。

高效的前端开发

1、前端代码的结构组织与文件命名：

在同一个项目中代码的组织结构一定要清晰，同类型的代码文件或者相同模块的代码文件尽量归类到相同的文件夹中，文件的命名规则须统一并且命名要有意义。

a）代码文件组织结构：

前端代码主要包含javascript、CSS、HTML等文件，以及这些代码相关图片、Flash、音视频等资源文件.合理的组织文件，既要考虑结构清晰，还要考虑代码复用。

惯用做法是同类文件放在一起，并按照模块划分文件结构。

b）代码文件的命名：

原则上需要表明文件对应的模块内容、对应的版本号、与文件的格式等。

如果文件为子模块文件则在文件名中用点号或者短横线来表明父子关系。

i.jQuery-2.0.0.min.js

ii.Bootstrap-responsive.css

2、合理使用框架：

JavaScript框架是JavaScript代码的工具集与函数集，一般包括DOM元素的操作、DOM事件的封装、AJAX操作、UI控件封装以及一些功能算法扩展等。

成熟的JavaScript框架已经经过了大量得功能测试、性能测试，也经过各主流浏览器的兼容测试，在项目中应用前端框架，不仅加快了项目的开发速度，同时避免了出现各种浏览器的兼容问题。

由于框架的功能侧重不一，给项目选择合适的框架，需要要考虑如下几点：

a）项目的需求：

调查项目是否需要使用ajax操作、模板化、数据传输方式、浏览器支持、平台、UI模块

b）项目的特点：

团队技术能力、项目开发周期、是否长期维护

c）框架特点：

框架是否满足需求、性能能否接受、是否持续开发中、技术文档与示例是否充足、是否有技术支持、是否有版权问题。

3、浏览器支持：

a）为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示（Y为支持，N为不支持）：

b）设定浏览器支持标准

A级－交互与视觉完全符全设计的要求

B级－视觉上允许有所差异，但不破坏页面的整体效果

C级－可忽略设计上的细节，但不防碍使用

4、开发调试

a）IDE：

WebStorm、VisualStudioCode、SublimeText、HBuilder；

b）调试工具：

浏览器自带测试工具；

c）性能分析：

浏览器自带测试工具；

d）代码压缩：

Grunt、webpack

5、前端代码基本命名规范与格式规范:

命名规范与格式规范是代码规范中最基本的规范，任何代码的混乱都是从命名与格式的混乱开始的，而有意义明确的命名与规整的代码格式则提高了代码的可读性与可维护性。

a）Html

i.所有的HTML标签使用小写，属性值应该使用双引号闭合。

ii.class与id命名规则则根据语义与DOM树的层级关系来定义合适的名称。

名称中全部使用小写。

id名称中的关键词用下划线（_）连接。

class的关键词使用中划线（-）连接。

iii.如果class名称仅作为JavaScript调用的“钩子”，则可以在名称中添加“js”前缀。

iv.HTML代码层级缩进为2个空格。

如果元素包含子元素，则此元素对应的起始标签与闭合标签分别单独占用一行。

v.HTML注释，添加的原则是在保证代码维护性的基础上尽量让HTML代码简洁。

页面公用部分、页面经常变化的部分（广告栏等）及需要后端代码注入的部分添加注释。

注释添加的位置在要注释的代码上部并且单独占用一行。

b）CSS

i.CSS类的命名规则与元素的id命名规则相似，只是组成类名称的关键字连接符号位中划线。

ii.CSS定义中大括号放置在选择器同一行，并且与选择器之间添加一个空格分开。

在样式声明中，属性名称与属性值之间用一个空格隔开。

iii.多个选择器具有相同样式声明时，每个选择器应该单独占一行。

iv.样式声明的顺序按字母顺序排列。

v.样式定义按照模块来分组，相同模块的样式定义放在一起，不同模块的定义之间用一个空行分割。

vi.CSS中添加注释有两种类型：

文件信息注释与正文解说注释。

文件注释一般包含文件版本、文件版权以及作者。

解释说明性的注释有给模块的注释与单独选择器的注释。

模块注释需要添加模块开始与结束的定义解释。

c）JavaScript

i.JavaScript局部变量命名采用首字母小写，其他单词首字母大写的方式。

命名时尽量采用有意义的单词名称。

ii.原则上公有接口的命名为首字母大写，私有接口的命名为首字母小写。

iii.jquery框架在项目中使用广泛，推荐给jQuery类型的DOM变量添加“$”前缀。

iv.左大括号应该在行结束位置，不应该单独一行。

即使逻辑只有一行代码，也应该用大括号括起来。

v.JavaScript定义字符串使用单引号。

vi.空格的作用是提高代码的可读性。

函数参数逗号后面、操作符前后、JSON属性与值之间、方法名称与方法体之间都使用空格分割。

另外使用一个空行区分业务逻辑段。

vii.JavaScript注释与CSS注释相似，也是文件信息与代码逻辑注释。

代码注释必须单独占一行。

如果注释未占多行使用双斜杠“//”注释。

HTML

标准的HTML代码

1、标准的HTML页面结构

标准的HTML包含两个部分：

“head”与“body”，为了使得HTML文档能兼容标准格式，还需要给文档添加一个文档类型声明（dtd）,当浏览器解析HTML文档时会遵循制定的类型声明标准。

Head部分包含文档编码、标题、关键字、介绍、作者、样式文件等关键信息。

Body部分则包含了所有在浏览器展示的内容，如文本、图片、表格、音视频等。

DOCTYPEhtml>

templetpage

thisisaDemopage!

2、正确闭合HTML标签

HTML元素的内容模型定义了元素的结构，定义了元素可以包含哪些内容及拥有哪些属性。

但有些元素是空元素，不能包含任何内容，被称为自闭合标签。

自闭合标签有：

area\base\br\col\command\embed\hr\img\input\keygen\link\meta\param\source\track\wbr

自闭合标签是否应该添加符号“/”，在XHTML1.0、HTML4.01与HTML5中稍有不同。

XHTML中必须添加符号“/”。

HTML4.01中不推荐添加符号“/”。

HTML5中加不加都可以。

HTML中禁止交叉嵌套标签。

通过代码层次缩进能够最大化避免标签交叉嵌套。

3、停止使用不标准或过时的标签与属性，简化HTML代码

W3C在制定的HTML4与HTML5标准中有独立的章节来说明那些是不被推荐与过时的标签与属性。

4、样式与结构分离

5、添加必要的标签

元素有4个属性：

name、http-equiv、content与charset。

通过name属性表述文档的元信息，通过http-equiv属性设置http请求指令，通过sharset设置文档字符编码。

按照属性设置标签可以分为三类：

a）name与content属性组合，构成名称/值对，用于描述网站信息。

名称包括application-name\author\description\keywords等。

b）http-equiv与content属性组合，设置特定的http指令。

http指令有content-type\default-style\refresh\content-language\set-cookie，前三中是已经确定的，后两种还未正式确定。

c）Charset属性，设置页面字符编码格式。

为了让浏览器准确识别页面编码，务必在