米扑科技公司的代码命名规范

米扑科技在公司发展的过程中，非常重视流程标准化、规范化，无规矩不成方圆，无以至千里。

米扑科技的核心技术成员，全部在BAT、谷歌、微软、亚马逊等世界顶级互联网工作过，自然收到大企业的代码标准化影响和益处。

顶级公司的代码规范

总体命名规范原则

驼峰式命名法

1）大驼峰（Pascal Case）：首字母大写，例如：StudentInfo、UserInfo、ProductInfo，适用于类名、框架名、构造函数名

2）小驼峰（Camel Case）：首字母小写，例如：studentInfo、userInfo、productInfo，适用于变量名、函数名

3）字母全部大写，例如 NUM、G_NUM、README、LINCENCE，适用于全局变量、说明性文件

1、变量

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

类型	类型缩写
array	arr
boolean	bool
function	fn
int	int
object	obj
regular	reg
string	str

示例：

var tableTitle = "LoginTable"	// 推荐
var getTitle = "LoginTable"		// 不推荐

米扑科技的变量规范：

NUM = 2016  	  		// 全局常量
EXPIRE_NUM = 2066      	// 全局常量

gNum = 10    			// 全局变量    
g_num = 10				// 全局变量 
g_expire_num			// 全局变量 		

mNum = 10				// 局部变量
m_num = 10				// 局部变量
m_expire_num			// 局部变量

tmpNum = 10				// 临时局部变量
tmp_num = 10			// 临时局部变量
tmp_expire_num = 10		// 临时局部变量

2、函数

变量适用小驼峰式命名方法，命名规范 : 动词+对象描述的方式，构造函数使用大驼峰命名

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

米扑科技的变量规范：

canRead() 、getName()、validMobile()、isLoginSuccess()

示例：

// 是否可阅读
function canRead(file) {
    return true;
}

// 获取姓名
function getName() {
    return this.name
}

// 验证手机号
function validMobile(mobile) {
    return true
}

// 判断是否登录成功
function isLoginSuccess() {
    return true
}

3、类名

类成员命名

1）公共属性和方法 : 同变量命名方式，如 mNum、m_num、m_expire_num

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

示例：

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私有变量的值

4、文件名

mimvp_css_2016012215.css // 推荐小写字母 + 下划线；不要用大写字母、中文、横线、空格等，不容易读取

README、LINCENCE // 说明性的文件，可以用全部的大写字母

//mimvp_css_2016012215.css // 引入资源时使用相对目录，不要指定资源所带的具体协议 ( http:, https: )

<script src="http://cdn.mimvp.com/foundation.min.js"></script>		// 不推荐
<script src="//cdn.mimvp.com/foundation.min.js"></script>			// 推荐

HTML 代码命名规范

文件命名规范

1、html，css，js，lib，img，fonts 文件均存放至项目的目录中。如果使用相关前端框架，根据框架的文件格式进行合理布局。

2、所有文件夹及文件使用小写英文 + 数字 + 下划线命名（避免使用中文路径）。

3、html文件：入口文件使用index.html。如果有对应的设计组设计原稿，需要将对应的设计稿和html文件命名一致并合理存放。

4、css文件命名：后缀.css。通用initial.css，初始化base.css，首页index.css，其他页面按照对应的html命名。

5、Js文件命名：英文命名，后缀.js.通用common.js，初始化base.js。其他页面按照对应的html命名。

CSS 规范

1、编码规范为utf-8，可以兼容各国的语言文字

2、协作开发及分工：i会根据各个模块，同时根据页面相似程序，事先写**体框架文件，分配给前端人员实现内部结构&表现&行为。共用css文件base.css由i书写，协作开发过程中，每个页面请务必都要引入，此文件包含reset及头部底部样式，此文件不可随意修改。

3、class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的，为JS预留钩子的除外。

4、为JS预留钩子的命名，请以js_起始，比如：js_hide，js_show。

5、class与id命名：大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&来组合命名，如i_comment，fontred，width200。避免使用中文拼音，尽量使用简易的单词组合。总之，命名要语义化，简明化

6、规避class与id命名(此条重要，若有不明白请及时与i沟通)：a）通过从属写法规避，示例见d。b）取父级元素id/class命名部分命名，示例见d。c）重复使用率高的命名，请以自己代号加下划线起始，比如i_clear。d）a，b两条，适用于在2中已建好框架的页面，如，要在2中已建好框架的页面代码中加入新的div元素，按a命名法则：...，样式写法：#mainnav.firstnav{.......}按b命名法则：...，样式写法：.main_firstnav{.......}

7、css属性书写顺序，建议遵循：布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举：

布局定位属性主要包括：display、list-style、position（top，right，bottom，left）、float、clear、visibility、overflow；

自身属性主要包括：width、height、margin、padding、border、background。

文本属性主要包括：color、font、text-decoration、text-align、vertical-align、white-space、其他&content。

8、书写代码前，提高样式重复使用率。

9、充分利用html自身属性及样式继承原理减少代码量，例如：

即可实现日期居右显示

ul.list li {
position：relative
}
ul .list li span {
position：absolute；right：0
}
10、样式表中，中文字体名，请务必转码成unicode码，以避免编码错误时乱码。

11、背景图片请尽可能使用精灵图技术，减小http请求，考虑到多人协作开发，精灵图按模块制作。

12、使用table标签时(尽量避免使用table标签)，请不要用width/height/cellspacing/cellpadding等table属性直接定义表现，应尽可能的利用table自身私有属性分离结构与表现，如thead，tr，th，td，tbody，tfoot，colgroup，scope。(cellspaing及cellpadding的css控制方法：table{border：0。margin：0。border-collapse：collapse。}tableth，tabletd{padding：0。}，base.css文件中我会初始化表格样式)

13、杜绝使用兼容ie8。

14、用png图片做图片时，要求图片格式为png-8格式，若png-8实在影响图片质量或其中有半透明效果，请为ie6单独定义背景：_background：none。_filter：progid：DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop，src=’img/bg.png’)。

15、避免兼容性属性的使用，比如text-shadow||css3的相关属性。

16、减少使用影响性能的属性，比如position：absolute、float。

17、必须为大区块样式添加注释，小区块适量注释。

18、代码缩进与格式：建议单行书写，可根据自身习惯，后期优化会统一处理。

米扑科技的CSS命名规范

class 和 id 都以横线（-）连接，不用下划线，在 js 中引用 id 时，js 变量要求全部是下划线连接

例如：

class和id：mimvp-body、mimvp-price-title、mimvp-price-pay-btn

js：mimvp_price_pay_btn

css 命名中，id不应该被用于样式，并且id的权重很高，而是使用class

/* 不推荐，css不用id */
#content .title {
  font-size: 2em;
}

/* 推荐，css全部用class */
.content .title {
  font-size: 2em;
}

css 使用子选择器

从结构、表现、行为分离的原则来看，应该尽量避免css中出现HTML标签（如 span、h1），并且在css选择器中出现标签名会存在潜在的问题。

/* 不推荐 */
.content .title {
  font-size: 2rem;
}

/* 推荐 */
.content > .title {
  font-size: 2rem;
}

字体大小的绝对值与相对值（px pt em rem）

1、px

Px像素（Pixel）表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素 px 与设备的物理像素 pt 有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站，可使用 em、rem来完成。

px，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。

px 特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px，em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

2、pt

pt 点（Points），绝对长度单位，印刷行业常用的单位(磅)，等于1/72英寸，一般用于页面打印排版。

不知道经常做设计的同学知不知道zeplin这个网站，它用的像素单位都是pt。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

用法：

div { font-size:10pt; }

Retina屏物理像素与css像素关系图

以iPhone的Retina屏为例，其物理像素与css像素关系见上图

为此移动端浏览器以及某些桌面浏览器引入了devicePixelRatio（DPR）属性，其官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。而css像素=独立像素，由此我们可以得出 devicePixelRatio = 物理像素 / css像素，进而可以推算出该设备上一个css像素代表几个物理像素。例如iPhone的retina屏的devicePixelRatio = 2，那么该设备上一个css像素相当于2个物理像素。

3、em

em是相对长度单位，相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size；若当前文本 font-size 是px则使用绝对值px，不使用相对值em）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

em 特点

1. em的值并不是固定的，是相对于当前父节点的 font-size 的比例值；

2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px，即所有未经调整的浏览器都符合: 1em=16px。

那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。（强烈推荐）

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；（前提，body正文内容都是 body:font-size=62.5%; 10px=1em）

2. 将你的原来的px数值除以10，然后换上em作为单位，例如：16px 现在转换成了 1.6em;

3. 重新计算那些被放大的字体的em数值，避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px，因此会重复逐级计算，效率低。因此，最好使用根字体比例大小 rem

4、rem

rem是CSS3新增的一个相对单位（root em，根em），其参考对象为根元素<html>的font-size，因此只需要确定这一个font-size（em需考虑），只会计算一次，不用像 em 那样重复逐级计算

这个单位引起了广泛关注。这个单位与em有什么区别呢？

区别在于使用rem为元素设定字体大小时，仍然是相对大小，但 rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。

对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。

这些浏览器会忽略用rem设定的字体大小，下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px，或者两者同时使用。

px 与 rem 的选择

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

px 、em、rem 使用示例

/** body:100%=16px; 可以自定义，不同浏览器的比例标准不一样，参阅 https://www.w3.org/TR/CSS21/sample.html
 * h1=32px		->	2		rem
 * h2=24px		->	1.5		rem
 * h3=18.72px	->	1.17		rem
 * h4=16px		->	1		rem
 * h5=13.28px	->	0.83		rem
 * h6=12px		->	0.75		rem		实测不准确(错误的)
 * h6=10.72px	->	0.67		rem		chrome, firefox
 *
 * 可以自定义（注: 供参考，没启用），仍使用系统默认的比例大小
 * h1 {font-size: 36px;}	 	36/16 = 2.25		rem 
 * h2 {font-size: 30px;}	 	30/16 = 1.875	rem 
 * h3 {font-size: 24px;}	 	24/16 = 1.5		rem 
 * h4 {font-size: 18px;}	 	18/16 = 1.125	rem 
 * h5 {font-size: 14px;}	 	14/16 = 0.875	rem 
 * h6 {font-size: 12px;}	 	12/16 = 0.75		rem 
 */
h1, h2, h3, h4, h5, h6 {
	font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #333;
}

Default style sheet for HTML 4

This appendix is informative, not normative.

This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.

The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.

For other elements, the legacy presentation can be described in CSS but the solution removes the element. For example, the FONT element can be replaced by attaching CSS declarations to other elements (e.g., DIV). Likewise, legacy presentation of presentational attributes (e.g., the "border" attribute on TABLE) can be described in CSS, but the markup in the source document must be changed.

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

css 属性格式

为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
每个选择器和属性声明总是使用新的一行。
属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：

display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding

表现性属性：

background, border etc.
font, text

示例：

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

0 后面不带单位

/* 不推荐 */
padding-bottom: 0px;
margin: 0em;

/* 推荐 */
padding-bottom: 0;
margin: 0;

JS 代码命名规范

1、文件编码统一为utf-8，书写过程过，每行代码结束必须有分号。原则上所有功能均根据XXX项目需求原生开发，以避免网上down下来的代码造成的代码污染(沉冗代码||与现有代码冲突||...)。

2、库引入：原则上仅引入jQuery库，若需引入第三方库，须与团队其他人员讨论决定。

3、变量命名：驼峰式命名.原生JS变量要求是纯英文字母，首字母须小写，如myVue。jQuery变量要求首字符为'_'，其他与原生JS规则相同，如：_myVue。另，要求变量集中声明，避免全局变量.

4、类命名：首字母大写，驼峰式命名.如MyVue。

5、函数命名：首字母小写驼峰式命名.如myVue()。

6、命名语义化，尽可能利用英文单词或其缩写。

7、尽量避免使用存在兼容性及消耗资源的方法或属性，比如eval_r()&innerText。

8、后期优化中，JS非注释类中文字符须转换成unicode编码使用，以避免编码错误时乱码显示。

9、代码结构明了，加适量注释.提高函数重用率。

10、注重与html分离，减小reflow，注重浏览器性能.

Python 代码命名规范

PHP 代码命名规范

代码注释规范

1、单行注释 （// 或 #）

1）单独一行：// (双斜线)与注释文字之间保留一个空格，美观，方便阅读

2）在代码后面添加注释：// (双斜线)与代码之间保留一个或多个制表符tab，并且// (双斜线)与注释文字之间保留一个空格，美观，方便阅读

3）注释代码：// (双斜线)与代码之间保留一个空格，一般使用IDE的快捷键批量注释

示例：

// 单独在一行注释
setTitle();

var strTitle = "mimvp.com"; 	// 在代码后面注释

// setTitle(); 					// 注释代码

2、多行注释 （/* xxx */ 或 ''' xxx '''）

多行注释时，第一行为/*，最后行为*/，两者都单独一行，其他行以*开始，并且注释文字与*保留一个空格。

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

3、函数说明注释

函数或方法的注释，一般是多行注释，但是包含了特殊的注释要求，参照 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(‘测试’)

示例：

/**
 * 单发短信, 无模板ID，需手动指定签名【米扑科技】
 * @param string $nationCode		:	【必填】国际电话号码, 如中国86，美国1
 * @param array $phoneNumbers	: 	【必填】接收短信的手机号数组，单发和群发短信都是数组格式，统一格式
 * @param string $smsCode		:	【必填】验证码, 默认6位数字，或4位数字
 * @param number $smsExpire		:	【必填】验证码的过期时间，单位分钟，默认30分钟，注意：此参数不会传入发送短信API函数，而只是米扑自己控制并给客户看的
 * @param string $smsExt			:	【可选】用户的 session 内容，原样返回的参数，默认为空
 * @param number $smsType		: 	【可选】短信类型，0 为普通短信(验证和通知，默认)，1 营销短信 
 * @return string $resultJson	: 	返回的结果，json格式
 */

参考推荐：

HTML css、id、name、js 代码命名规范

Improve your jQuery – 25 excellent tips

jQuery 实现侧边浮动导航菜单效果

CSS+JS 悬浮固定菜单效果