前端开发规范：命名规范、文件资源命名、html规范、css规范、js规范

命名

驼峰式命名法介绍

• Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo（建议使用）
• Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词

文件资源命名(indexName.html)：小驼峰式
 

• 命名原则的指导思想

一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义

二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

 

• 文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；
• 文件名建议只使用小写字母，不使用大写字母。

如：productList.html 或者product_list.jsp（或者是模块名_子模块名_操作的方式）

• 文件名为两个或两个以上单词组成,文件名称第二个单词起的第一个字母要大写（推荐）

例如:友情链接(单个):link 公司简介(两个):aboutUs

• 所有命名如果利用数字编号来区分文件,第一个文件命名中的1必须忽略。

例如:aboutUs aboutUs2 aboutUs3

• ( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )​​​​​​
• 将文件对应界面稿放于同目录中, 以方便后端添加功能时查找对应页面;

 

引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。

 

不推荐：

<script src="http://cdn.com/foundation.min.js"></script>

•  

推荐

<script src="//cdn.com/foundation.min.js"></script>

 

 

 

html规范（语义化）

1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;
2. html文件命名: 文件名建议只使用小写字母，不使用大写字母。
3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;
4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

 

脚本加载:

说到js和css的位置，大家应该都知道js放在下面，css放在上面。

兼容老旧浏览器(IE9-)时：
脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。

语义化

我们一直都在说语义化编程，语义化编程，但是在代码中很少有人完全使用正确的元素。使用语义化标签也是有理由SEO的。

语义化是指：根据元素其被创造出来时的初始意义来使用它。
意思就是用正确的标签干正确的事，而不是只有div和span。

HTML只关注内容

• HTML只显示展示内容信息
• 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
• 不要将img元素当做专门用来做视觉设计的元素
• 样式上的问题应该使用css解决

 

 

css规范（item-list）：

多单词：下划线(item_list) - 逻辑样式建议、分割线(item-list) - 分层样式主流建议、小驼峰（itemList）- 权重样式建议、下划线小驼峰（name_itemList）- 混合样式

一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class

尽量使用缩写属性对于代码效率和可读性是很有用的，比如font属性。

不推荐：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0后面不带单位

不推荐：

padding-bottom: 0px;
margin: 0em;

推荐：

padding-bottom: 0;
margin: 0;

 

js规范（类：J_命名方法；id:nameIndex）：下划线、驼峰式、混合

 

 

命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )
命名规则 : 前缀为动词

私有属性和方法 : 前缀为下划线(_)后面跟公共属性和方法一样的命名方式