学前端的同学,看看你的代码书写是否规范

 

 

 

一、 规范目的:
为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化。

二、 规范基本准则:
符合web标准,使用具有语义的标签,使结构、表现、行为分离,兼容性优良,页面性能优化,代码简洁、明了、有序,尽可能的减少服务器的负载,保证最快的解析速度。

三、 文件规范:
html、css、js、images文件均归档至约定的目录中。

HTML部分:

缩进使用soft tab(4个空格);

嵌套的节点应该缩进;

在属性上,使用双引号,不要使用单引号;

属性名全小写,用中划线做分隔符;

不要在自动闭合标签结尾处使用斜线(HTML5 指出他们是可选的);

不要忽略可选的关闭标签,例:</li> 和 </body>

虽然doctype不区分大小写,但是按照惯例,doctype大写

在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现;

根据HTML5规范:应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,告诉它们应当怎么去发音和翻译。

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为’UTF-8’。

用 <meta> 标签可以指定页面应该用什么版本的IE来渲染;

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。

属性应该按照特定的顺序出现以保证易读性;

id

class

name

data-*

src, for, type, href, value , max-length, max, min, pattern

placeholder, title, alt

aria-*, role

required, readonly, disabled

boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;boolean属性的存在表示取值为true,不存在则表示取值为false。

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。

在编写HTML代码时,需要尽量避免多余的父节点;

很多时候,需要通过迭代和重构来使HTML变得更少。

尽量遵循HTML标准和语义,但是不应该以浪费实用性作为代价;

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

CSS部分:

使用soft tab(4个空格)。

每个属性声明末尾都要加分号。

以下几种情况不需要空格:

属性名后

多个规则的分隔符’,’前

!important ‘!’后

属性值中'(‘后和’)’前

行末不要有多余的空格

以下几种情况需要空格:

属性值前

选择器’>’, ‘+’, ‘~’前后

‘{‘前

!important ‘!’前

@else 前后

属性值中的’,’后

注释’/*’后和’*/’前

以下几种情况需要空行:

文件最后保留一个空行

‘}’后最好跟一个空行,包括scss中嵌套的规则

属性之间需要适当的空行

以下几种情况不需要换行:

‘{‘前

以下几种情况需要换行:

‘{‘后和’}’前

每个属性独占一行

多个规则的分隔符’,’后

不允许使用!important。

注释统一用’/* */’(scss中也不要用’//’),具体参照右边的写法;

缩进与下一行代码保持一致;

可位于一个代码行的末尾,与代码间隔一个空格。

最外层统一使用双引号;

url的内容要用引号;

属性选择器中的属性值需要引号。

使用小写字母,以中划线分隔

scss中的变量、函数、混合、placeholder采用驼峰式命名

相关的属性声明按文章最后面的顺序做分组处理,组之间需要有一个空行。

颜色16进制用小写字母;

颜色16进制尽量用简写。

尽量将媒体查询的规则靠近与他们相关的规则,不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部,这样做只会让大家以后更容易忘记他们。

不允许有空的规则;

元素选择器用小写字母;

去掉小数点前面的0;

去掉数字中不必要的小数点和末尾的0;

属性值’0’后面不要加单位;

同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照右边的写法;

无前缀的标准属性应该写在有前缀的属性后面;

不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系;

不要在一个文件里出现两个相同的规则;

用 border: 0; 代替 border: none;;

选择器不要超过4层(在scss中如果超过4层应该考虑用嵌套的方式来写);

发布的代码中不要有 @import;

尽量少用’*’选择器。

JS部分:

使用soft tab(4个空格)。

不要超过120,但如果编辑器开启word wrap可以不考虑单行长度。

长字符串拼接用加号。

以下几种情况后需加分号:

变量声明

表达式

return

throw

break

continue

do-while

以下几种情况不需要空格:

对象的属性名后

前缀一元运算符后

后缀一元运算符前

函数调用括号前

无论是函数声明还是函数表达式,'(‘前不要空格

数组的'[‘后和’]’前

对象的'{‘后和’}’前

运算符'(‘后和’)’前

以下几种情况需要空格:

二元运算符前后

三元运算符’?:’前后

代码块'{‘前

下列关键字前:else, while, catch, finally

下列关键字后:if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof

单行注释’//’后(若单行注释和代码同行,则’//’前也需要),多行注释’*’后

对象的属性值前

for循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格

无论是函数声明还是函数表达式,'{‘前一定要有空格

函数的参数之间

换行的地方,行末必须有’,’或者运算符;

以下几种情况不需要换行:

下列关键字后:else, catch, finally

代码块'{‘前

以下几种情况需要换行:

代码块'{‘后和’}’前

定义变量后

双斜线后,必须跟一个空格;

缩进与下一行代码保持一致;

可位于一个代码行的末尾,与代码间隔一个空格。

最少三行, ‘*’后跟一个空格,具体参照右边的写法;

建议在以下情况下使用:

难于理解的代码段

可能存在错误的代码段

浏览器特殊的HACK代码

业务逻辑强相关的代码

最外层统一使用单引号。

标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)

‘ID’在变量名中全大写

‘URL’在变量名中全大写

‘Android’在变量名中大写第一个字母

‘iOS’在变量名中小写第一个,大写后两个字母

常量全大写,用下划线连接

构造函数,大写第一个字母

jquery对象必须以’$’开头命名

一个函数作用域中所有的变量声明提到函数首部,除了for (…)里面使用的一次性变量。

var的数量不做限制,但要统一,一行定义一个变量。

无论是函数声明还是函数表达式,'(‘前不要空格,但'{‘前一定要有空格;

函数调用括号前不需要空格;

立即执行函数外必须包一层括号;

不要给inline function命名;

参数之间用’, ‘分隔,注意逗号后有一个空格。

对象属性名不需要加引号;

对象以缩进的形式书写,不要写在一行;

数组、对象最后不要有逗号。

下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with。
null

适用场景:

不适用场景:

不要用null来判断函数调用时有无传参

不要与未初始化的变量做比较

初始化一个将来可能被赋值为对象的变量

与已经初始化的变量做比较

作为一个参数为对象的函数的调用传参

作为一个返回对象的函数的返回值

永远不要直接使用undefined进行变量判断;

使用typeof和字符串’undefined’对变量进行判断。

不要混用tab和space;

不要在一处使用多个tab或space;

对上下文this的引用命名范围:self > that > _this > me;

行尾不要有空白字符;

switch的falling through和no default的情况一定要有注释特别说明;

不允许三元运算符嵌套。

不允许有空的代码块。

未经允许不得转载:前端范 » 学前端的同学,看看你的代码书写是否规范

赞 (3)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址