前端编码规范Word格式.docx

前端编码规范Word格式.docx

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

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.<

scriptsrc="

//

1..example{

2.background:

url（

3.}

url（//

1.3文本缩进

一次缩进两个空格。

ul>

2.<

li>

Fantastic<

/li>

3.<

Great<

4.<

5.<

ahref="

#"

>

Test<

/a>

6.<

7.<

/ul>

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.}

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]的标签闭合，例如：

使用<

br>

而非<

br/>

2.2HTML验证

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

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

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

title>

/title>

2.<

article>

Thisisonlyatest.

metacharset="

utf-8"

3.<

4.<

Thisisonlyatest.<

/article>

2.3省略可选标签

HTML5规范中规定了HTML标签是可以省略的。

但从可读性来说，在开发的源文件中最好不要这样做，因为省略标签可能会导致一些问题。

省略一些可选的标签确实使得页面大小减少，这很有用，尤其是对于一些大型网站来说。

为了达到这一目的，我们可以在开发后期对页面进行压缩处理，在这个环节中这些可选的标签完全就可以省略掉了。

2.4脚本加载

出于性能考虑，脚本异步加载很关键。

一段脚本放置在<

head>

内，比如<

main.js"

<

/script>

，其加载会一直阻塞DOM解析，直至它完全地加载和执行完毕。

这会造成页面显示的延迟。

特别是一些重量级的脚本，对用户体验来说那真是一个巨大的影响。

异步加载脚本可缓解这种性能影响。

如果只需兼容IE10+，可将HTML5的async属性加至脚本中，它可防止阻塞DOM的解析，甚至你可以将脚本引用写在<

里也没有影响。

如需兼容老旧的浏览器，实践表明可使用用来动态注入脚本的脚本加载器。

你可以考虑yepnope或labjs。

注入脚本的一个问题是：

一直要等到CSS对象文档已就绪，它们才开始加载（短暂地在CSS加载完毕之后），这就对需要及时触发的JS造成了一定的延迟，这多多少少也影响了用户体验吧。

终上所述，兼容老旧浏览器（IE9-）时，应该遵循以下最佳实践。

脚本引用写在body结束标签之前，并带上async属性。

这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了body结束标签之前的DOM解析，这就大大降低了其阻塞影响。

而在现代浏览器中，脚本将在DOM解析器发现body尾部的script标签才进行加载，此时加载属于异步加载，不会阻塞CSSOM（但其执行仍发生在CSSOM之后）。

所有浏览器中，推荐

html>

linkrel="

stylesheet"

href="

main.css"

/head>

body>

--bodygoeshere-->

7. 

8.<

async>

9.<

/body>

10.<

/html>

只在现代浏览器中，推荐

7.<

9.<

2.5语义化

根据元素（有时被错误地称作“标签”）其被创造出来时的初始意义来使用它。

打个比方，用heading元素来定义头部标题，p元素来定义文字段落，用a元素来定义链接锚点，等等。

有根据有目的地使用HTML元素，对于可访问性、代码重用、代码效率来说意义重大。

以下示例列出了一些的语义化HTML主要情况：

b>

Mypagetitle<

/b>

divclass="

top-navigation"

nav-item"

#home"

Home<

/div>

#news"

News<

#about"

About<

6.<

8.<

news-page"

page-sectionnews"

10.<

title"

Allnewsarticles<

11.<

news-article"

12.<

h2>

Badarticle<

/h2>

13.<

intro"

Introductionsub-title<

14.<

content"

ThisisaverybadexampleforHTMLsemantics<

15.<

article-side-notes"

IthinkI'

mmoreonthesideandshouldnotreceivethemaincredits<

16.<

article-foot-notes"

17.ThisarticlewascreatedbyDavid<

time"

2014-01-0100:

00<

18.<

19.<

20. 

21.<

section-footer"

22.Relatedsections:

Events,Publicholidays

23.<

24.<

25.<

26. 

27.<

page-footer"

28.Copyright2014

29.<

--Thepageheadershouldgointoaheaderelement-->

header>

--Asthistitlebelongstothepagestructureit'

saheadingandh1shouldbeused-->

h1>

/h1>

5.<

/header>

6. 

--Allnavigationshouldgointoanavelement-->

navclass="

--AlistingofelementsshouldalwaysgotoUL（OLfororderedlistings）-->

liclass="

15.<

/nav>

16. 

17.<

--Themainpartofthepageshouldgointoamainelement（alsouserole="

main"

foraccessibility）-->

18.<

mainclass="

role="

--Asectionofapageshouldgointoasectionelement.Divideapageintosectionswithsemanticelements.-->

20.<

sectionclass="

--Asectionheadershouldgointoasectionelement-->

22.<

--Asapagesectionbelongstothepagestructureheadingelementsshouldbeused（inthiscaseh2）-->

h2class="

25.<

27.<

--Ifasection/modulecanbeseenasanarticle（newsarticle,blogentry,productsteaser,anyother

28.re-usablemodule/sectionthatcanoccurmultipletimesonapage）aarticleelementshouldbeused-->

29.<

articleclass="

30.<

--Anarticlecancontainaheaderthatcontainsthesummary/introductioninformationofthearticle-->

31.<

32.<

--Asaarticletitledoesnotbelongtotheoverallpagestructurethereshouldnotbeanyheadingtag!

-->

33.<

article-title"

Goodarticle<

34.<

--Smallcanoptionallybeusedtoreduceimportance-->

35.<

smallclass="

/small>

36.<

37. 

38.<

--Forthemaincontentinasectionorarticlethereisnosemanticelement-->

39.<

40.<

p>

ThisisagoodexampleforHTMLsemantics<

/p>

41.<

42.<

--Forcontentthatisrepresentedassidenoteorlessimportantinformationinagivencontextuseaside-->

43.<

asideclass="

44.<

45.<

/aside>

46.<

--Articlescanalsocontainfooters.Ifyouhavefootnotesforanarticleplacethemintoafooterelement-->

47.<

footerclass="

48.<

--Thetimeelementcanbeusedtoannotateatimestamp.UsethedatetimeattributetospecifyISOtime

49.whiletheactualtextinthetimeelementcanalsobemorehumanreadable/relative-->

50.<

ThisarticlewascreatedbyDavid<

timedatetime="

00"

class="

1monthago<

/time>

51.<

/footer>

52.<

53. 

54.<

--Inasection,footnotesorsimilarinformationcanalsogointoafooterelement-->

55.<

56.<

Relatedsections:

Events,Publicholidays<

57.<

58.<

/section>

59.<

/main>

60. 

61.<

--Yourpagefootershouldgointoaglobalfooterelement-->

62.<

63.Copyright2014

64.<

/