web前端开发规范：命名规范、html规范、css规范、js规范

一个好的程序员肯定是要能书写可维护的代码，而不是一次性的代码，怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。

命名

驼峰式命名法介绍

• 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>

变量命名

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

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

推荐

var tableTitle = "LoginTable"

不推荐

var getTitle = "LoginTable"

函数

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

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

推荐：

//是否可阅读
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私有变量的值
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

注释规范

单行注释 ( // )

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

推荐 :

// 调用了一个函数；1)单独在一行
setTitle();

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

// setName(); // 3)注释代码复制代码

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

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

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

  /*
  * 代码执行到这里后会调用setTitle()函数
  * setTitle()：设置title的值
  */
  setTitle();
  

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，编程工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行前端前端前端

函数 ( 方法 ) 注释

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

/** 
* 函数说明 
* @关键字 
*/

常用注释关键字

注释名	语法	含义	示例
@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(‘测试’)	如下

推荐 :

/**
 - 合并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   |  张三 |              =>             |       |  张三 |
 - ---------------