前端代码编写要求规范Word下载.docx
- 文档编号:20602681
- 上传时间:2023-01-24
- 格式:DOCX
- 页数:27
- 大小:27.67KB
前端代码编写要求规范Word下载.docx
《前端代码编写要求规范Word下载.docx》由会员分享,可在线阅读,更多相关《前端代码编写要求规范Word下载.docx(27页珍藏版)》请在冰豆网上搜索。
Hello,world!
/h1>
/body>
/html>
2.HTML5doctype
页面开头的doctype大写,html小写。
!
DOCTYPEhtml>
...
3.字符编码
采用UTF-8的编码格式。
metacharset=〞UTF-8〞>
metacharset="
UTF-8"
4.引入CSS,JS
CSS引入使用<
link>
linkrel="
stylesheet"
href="
code-guide.css"
JS引入使用<
scripttype="
text/javascript"
code-guide.js"
页面不允许出现style标签。
5.属性
1.属性名必须使用小写字母
--good-->
tablecellspacing="
0"
...<
/table>
--bad-->
tablecellSpacing="
/table
2.属性值必须使用双引号包围
不允许使用单引号。
scriptsrc="
"
scriptsrc='
'
scriptsrc=>
6.属性顺序
class
id
name
data-*
src,for,type,href,value,max-length,max,min,pattern
placeholder,title,alt
aria-*,role
required,readonly,disabled
7.标签
标签名必须使用小写字母
p>
HelloStyleGuide!
/p>
P>
/P>
1.对于无需自闭合的标签,不允许自闭合
常见无需自闭合标签有input、br、img、hr等。
inputtype="
text"
name="
title"
/>
2.标签使用必须符合标签嵌套规如此
比如div不得置于p中,tbody必须置于table中。
ul标签包含着li、dl标签包含着dt和dd。
3.标签使用必须符合标签嵌套规如此
常见标签语义:
P–段落
h1,h2,h3,h4,h5,h6–层级标题
strong,em–强调
ins–插入
del–删除
abbr–缩写
code–代码标识
cite–引述来源作品的标题
q–引用
blockquote–一段长篇引用
ul–无序列表
ol–有序列表
dl,dt,dd–定义列表
8.图片
禁止
img
的
src
取值为空。
延迟加载的图片也要增加默认的
src。
取值为空,会导致局部浏览器重新加载一次当前页面,参考:
s:
//developer../performance/rules.html#emptysrc
[建议]防止为
添加不必要的
title
属性。
多余的
影响看图体验,并且增加了页面尺寸。
[建议]为重要图片添加
alt
可以提高图片加载失败时的用户体验。
[建议]添加
width
和
height
属性,以防止页面抖动。
[建议]有下载需求的图片采用
标签实现,无下载需求的图片采用CSS背景图实现。
1.产品logo、用户头像、用户产生的图片等有潜在下载需求的图片,以
形式实现,能方便用户下载。
2.无下载需求的图片,比如:
icon、背景、代码使用的图片等,尽可能采用CSS背景图实现。
9.表单
1.控件标题
[强制]有文本标题的控件必须使用
label
标签将其与其标题相关联。
有两种方式:
1.将控件置于
内。
2.label
for
属性指向控件的
id。
推荐使用第一种,减少不必要的
如果DOM结构不允许直接嵌套,如此应使用第二种。
示例:
label>
checkbox"
confirm"
value="
on"
我已确认上述条款<
/label>
labelfor="
username"
用户名:
textbox"
id="
2.按钮
[强制]使用
button
元素时必须指明
type
属性值。
元素的默认
为
submit,如果被置于
form
元素中,点击后将导致表单提交。
为显示区分其作用方便理解,必须给出
buttontype="
submit"
提交<
/button>
button"
取消<
[建议]尽量不要使用按钮类元素的
name
由于浏览器兼容性问题,使用按钮的
属性会带来许多难以发现的问题。
具体情况可参考此文。
3.可访问性(A11Y)
[建议]负责主要功能的按钮在DOM中的顺序应靠前。
负责主要功能的按钮应相对靠前,以提高可访问性。
如果在CSS中指定了
float:
right
如此可能导致视觉上主按钮在前,而DOM中主按钮靠后的情况。
.buttons.button-group{
float:
right;
divclass="
buttons"
button-group"
/div>
.buttonsbutton{
[建议]当使用JavaScript进展表单提交时,如果条件允许,应使原生提交功能正常工作。
当浏览器JS运行错误或关闭JS时,提交功能将无法工作。
如果正确指定了
元素的
action
属性和表单控件的
属性时,提交仍可继续进展。
formaction="
/login"
method="
post"
inputname="
type="
placeholder="
用户名"
password"
密码"
/form>
[建议]在针对移动设备开发的页面时,根据内容类型指定输入框的
根据内容类型指定输入框类型,能获得能友好的输入体验。
date"
10.多媒体
[建议]当在现代浏览器中使用
audio
以与
video
标签来播放音频、视频时,应当注意格式。
音频应尽可能覆盖到如下格式:
∙MP3
∙WAV
∙Ogg
视频应尽可能覆盖到如下格式:
∙MP4
∙WebM
[建议]在支持
HTML5
的浏览器中优先使用
标签来定义音视频元素。
[建议]使用退化到插件的方式来对多浏览器进展支持。
audiocontrols>
sourcesrc="
audio/mpeg"
audio/ogg"
objectwidth="
100"
height="
50"
data="
embedwidth="
src="
/object>
/audio>
videowidth="
controls>
video/mp4"
video/ogg"
/video>
[建议]只在必要的时候开启音视频的自动播放。
[建议]在
object
标签内部提供指示浏览器不支持该标签的说明。
DONOTSUPPORTTHISTAG<
11.js生成标签
在js文件中生成标签让内容更难查找,更难编辑,性能更差,
应该尽量防止这种情况的出现
12.减少标签数量
在编写HTML代码时,需要尽量防止多余的父节点;
很多时候,需要通过迭代和重构来使HTML变得更少;
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
--Notwell-->
spanclass="
avatar"
<
..."
/span>
--Better-->
imgclass="
13.使用高于完美
尽量组训HTML标准和语义,但是不应该以浪费实用性作为代价;
14.整体结构
HTML根底设施
∙文件应以“<
DOCTYPE......>
〞首行顶格开始,推荐使用“<
〞。
∙必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码<
utf-8"
/>
。
∙根据页面内容和需求填写适当的keywords和description。
∙页面title是极为重要的不可缺少的一项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
meta
charset="
NEC:
更好的CSS方案<
name="
keywords"
content="
description"
viewport"
width=device-width"
link
rel="
href="
css/style.css"
shortcuticon"
img/favicon.ico"
apple-touch-icon"
img/touchicon.png"
结构顺序和视觉顺序根本保持一致
∙按照从上至下、从左到右的视觉顺序书写HTML结构。
∙有时候为了便于搜索引擎抓取,我们也会将重要内容在HTML结构顺序上提前。
∙用div代替table布局,可以使HTML更具灵活性,也方便利用CSS控制。
∙table不建议用于布局,但表现具有明显表格形式的数据,table还是首选。
结构、表现、行为三者别离,防止内联
∙使用link将css文件引入,并置于head中。
∙使用script将js文件引入,并置于body底部。
保持良好的简洁的树形结构
∙每一个块级元素都另起一行,每一行都使用Tab缩进对齐〔head和body的子元素不需要缩进〕。
删除冗余的行尾的空格。
∙使用4个空格代替1个Tab〔大多数编辑器中可设置〕。
∙对于内容较为简单的表格,建议将tr写成单行。
∙你也可以在大的模块之间用空行隔开,使模块更清晰。
16
17
18
19
20
--侧栏内容区-->
div
class="
m-side"
side"
sidein"
--热门标签-->
sideblk"
m-hd3"
h3
tit"
热门标签<
/h3>
...
--最热TOP5-->
最热TOP5<
a
#"
s-fc02f-fr"
更多»
/a>
--/侧栏内容区-->
CSS
1.缩进
缩进使用Tab〔4个空格〕。
.element{
position:
absolute;
top:
10px;
left:
border-radius:
width:
50px;
height:
2.分号
每个属性声明末尾都要加分号。
20px;
3.空行
文件最后保存一个空行;
‘}’结尾后跟一个空行。
.dialog{
color:
red;
&
:
after{
}
4.换行
每个属性独占一行。
background-color:
black;
5.注释
注释统一用‘/**/’,具体参照例中写法;
缩进与下一行代码保持一致;
可位于一个代码行的末尾,与代码间隔一个空格。
/*Modalheader*/
.modal-header{
/*50px*/
width:
color:
/*colorred*/
6.引号
最外层统一使用双引号;
url的内容要用引号;
属性选择器找那个的属性值需要引号。
.element:
content:
"
;
background-image:
url("
logo.png"
);
li[data-type="
single"
]{
7.命名
命名使用小写字母,以“-〞分隔;
Id采用驼峰式命名;
/*class*/
.element-content{
/*id*/
#myDialog{
8.颜色
颜色十六进制用小写字母,尽量使用简写;
#abcdef;
background-color:
#012;
9.杂项
不允许有空的规如此;
元素选择器用小写字母;
属性值‘0’后面不加单位;
不要在一个文件里出现两个一样的规如此;
用border:
0;
代替border:
none;
;
尽量少用“*〞选择器。
JavaScript
缩进使用Tab〔4个空格〕
varx=1,
y=1;
if(x<
y){
x+=10;
}else{
x+=1;
以下几种情况后需加分号:
变量声明
表达式
return
throw
break
continue
do-while
/*vardeclaration*/
varx=1;
/*expressionstatement*/
x++;
/*do-while*/
do{
x++;
}while(x<
10);
以下几种情况需要空行:
变量声明后;
注释前;
代码块后;
文件最后保存一个空行。
以下几种情况不需要换行:
超长的不可分割的代码允许例外,比如复杂的正如此表达式,
长字符串不在例外之列。
如下关键字后:
else,catch,finally
代码块‘{’前
以下几种情况需要换行:
代码块‘{’后和‘}’前
变量复制后
5.单行注释
双斜线后,必须跟一个空格;
if(condition){
//ifyoumadeithere,thenallsecuritycheckspassed
allowed();
varzhangsan='
zhangsan'
//onespaceaftercode
6.多行注释
最少三行,“*〞后跟一个空格。
/*
*onespaceafter'
*'
*/
7.文件注释
文件顶部必须包含文件注释,用file标识文件说明
/**
*fileDescribethefile
8.命名空间注释
命名空间使用namespace标识
*namespace
varutil={};
9.类注释
*parm
*return
functionDeveloper(){
//constructorbody
10.变量命名
变量名采用驼峰式命名〔除对象的属性外〕
varthisIsMyName;
‘id’在变量名中‘i’大写例:
Id
vargoodId;
‘url’在变量名中全大写
varreportURL;
‘Android’在变量名中大写第一个字母
varAndroidVersion;
‘iOS’在变量名中小写第一个字母,大写后两个字母
variOSVersion;
常量全大写,用下划线
varMAX_COUNT=10;
构造函数,大写第一个字母
functionPerson(name){
this.name=name;
11.变量声明
每个var只能声明一个变量。
varhangModules=[];
varmissModules=[];
varvisited={};
12.数组、对象
对象属性名不需要加引号;
对象以缩进的形式书写,不要写在一行。
vara={
b:
1,
c:
2
};
13.括号
如下关键字后必须有大括号〔即使代码块的内容只有一行〕
If,else,for,while,do,switch,try,catch,finally,with。
14.Null
使用场景:
初始化一个将来可能被赋值为对象的变量
与已经初始化的变量做比拟
作为一个参数为对象的函数的调用传参
作为一个返回对象的函数的返回值
不使用场景:
不要用null来判断函数调用时有无传参
不要与未初始化的变量做比拟
//notgood
functiontest(a,b){
if(b===null){
//notmeanbisnotsupply
vara;
if(a===null){
//good
vara=null;
15.Undefined
永远不要直接使用undefined进展变量判断;
使用typeof和字符串‘undefined’对变量进展判断。
if(person==undefined){
if(typeofperson=='
undefined'
){
16.Jshint
比拟用‘==’,‘!
=’;
if(a==1){
a++;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 代码 编写 要求 规范
![提示](https://static.bdocx.com/images/bang_tan.gif)