前端开发规范：命名规范、HTML 规范、CSS 规范、JavaScript 规范

一个好的程序员肯定是要能书写可维护的代码，而不是一次性的代码，怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。
我是有一点强迫症的人，上周我们后端给我了一个CanUsename的接口（该接口的目的是判断输入的目的地是否是4级目的地），我真的是崩溃的。
我只是觉得这个名字不够语义化，但是让我自己想一个名字我又想不出来，于是我就在想，如果有一套命名规范的话，那么以后起名字就不用发愁了，直接按照规范来就好了~
于是端午在家就百度了一下~

命名

驼峰式命名法介绍

• Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo

• Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

文件资源命名

• 文件名不得含有空格

• 文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )

• 文件名包含多个单词时，单词之间建议使用半角的连词线 ( – ) 分隔。

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

 

不推荐：

HTML 代码:

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

推荐

HTML 代码:

1. src="//cdn.com/foundation.min.js">

变量命名

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

类型	小写字母
array	a
boolean	b
function	fn
int	i
object	o
regular	r
string	s

推荐

JavaScript 代码:

1. var tableTitle = "LoginTable"

不推荐

JavaScript 代码:

1. var getTitle = "LoginTable"

函数

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

动词	含义	返回值
can	判断是否可执行某个动作 ( 权限 )	函数返回一个布尔值。true：可执行；false：不可执行
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象

推荐：

JavaScript 代码:

1. //是否可阅读

2. function canRead(){

3.    return true;

4. }

5.  

6. //获取姓名

7. function getName{

8.    return this.name

9. }

常量

命名方法 : 全部大写
命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
推荐：

JavaScript 代码:

1. var MAX_COUNT = 10;

2. var URL = 'http://www.baidu.com';

类的成员

• 公共属性和方法 : 同变量命名方式

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

 

推荐(将name换成this是不是更熟悉了呢)

JavaScript 代码:

1. function Student(name) {

2.    var _name = name; // 私有成员

3.  

4.    // 公共方法

5.    this.getName = function () {

6.        return _name;

7.    }

8.  

9.    // 公共方式

10.    this.setName = function (value) {

11.        _name = value;

12.    }

13. }

14. var st = new Student('tom');

15. st.setName('jerry');

16. console.log(st.getName()); // => jerry：输出_name私有变量的值

注释规范

单行注释 ( // )

• 单独一行：//(双斜线)与注释文字之间保留一个空格

• 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。

• 注释代码：//(双斜线)与代码之间保留一个空格。

 

推荐 :

JavaScript 代码:

1. // 调用了一个函数；1)单独在一行

2. setTitle();

3.  

4. var maxCount = 10; // 设置最大量；2)在代码后面注释

5.  

6. // setName(); // 3)注释代码

多行注释 ( / 注释说明 / )

• 若开始(/*和结束(*/)都在一行，推荐采用单行注释

• 若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。

 

推荐 :

JavaScript 代码:

1. /*

2. * 代码执行到这里后会调用setTitle()函数

3. * setTitle()：设置title的值

4. */

5. setTitle();

函数 ( 方法 ) 注释

函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照 javadoc(百度百科)

语法：

JavaScript 代码:

1. /**

2. * 函数说明

3. * @关键字

4. */

常用注释关键字

注释名	语法	含义	示例
@param	@param 参数名 {参数类型} 描述信息	描述参数的信息	@param name {String} 传入名称
@return	@return {返回类型} 描述信息	描述返回值的信息	@return {Boolean} true:可执行;false:不可执行
@author	@author 作者信息 [附属信息：如邮箱、日期]	描述此函数作者的信息	@author 张三 2015/07/21
@version	@version XX.XX.XX	描述此函数的版本号	@version 1.0.3
@example	@example 示例代码	@example setTitle(‘测试’)	如下

推荐 :

JavaScript 代码:

1. /**

2. - 合并Grid的行

3. - @param grid {Ext.Grid.Panel} 需要合并的Grid

4. - @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。

5. - @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样

6. - @return void

7. - @author polk6 2015/07/21

8. - @example

9. - _________________                             _________________

10. - |  年龄 |  姓名 |                             |  年龄 |  姓名 |

11. - -----------------      mergeCells(grid,[0])   -----------------

12. - |  18   |  张三 |              =>             |       |  张三 |

13. - -----------------                             -  18   ---------

14. - |  18   |  王五 |                             |       |  王五 |

15. - -----------------                             -----------------

16. */

17. function mergeCells(grid, cols, isAllSome) {

18.    // Do Something

19. }

愚人码头注：推荐使用 JSDOC 或者 ESDOC

HTML规范

文档规范

使用 HTML5 的文档声明类型 : 

• DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

• 使用文档声明类型的作用是为了防止开启浏览器的怪异模式。

• 没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。

• 如果你的页面添加了那么，那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。

脚本加载

说到js和css的位置，大家应该都知道js放在下面，css放在上面。
但是，如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在内
兼容老旧浏览器(IE9-)时：
脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。
而在现代浏览器中：
脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。
综上所述，
所有浏览器中推荐:

HTML 代码:

2.  

3.     rel="stylesheet" href="main.css">

4.  

5.  

6.    

7.  

8.     src="main.js" async>

9.  

只兼容现代浏览器推荐:

HTML 代码:

2.  

3.     rel="stylesheet" href="main.css">

4.     src="main.js" async>

5.  

6.  

7.    

8.  

语义化

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

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

不推荐：

HTML 代码:

1. My page title

2. class="top-navigation">

3.   class="nav-item"> href="#home">Home

  class="nav-item"> href="#news">News

  class="nav-item"> href="#about">About