前端规范说明文件Word格式.docx

前端规范说明文件Word格式.docx

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

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>

html>

<

head>

<

metacharset="

utf-8"

>

title>

templetpage<

/title>

linkrel="

stylesheet"

type="

text/css"

href="

my_style.css"

/head>

body>

h1>

/h1>

p>

thisisaDemopage!

/p>

/body>

/html>

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、添加必要的<

meta>

标签

元素有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属性，设置页面字符编码格式。

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

标签前设置charset。

保证标题能正确显示。

d）特定示例

i.IE浏览器兼容模式

metahttp-equiv=”X-UA-Compatible”content=”IE=edge,chrome=1”>

ii.移动端显示

metaname=”viewport”content=”width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no”>

高可读性的HTML

1、html语义化

HTML语义化，简单讲就是HTML的含义，从HTML代码中使用的标签本身就可以说明标签包含内容的含义，比如<

标签则代指包含的内容是标题。

HTML语义化是WEB网页标准化重要的一环。

语义化HTML能死搜索引擎更容易读懂页面代码。

高语义化的页面去掉CSS代码也能保持良好的外观，并且可以正常阅读。

编写高语义化的HTML代码有下列4条原则。

a）熟悉所有规范中的HTML标签，理解各标签的语义，在合适的地方使用合适的标签。

例如：

Hx>

系列标签代表标题，<

ul>

和<

ol>

表示列表等，还有HTML5新加入的标签，设计原则都是标签语义化。

如：

header>

\<

footer>

article>

nav>

等；

b）熟悉标签上规范的属性，给HTML标签设置必要的属性。

常用的alt\title\for属性。

c）样式和结构分离。

简洁的HTML代码会让语义更加明确。

d）给空标签添加隐藏文字，用于说明标签的实际功能。

2、如何设置网页标题层级

a）在页面标题部分使用<

b）页面中只使用一个<

c）<

标签使用过程中不要跳级使用

3、如何正确设计表单

a）表单使用<

label>

fieldset>

legend>

等标签组合表单，不要使用table

b）使用<

标签，并且设置标签的for属性

c）给输入控件设置合适的水印提示

d）如有必要，给输入控件设置tab顺序

e）使用HTML5总引入的表单控件。

如（url\email\date\search\number）。

高级浏览器已经针对这些控件做了易用性的增强，特别是移动端。

4、精简代码

在不影响页面语义的基础上精简代码，主要有一下三种精简方式：

a）删除多余的容器

b）装饰性的元素使用css样式实现。

如下三角等。

c）避免使用table布局。

5、过时的块状元素和行内元素

a）块状元素是指默认display值为block,而行内元素dispaly值默认为inline或者inline-block。

常见块元素有div\p\table\ul\ol\hx等。

常见行内元素:

span\img\a\em\input\select等；

b）HTML5中把HTML元素细分为7类

i.元数据式（metadata）内容：

base\command\link\meta等

ii.流式（flow）内容：

span\div等，这个分类基本包含了HTML4中的块状元素行内元素。

iii.章节式（phrasing）了内容：

article\aside\nav\section

iv.标题式（heading）内容：

hx\hgroup

v.段落式（secioning）内容：

span\img等，基本等同于HTML4的行内元素范围。

vi.嵌入式（embedded）内容：

img\iframe\svg\audio\video\canvas等

vii.交互式（interactive）内容：

a\button\select\input等

规范中还提供了一张各元素类型之间的包含关系图，如下图：

拥抱html5

2014年10月28日W3C发布HTML5正式推荐标准。

使用HTML5中的新标签

新标签主要分三个部分：

语义化标签、功能性标签以及新的输入控件类型。

Html5的标准HTML

/>

--HTML降级处理-->

--[ifltIE9]>

scriptsrc="

//

[endif]-->

headerid="

header"

/header>

navid="

navigation"

/nav>

sectionid="

main"

/section>

asideid=sidebar>

/aside>

footerid="

footer"

/footer>

语义化标签：

section\article\aside\hgroup\header\footer\nav\figure\fogcaption

功能性标签：

svg\canvas\audio\video

新的输入控件类型：

tel\search\url\date\email\number\range\color

HTML5新属性

1、script标签的async属性；

设置属性defer让脚本后置按顺序加载，设置async属性让脚本后置无序加载。

2、base标签的target属性；

指定页面a标签的默认窗口；

3、输入控件的placeholder\required\autofocus;

4、标签自定义属性data-*;

jquery框架已经实现了$（）.data（）方法获取自定义属性。

5、HTML5标签属性变化注意事项

a）i\b\u\small不在单纯的设置字体样式，而作为语义化标签，具体参照HTML5规范。

如果只是为了设置样式，应该使用CSS实现。

b）Script标签除了可以包含标签，还可以包含用户自定义的数据模块。

数据模块有HTML模板和XML数据等。

不要使用HTML5中已经废弃的标签和属性

1、标签仅仅设置样式外观，没有任何语义，而且这些标签可以使用CSS代替实现。

font\center等

2、标签破坏了可用性，该类标签包含frame\frameset\noframes

3、属性被移除的，常见的不规范属性：

a）Table\div\input\hx系列等标签中的align

b）Tr\td\th等标签的valign

c）img等标签的width和height

HTML5浏览器兼容

1、让浏览器识别HTML5规范中的标签。

引入相应兼容JS文件,主要通过document.createElement方法产生标签，和定义标签默认样式。

2、音视频兼容

a）音频浏览器支持格式列表

浏览器

版本

支持格式

IE

9.0+

MP3\AAC

chrome

6.0+

Ogg\MP3\wav（9.0+）

firefox

3.6+

Ogg\wav

safari

5.0+

MP3\aac\wav

opera

10.0+

b）视频浏览器支持格式列表

Mp4

Ogg\webM\mp4

Ogg\webM

CSS

高维护性的CSS

1、高效的组织css代码：

所有CSS都可以分为两大类：

通用类和业务类。

代码组织应该把通用类和业务类代码放置不同目录中。

目录结构如下：

Lib：

放置第三方库CSS文件

Imgages：

放置样式所有背景图片

Reset.css：

浏览器样式统一设置文件

Ie-style.css：

IE旧版兼容样式文件

Common.css：

放置通用模块样式和基础样式。

基础样式包括：

全局页面布局设置、字体设置、背景和前景色，也包括一些共有的class。

通用模块包括：

对话框、提示框、页面头部、页面底部、页面侧边栏等公用UI模块。

其余部分:

不同模块的样式放置于不同的模块文件夹。

模块分割颗粒度为每个模块样式文件行数不超过300行。

文件内部也要细化成更小的颗粒，相同的模块的样式声明放在一起。

不同模块之间应添加空行和注释说明。

模块内部样式声明规则：

按照元素层级关系声明样式。

同级声明则按照元素从上到下，从左到右关系定义样式。

多个元素则按照先公用后个性。

使用less和sass等动态样式语言能更好的实现如上规则。

2、CSSReset统一浏览器显示效果：

重置方案考虑内容如下：

a）HTML5中的新标签低版本浏览器默认样式重置；

b）浏览器差异主要由margin\padding和border三个的默认样式造成；

c）字体设置

d）其他元素的的样式重置

3、给css样式定义排序：

a）按照类型排序：

著名前端专家AndyFord把CSS属性分为7大类显示与浮动（Display&

Flow）、定位（Positioning）、尺寸（Dimensions）、边框相关属性（Margins\Padding\Border\Outline）、字体样式（TypographicStyles）、背景（Backgrounds）、其他样式（Opacity\Cursors\GeneratedContent）

b）按字母排序

c）按长度排序

我们使用CSScomb工具默认排序

4、合理使用CSS的权重：

提高代码重用性

a）权重高的CSS样式会覆盖优先级低的样式，如果权重相同，则依照“就近原则”。

注意样式位置靠下的为近。

b）从CSS代码存放位置看权重优先级：

内嵌样式>

内部样式表>

外联样式表。

其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。

c）从样式选择器看权重优先级：

important>

内嵌样式>

ID>

类|伪类|属性选择>

标签|伪对象>

继承>

通配符。

d）CSS权重计算规则

i.Important0,1,0,0

ii.选择符中id选择器的数量0,1,0,0

iii.选择符中类选择器、属性选择器、伪类选择器的数量0,0,1,0

iv.选择符中标签选择器和伪对象选择器的数量0,0,0,1

v.忽略全局选择器

vi.示例：

#left{color:

black!

important;

}/*1,1,0,0权重：

1100*/

#container#left{color:

red;

}/*0,2,0,0权重：

200*/

green!

.container#left{color:

blue;

}/*0,1,1,0权重：

110*/

e）使用原则

i.尽量不要使用ID选择器；

ii.减少子选择器的层级；

iii.使用组合的CSS类选择器。

5、Rem\em\px\%的使用原则

a）Rem是相对于根元素的相对单位，em是相对于自身的相对单位，px是绝对单位，%是相对于父元素的相对单位

b）尽量设置相对单位：

em\rem设置字体大小，%设置元素宽高。

c）只有在可预知元素尺寸的情况下才使用绝对尺寸，例如页面整体宽度、侧边栏、页头、页尾、图片、视频等

高性能的CSS

1、使用高效的CSS选择器

a）避免使用通配符

b）不要使用ID选择器

c）尽量不要在选择符中定义过多层级，最好不要超过三层

2、CSS相关的图片处理

a）不要设置图片尺寸

b）使用CSSSprite技术，使用注意事项：

i.项目后期应用CSSSprite技术

ii.合理组织图标

iii.控制图片尺寸和大小。

图片大小200K以内，图