新手必看前端开发时所要注意和遵守的规范

摘要: 前端开发规范，让所有人写的代码都长得一样。我们的目标是——看不出来哪行代码是自己写的。

前端开发规范

HTML

1.使用软Tab（2个空格）进行缩进

2.嵌套元素必须缩进一次

3.属性的值使用双引号（而不是单引号）

4.在空元素中不用使用反斜杠

5.使用HTML5文档声明

6.语言属性使用

   <htmllang="en-us">

7.控制IE版本

   <metahttp-equiv="X-UA-Compatible"content="IE=Edge">

8.style、script标签无需指明type属性

9.属性使用顺序：

   *class*id,name*data-**src, for, type, href, value*title, alt*role, aria-*

10.boolean属性无需赋值：disabled checked selected

11.尽量减少嵌套层级

12.尽量使用语义化的标签，而不是滥用div+class

CSS

1.使用软Tab（2个空格）进行缩进

2.在组选择符中，每个选择符占据单独一行

3.在选择符和大括号之间留出一个空格

4.选择符大括号的结束括号在单独一行

5.每一行样式声明在单独一行

6.每一行样式声明以分号结尾（包括最后一行）

7.逗号分隔的样式值之间留出一个空格

8.十六进制值小写, 十六进制值尽量使用简写 #fff

9.需要透明度时才使用rgba/hsla, 避免使用rgb, hsl

10.属性选择器的值使用双引号

11.0值不使用单位 margin:0;

12.样式声明顺序

   *1. Positioning*2. Box model*3. Typographic*4. Visual

13.不使用@import（不是sass中的）

14.媒体查询样式尽量放在相关的样式旁边

15.样式的前缀通过自动化完成

16.尽量使用单行声明:padding margin font background border border-radius

17.- sass

18.减少不必要的嵌套，尽量不超过4层

19.计算表达式使用小括号

20.书写一致并且可读的注释

21.将样式按照组件级别进行组织，而不是页面级别

22.- className

23.使用小写字母，以横杠（不是下划线或驼峰）隔开

24.避免过度简化随意命名

25.保持类名有克制的简洁

26.使用有意义的类名，有组织有目的的来诠释展现

27.如果可以，以父标签的类名开头进行命名

28.- 选择器

29.属性选择符尽量避免使用（影响性能）

30.- 编辑器设置

   -tab键设置为2个空格-保存时去除行尾空格-文件编码设置为utf-8-文件末尾留出一行

31.尽量不要改变元素的display属性，尽量不要让元素脱离文档流

32.能用transition， 则不用animation

Javascript

1.- 总体规则

2.99%的代码必须封装在外部Javascript文件中。这些文件必须在 BODY 标签的尾部引入，让页面的性能最大化。

3.不要依赖于 user-agent 字符串。进行适当的特性检测.

4.不要使用 document.write()。

5.所有布尔变量的命名必须用 “is” 开头

6.字符串单引号由于双引号

7.一组逻辑之间用空行分开

8.给变量和函数的命名要有逻辑意义：例如：popUpWindowForAd 就比 myWindow 好多了。

9.不要人为缩短命名到最小。除了传统的 for 循环中的计数器 i 等简化的情况，变量命名必须长到有明确意义。

10.文档必须遵循 NaturalDocs 结构。

11.常量或配置变量（例如动画持续时间等）必须放在文件的顶部。

12.尽力编写可通用化的函数，让它接受参数并返回值。这样有利于充分的代码重用，而且一旦与引入及外部脚本配合起来，能在脚本需要修改时减少开销。例如，相比硬编码一个带有窗口大小、选项和url的弹出式窗口，不如编写一个接受大小、url和选项作为变量的函数。 给代码添加注释！这会有利于减少在调试Javascript函数上花费的时间。

13.把你的代码组织成一套 对象常量/单例，按照 模块化模式，或做成 带构造器的对象。

14.最小化全局变量 - 你创建的全局变量越少越好。任何全局变量明确指认：window.xxx =

15.Ajax请求必须处理所有的正常和异常流程，避免使用if else

16.- 留空

17.每个逗号和冒号（以及适用的分号）后面要空一格，但在括号内部的左侧和右侧都不要加空格。另外，大括号应该总是和他们前面的参数出现在同一行。

18.- 变量

19.所有的 JavaScript 变量必须写成全小写或驼峰法。一个例外是构造器函数，按惯例是首字母大写。

20.常量使用全大写字母标识，用下划线分隔，如：NAMES_LIKE_THIS

21.- 优化Javascript的特性

22.不要在块内声明一个函数

23.简化：使用||来指定默认值

24.简化：使用&&来代替单个if的代码块

25.使用array.join()来拼接字符串

26.对于节点集合对象如NodeList, 进行遍历时，不循环使用长度

27.Hoisting：把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定 义，由此会产生问题）

28.不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）

29.不要用隐含的类型转换，如避免使用==和!=

30.不要用 eval()

31.不要用 parseInt() 进行数字转换

32.（规范）左大括号的位置

33.构造器首字母大写

34.写注释

35.不要用 void

36.不要用 with 语句

37.不要用 continue 语句

38.尽量不要用位运算

39.不要使用基本类型的包装类型

40.不要使用非标准的特性,如使用str.chatAt(3)而不是str[3]

41.仅在对象构造器, 对象的方法, 闭包中使用 this

42.不使用new Object() new Array()，使用字面量{},[]

   *newArray(3)
*for-in

43.不使用多行字符串

性能

1.对图片进行无损压缩优化。

2.不要在HTML中写内联脚本 <script>块。 它们会阻塞页面渲染操作，对页面加载时间带来破坏性的影响。

3.适当地设置缓存标题。

4.针对静态资源，考虑单独配置一个无cookie的子域。

5.CSS 必须放在文档的 部分, Javascript 必须正好放在 标签的前面。

6.CSS 和 JavaScript 都必须以最小化方式加载。

7.CSS 和 JavaScript 都必须 以gzip形式传输。

8.CSS 必须串接在一起。

9.- 优化Javascript执行

10.改变页面视觉习性的脚本绝对要首先执行。这包括任何的字体调整、盒子布局、或IE6 pngfix。

11.页面内容初始化

12.页面标题、顶部导航和页脚的初始化

13.绑定事件处理器

14.网页流量分析、Doubleclick，以及其他第三方脚本

15.使用CSS Sprites

16.- 缓存静态资源：CSS 和 JavaScript、产品图片 、主题图形、 favicon.ico、 flash .swf

17.- 把资源文件跨域分片

28.- 避免使用IFRAME

新手学习前端开发除了要多动手敲代码最重要的还是经验的交流欢迎有需要的的小伙伴进前端开发交流群624293552来一起交流问题学习经验，我把所有的教程资料都放到里了。