前端编码规范.docx

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

前端编码规范

前端编码规范

目录

前端编码规范2

1一般规范2

1.1文件/资源命名2

1.2协议3

1.3文本缩进4

1.4注释4

1.5代码检查6

2HTML规范6

2.1文档类型6

2.2HTML验证6

2.3省略可选标签7

2.4脚本加载7

2.5语义化9

2.6多媒体回溯12

2.7关注点分离13

2.8HTML内容至上15

2.9Type属性17

2.10可用性18

2.11TabIndex在可用性上的运用18

2.12微格式在SEO和可用性上的运用19

2.13ID和锚点20

2.14格式化规则20

2.15HTML引号21

3JavaScript规范22

3.1全局命名空间污染与IIFE22

3.2IIFE（立即执行的函数表达式）23

3.3严格模式24

3.4变量声明25

3.5理解JavaScript的定义域和定义域提升25

3.6总是使用带类型判断的比较判断30

3.7明智地使用真假判断31

3.8变量赋值时的逻辑操作32

3.9分号33

3.10嵌套函数35

3.11语句块内的函数声明35

3.12异常36

3.13标准特性37

3.14简易的原型继承37

3.15使用闭包38

3.16切勿在循环中创建函数38

3.17eval函数（魔鬼）41

3.18this关键字41

3.19首选函数式风格42

3.20使用ECMAScript544

3.21数组和对象的属性迭代44

3.22不要使用switch45

3.23数组和对象字面量45

3.24修改内建对象的原型链47

3.25自定义toString（）方法47

3.26圆括号47

3.27字符串48

3.28三元条件判断（if的快捷方法）48

4CSSandSass（SCSS）stylerules49

4.1IDandclassnaming49

4.2合理的避免使用ID50

4.3CSS选择器中避免标签名51

4.4尽可能的精确51

4.5缩写属性53

4.60和单位54

4.7十六进制表示法54

4.8ID和Class（类）名的分隔符55

4.9Hacks55

4.10声明顺序56

4.11声明结束57

4.12属性名结束57

4.13选择器和声明分离58

4.14规则分隔59

4.15CSS引号59

4.16选择器嵌套（SCSS）60

4.17嵌套中引入空行（SCSS）61

4.18上下文媒体查询（SCSS）62

4.19嵌套顺序和父级选择器（SCSS）65

1一般规范

以下列举了一些可应用在HTML,JavaScript和CSS/SCSS上的通用规则。

1.1文件/资源命名

在web项目中，所有的文件名应该都遵循同一命名约定。

以可读性而言，减号（-）是用来分隔文件名的不二之选。

同时它也是常见的URL分隔符（i.e.//or//

请确保文件命名总是以字母开头而不是数字。

而以特殊字符开头命名的文件，一般都有特殊的含义与用处（比如compass[1]中的下划线就是用来标记跳过直接编译的文件用的）。

资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。

还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如.min.js,.min.css），抑或一串前缀（比如3fa89b.main.min.css）。

这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。

不推荐

1.MyScript.js

2.myCamelCaseName.css

3.i_love_underscores.html

4.1001-scripts.js

5.my-file-min.css

推荐

1.my-script.js

2.my-camel-case-name.css

3.i-love-underscores.html

4.thousand-and-one-scripts.js

5.my-file.min.css

1.2协议

不要指定引入资源所带的具体协议。

当引入图片或其他媒体文件，还有样式和脚本时，URLs所指向的具体路径，不要指定协议部分（http:

https:

），除非这两者协议都不可用。

不指定协议使得URL从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。

不推荐

1.

推荐

1.

不推荐

1..example{

2.background:

url（

3.}

推荐

1..example{

2.background:

url（//

3.}

1.3文本缩进

一次缩进两个空格。

1.

2.

• Fantastic

3.

• Great

4.

• 5.Test

  6.

7.

1.@mediascreenand（min-width:

1100px）{

2.body{

3.font-size:

100%;

4.}

5.}

1.（function（）{

2.varx=10;

3. 

4.functiony（a,b）{

5.return{

6.result:

（a+b）*x

7.}

8. 

9.}

10.}（））;

1.4注释

注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。

特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。

编写自解释代码只是一个传说，没有任何代码是可以完全自解释的。

而代码注释，则是永远也不嫌多。

当你写注释时一定要注意：

不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。

当然也可以加入所思考问题或是解决方案的链接地址。

不推荐

1.varoffset=0;

2. 

3.if（includeLabels）{

4.//Addoffsetof20

5.offset=20;

6.}

推荐

1.varoffset=0;

2. 

3.if（includeLabels）{

4.//Ifthelabelsareincludedweneedtohaveaminimumoffsetof20pixels

5.//Weneedtosetitexplicitlybecauseofthefollowingbug:

6.offset=20;

7.}

一些注释工具可以帮助你写出更好的注释。

JSDoc或YUIDoc就是用来写JavaScript注释用的。

你甚至可以使用工具来为这些注释生成文档，这也是激励开发者们写注释的一个好方法，因为一旦有了这样方便的生成文档的工具，他们通常会开始花更多时间在注释细节上。

1. 

1.5代码检查

对于比较宽松自由的编程语言来说，严格遵循编码规范和格式化风格指南就显得极为重要。

遵循规范固然很好，但是有自动化流程来确保其执行情况，岂不更佳。

Trustisgood,controlisbetter.

对于JavaScript，建议使用JSLint或JSHint。

[1]:

Compass是一个基于Sass开源的CSS框架，而Sass是一个非常流行的CSS预编译器。

2HTML规范

2.1文档类型

推荐使用HTML5的文档类型申明：

DOCTYPEhtml>.

（建议使用text/html格式的HTML。

避免使用XHTML。

XHTML以及它的属性，比如application/xhtml+xml在浏览器中的应用支持与优化空间都十分有限）。

HTML中最好不要将无内容元素[1]的标签闭合，例如：

使用
而非
.

2.2HTML验证

一般情况下，建议使用能通过标准规范验证的HTML代码，除非在性能优化和控制文件大小上不得不做出让步。

使用诸如W3CHTMLvalidator这样的工具来进行检测。

规范化的HTML是显现技术要求与局限的显著质量基线，它促进了HTML被更好地运用。

不推荐

1.

2.