XX公司前端编码规范V2.0

目录
1.范围 (2)
2.术语和定义 (2)
3.排版规范 (2)
3.1.规则 (2)
4.注释规范 (3)
4.1.规则 (3)
5.命名规范 (4)
5.1.规则 (4)
5.2.建议 (5)
6.编码规范 (5)
6.1.规则 (5)
6.2.建议 (8)
7.注释规范 (9)
7.1.规则 (9)
Javashop编码规范
1.范围
本规范规定了使用Java语言编程时排版、注释、命名和编码的规则和建议。

2.术语和定义
规则：编程时强制必须遵守的原则。

建议：编程时必须加以考虑的原则。

格式：对此规范格式的说明。

说明：对此规范或建议进行必要的解释。

示例：对此规范或建议从正、反两面给出例子。

3.排版规范
3.1.规则
3.1.1.程序代码块（html、javascript）采用缩进风格编写。

缩进的数量为1个tab键（4个
空格数）。

说明：采用tab键可能不适应不同系统与不同开发工具
3.1.2.这些元素独立一行：div、ul、li、p等等，除此之外的元素可以和其他元素写在一行
示例：
独占一行的标签：
可以写在一起的标签：
3.1.3.Javascript的排版按照《Javashop编码规范》里的排版规范执行
4.注释规范
4.1.规则
4.1.1.应该在主要的元素块（或div内代码超过10行）的前后增加注释，内容为名称及详
细作用。

示例：
4.1.2.Javascript的注释除function外，其他注释按照《Javashop编码规范》里的注释规范
执行。

5.命名规范
5.1.规则
5.1.1.文件夹名称可使用常用的文件夹名称。

其他名称利用百度翻译。

且文件夹与文件夹的内容要对应，比如购物车文件夹却放了会员的html。

常用文件夹名称：
cart(购物车)、checkout（结算）、detail（商品详细）、
goods（多店铺商家商品）、home（商家页面）、
member（会员中心）、store（多店铺商家平台）、
common（公共页面，例如header.html等）、css（网站样式*.css）、
images（图片）、js（javascript、jquery文件）
5.1.2.class常用名称。

5.1.3.html css js的命名采用全小写，用减号（-）分隔英文字母，文件名开头必须是字母
开头。

某些情况需要对文件增加前后缀或特定的扩展名（比如：.min.js，.min.css），或一串前缀（比如：2fa89s.main.min.css）。

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

示例：
错误的命名：
正确的命名
5.1.4.一般情况下，ID不能用于样式，ID的样式不能被复用，并且每个页面中你只能使用
一次ID。

而且ID的选择权重很高，一般情况都应该始终考虑使用class，而不是ID，除非你只使用一次。

5.2.建议
5.2.1.CSS选择器中应该尽量避免使用元素名。

如果我们只关心class名，而不是代码元素，
这样更加容易维护。

6.编码规范
6.1.规则
6.1.1.a标签的href属性不能写#，若确实无需连接，则应该写成href=”javascript:void(0);
6.1.2.行内标签禁止嵌套块级元素。

示例：
以下代码就是错误的：
6.1.3.多媒体元素（例如：图片、视频），要确保其有可代替的接入接口。

图片文件我们可
采用有意义的备选文本（alt），视频和音频文件我们可以加上说明文字或字幕。

（图片的alt属性是可不填写内容的，如纯装饰性图片就可以这么做：alt=””）。

6.1.4.HTML内使用双引号，而不是单引号，除非极其特殊的情况。

6.1.5.属性选择器或者属性值用双引号，Url的值不需要引号。

6.1.6.元素内的属性，不能只写属性不写值。

示例：
应该改为：
6.1.
7.每个CSS头部都应该有详细标注，来说明这个css文件的作用。

比如：/*==== 商品详细====*/
6.1.8.CSS内的值必须小写。

示例：
错误：WIDTH:12PX;
应该改为：width: 12px;
6.1.9.CSS内不应该把所有的css都写在一行，这样对可读性的影响很大，而且也不能起到
压缩css的作用（压缩是使用专业的软件压缩，而不是手写在一行）。

示例：
如下代码可读性就很差：
应该改为：
6.1.10.省略0值后面的单位，不要在0值后面使用单位，除非有值。

示例: padding:0; margin-top:0;等等
6.1.11.PC Html文档类型：
6.1.12.Wap Html文档类型：
6.2.建议
6.2.1.样式尽量抽离放到css文件中，尽量不要写行内样式。

6.2.2.在wap版中，input为text时，应该给其加上font-size属性以及值，否则手机端输入
会放大。

6.2.3.属性和值（属性和冒号之间没有空格）的之间始终使用一个空格如：font-weight:bold;
可改为font-weight: bold;
6.2.4.规则之间应该始终使用空行分隔。

6.2.5.样式的属性尽量使用简写。

示例：
如：margin-top: 10px;
margin-bottom: 10px;
可简写为：
margin: 10px 0;
7.其他规范
7.1.规则
7.1.1.所有HTML都应该引入基本css（base.css文件）。

7.1.2.装饰性零碎的背景图片，可整体剪切成为一个大的背景图。

然后用css中的背景定
位来确定正确的位置。

这样可以优化性能，不用请求很多次。