前端开发规范

来源：互联网发布：易视网络电视在线直播编辑：程序博客网时间：2024/05/17 22:00

前端开发规范

HTML

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

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

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

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

5.使用HTML5文档声明

6.语言属性使用

<html lang="en-us">

7.控制IE版本

<meta http-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()，使用字面量{},[]

* new Array(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

1 0