前端规范之命名规则
2016-05-06 10:15
351 查看
最佳原则
坚持制定好的代码规范。
无论团队人数多少,代码应该同出一门。
1.项目命名
全部采用小写方式, 以下划线分隔。
例:my_project_name
2.目录命名
参照项目命名规则;
有复数结构时,要采用复数命名法。
例:scripts, styles, images, data_models
3.JS文件命名
参照项目命名规则。
例:account_model.js
4.CSS, SCSS文件命名
参照项目命名规则。
例:retina_sprites.scss
5.HTML文件命名
参照项目命名规则。
例:error_report.html
6.css,sass,less的类名和Id命名
类名使用小写字母,以中划线分隔;
eg: .my-first-name
id采用驼峰式命名;
eg: #myFirstName
sass,less中的变量、函数、混合、placeholder采用驼峰式命名;
eg: $mainWidth, #mainHeight
7.JS中变量命名
标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
eg: var myFirstName
'ID'在变量名中全大写
eg:
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个,大写后两个字母
eg:
常量全大写,用下划线连接
eg: var MAX_INDEX = 1;
构造函数,大写第一个字母
jquery对象必须以'$'开头命名
// not good
var body = $('body');
// goodvar
$body = $('body');
坚持制定好的代码规范。
无论团队人数多少,代码应该同出一门。
1.项目命名
全部采用小写方式, 以下划线分隔。
例:my_project_name
2.目录命名
参照项目命名规则;
有复数结构时,要采用复数命名法。
例:scripts, styles, images, data_models
3.JS文件命名
参照项目命名规则。
例:account_model.js
4.CSS, SCSS文件命名
参照项目命名规则。
例:retina_sprites.scss
5.HTML文件命名
参照项目命名规则。
例:error_report.html
6.css,sass,less的类名和Id命名
类名使用小写字母,以中划线分隔;
eg: .my-first-name
id采用驼峰式命名;
eg: #myFirstName
sass,less中的变量、函数、混合、placeholder采用驼峰式命名;
eg: $mainWidth, #mainHeight
7.JS中变量命名
标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
eg: var myFirstName
'ID'在变量名中全大写
eg:
var goodID;
'URL'在变量名中全大写
eg: var reportURL;
'Android'在变量名中大写第一个字母
eg:var AndroidVersion;
'iOS'在变量名中小写第一个,大写后两个字母
eg:
var iOSVersion;
常量全大写,用下划线连接
eg: var MAX_INDEX = 1;
构造函数,大写第一个字母
function Person(name) { this.name = name; }
jquery对象必须以'$'开头命名
// not good
var body = $('body');
// goodvar
$body = $('body');
相关文章推荐
- (礼拜五log)document.cookie AND 前端图标推荐
- js、Extjs中函数的赋值和调用
- HTML&CSS
- CSS默认可继承样式
- hbase 错误:ERROR: Can't get master address from ZooKeeper; znode data == null
- caffe failed: error == cudaSuccess (2 vs. 0) out of memory
- Bootstrap的使用
- 为已存在的Hadoop集群配置HDFS Federation
- [译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
- Javascript设计模式-单例模式(一)
- jquery.validate.js 在ie8下的兼容性解决方案
- D3.js学习笔记十二:D3.js构图(d3.layout)——力学(Force)图
- HTML中使背景图片自适应浏览器大小
- [翻译]Gulp.js简介
- angular的directive的属性和用法
- 原生JS实现贪吃蛇项目,附源码下载!
- POJ 2761-Feed the dogs(划分树)求区间内第k小的数
- JS总结
- JSTL标签用法
- js中的二级联动技术的实现