前端开发规范
规范目的
为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,
特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。
本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。
基本准则
符合 标准;语义化 ;结构、表现、行为分离;兼容性优良。页面性能方面,
代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
文件规范
,,, 文件均归档至相应约定的目录中。
文件命名:英文驼峰式命名,文件名。按实际模块需求命名。
文件命名:英文驼峰式命名,文件名。按实际模块需求命名。
文件命名:英文驼峰式命名,文件名。共用 ,首页 ,其
他页面按实际模块需求命名。
文件命名:英文驼峰式命名,文件名。共用 ,其他依实际模块需求
命名。
书写规范
文档类型声明及编码:统一为 的声明类型 !"#$%&;编码统一为
%'()*+,-).&,书写时利用 / 实现层次分明的缩进。
jsjs
非特殊情况下 文件必须在&.&之间引入,选择 0 方式引入而非
1' 形式。
非特殊情况下 文件必须在页面底部引入。
引入样式文件或 234' 文件时,须略去默认类型声明,写法如下:
0%'()5)%'+()).&
5&.5&
'%'())&.'&
引入 24 库文件,文件名须包含库名称及版本号及是否为压缩版,比如:
6*'5,;
7 引入插件,文件名格式为库名称8插件名称,比如:9*'50。
: 所有 ";< 标签嵌套必须是正确的,禁止出现多出或者少出闭合标签的情况。
- 所有编码均遵循 标准,标签、属性、属性命名必须由小写字母及下划线数字组成,
且所有标签必须闭合,包括 '='%.&>,'='%.&>等;属性值必须用双引号包括。
? 充分利用无兼容性问题的 自身标签,比如
、、'、'*、@@
10. 需要为 html 元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标
签去设置,如果没有,须以"data-"为前缀来添加自定义属性,避免使用"data:"等其
他命名方式。
语义化 ,如标题根据重要性用 ,7=同一页面只能有一个 >,段落标记用 ,列
表用 *,内联元素中不可嵌套块状元素。
尽可能减少 3 的嵌套层数。
在页面中尽量避免使用内嵌样式表,即在标签内使用 5()@)。
以背景形式呈现的图片,尽量写入 样式中;重要图片必须加上 属性;
特殊符号使用:尽可能使用代码替代:比如=AB>、&=AB>、空格
=AB>、A=AB>、
C(A6*B)等等;
7 尽量避免使用过度复杂的 ";< 结构。
书写规范
编码统一为 *+,-。
为了避免一些浏览器兼容性问题以及增加样式重用性,每个页面必须引入 (详
见附件一),此文件不可随意修改。
与 的使用: 是唯一的并是父级的, 是可以重复的并是子级的,所以
仅使用在大的模块上, 可用在重复使用率高及子级中。
为 234' 预留钩子的命名,请以 D起始,比如:D,D。
与 命名:使用英文命名,命名要语义化,简明化,但不要使用诸如 E', 之
类的命名。使用驼峰式和下划线分隔相结合的命名规则,即命名应以父级加子级的命名规范,
如:父级的类为 F子级的类应该为 DE',以此类推,但是尽量避免出现超过四级的类
命名。
7 属性书写顺序,建议遵循:自身属性,,&布局定位属性,,&文本属性,,&其他属性。此
条可根据自身习惯书写,但尽量保证同类属性写在一起。
属性列举:
自身属性主要包括:、、'、、''、0'*;
布局定位属性主要包括:5、,5、(相应的
、'、、+)、G、'、35、3'G;
文本属性主要包括:'、+、,'、,、3',、
,
其他:;
: 书写代码前,考虑并提高样式重复使用率。
- 充分利用 自身属性及样式继承原理减少代码量。
9. 样式表中中文字体名,请务必转码成 unicode 码,以避免编码错误时乱码。