一个好的程序员肯定是要能书写可维护的代码，而不是一次性的代码，怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。我是有一点强迫症的人，上周我们后端给我了一个CanUsename的接口（该接口的目的是判断输入的目的地是否是4级目的地），我真的是崩溃的。我只是觉得这个名字不够语义化，但是让我自己想一个名字我又想不出来，于是我就在想，如果有一套命名规范的话，那么以后起名字就不用发愁了，直接按照规范来就好了
命名
驼峰式命名法介绍
- Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo
- Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo文件资源命名
- 文件名不得含有空格
- 文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )
- 文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
- 引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。
不推荐：
<script src="http://cdn.com/foundation.min.js"></script>
推荐
<script src="//cdn.com/foundation.min.js"></script>
变量命名
命名方式 : 小驼峰式命名方法命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词
推荐
var tableTitle = "LoginTable"
不推荐
var getTitle = "LoginTable"
函数
命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )命名规则 : 前缀为动词
推荐：
//是否可阅读 function canRead(){ return true; } //获取姓名 function getName{ return this.name }复制代码
常量
命名方法 : 全部大写命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。推荐：
var MAX_COUNT = 10; var URL = 'http://www.baidu.com';复制代码
类的成员
- 公共属性和方法 : 同变量命名方式
- 私有属性和方法 : 前缀为下划线(_)后面跟公共属性和方法一样的命名方式
推荐(将name换成this是不是更熟悉了呢)
function Student(name) { var _name = name; // 私有成员 // 公共方法 this.getName = function () { return _name; } // 公共方式 this.setName = function (value) { _name = value; } } var st = new Student('tom'); st.setName('jerry'); console.log(st.getName()); // => jerry：输出_name私有变量的值复制代码
注释规范
单行注释 ( // )
- 单独一行：//(双斜线)与注释文字之间保留一个空格
- 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
- 注释代码：//(双斜线)与代码之间保留一个空格。
推荐 :
// 调用了一个函数；1)单独在一行 setTitle(); var maxCount = 10; // 设置最大量；2)在代码后面注释 // setName(); // 3)注释代码复制代码
多行注释 ( / 注释说明 / )
- 若开始(/*和结束(*/)都在一行，推荐采用单行注释
- 若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。
推荐 : /* * 代码执行到这里后会调用setTitle()函数 * setTitle()：设置title的值 */ setTitle();复制代码
函数 ( 方法 ) 注释
函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照 javadoc(百度百科)语法：
/** * 函数说明 * @关键字 */
常用注释关键字
推荐 :
/** - 合并Grid的行 - @param grid {Ext.Grid.Panel} 需要合并的Grid - @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。 - @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样 - @return void - @author polk6 2015/07/21 - @example - _________________ _________________ - | 年龄 | 姓名 | | 年龄 | 姓名 | - ----------------- mergeCells(grid,[0]) ----------------- - | 18 | 张三 | => | | 张三 | - ----------------- - 18 --------- - | 18 | 王五 | | | 王五 | - ----------------- ----------------- */ function mergeCells(grid, cols, isAllSome) { // Do Something }
HTML规范
文档规范
使用 HTML5 的文档声明类型 : <!DOCTYPE html>
- DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
- 使用文档声明类型的作用是为了防止开启浏览器的怪异模式。
- 没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。
- 如果你的页面添加了<!DOCTYP>那么，那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。
脚本加载
说到js和css的位置，大家应该都知道js放在下面，css放在上面。但是，如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在<head>内兼容老旧浏览器(IE9-)时：脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。而在现代浏览器中：脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。综上所述，所有浏览器中推荐:
<html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <!-- body goes here --> <script src="main.js" async></script> </body> </html>
只兼容现代浏览器推荐:
<html> <head> <link rel="stylesheet" href="main.css"> <script src="main.js" async></script> </head> <body> <!-- body goes here --> </body> </html>
