前端编码规范
前端规范整理:
1.css、图片命名均采用下划线命名(banner_名称,logo_名称,button_名称,menu_名称,pic_名称,title_名称)。
2.文件名采用驼峰命名(为了和php端保持统一),
3.js组件,css文件,如果是个人编写,在文件开头注明作者,js类注明参数,甚至使用方法。
4.文件名不能中文。
5.借用外来的代码,需要做一些必要的修改,你懂得。
HTML部分
1.文件头
A.<!DOCTYPE html>(推荐,因为目前我们主站就是这个)
B.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
2.标签统一小写,同理,属性也一样。<div id="header">是对的<div ID="header">或者<DIV id="header">是不对的。
3.标签必须闭合<div></div>不用说了吧<img src="xx.png" /><br />这样的标签,必须带后边的斜线
4.元素的正确嵌套.理解盒模型,比方<a href="ooxx"><div></div></a>不能如此嵌套 <ul><li></li><div></div></ul>也不能如此使用。
尽量保守使用html,不去自己猜想一些html嵌套方案。
5.文件名统一后缀为.html禁止.htm
6.语义化标签(对于理解不透彻的人员不做强制要求,但是尽可能多理解一点)
7.a标签建议尽可能加title, img标签尽可能加alter(要强制吗)
CSS部分
1.尽量采用外链调用css。
2.css书写顺序。(显示属性[display,position,float,z-index,zoom,overflow,clear]、
盒模型[margin,padding,width,height,border]、
文本属性[font,text-align]、
背景属性[background])
3.css常用命名,css选择器严禁采用id选择器。(http://www.cnblogs.com/jiajiaobj/archive/2013/04/08/3007526.html)
4.业务层css命名,加上业务前缀,避免和全局css冲突(书写css之前,建议先考虑全局css是否能满足需求.比方.red .clearfix .fl等)。
5.对于非图像文字的样式,默认统一如下: "字体('宋体',aria)", "正文字号(12px,14px)", "正文行距(150%,200%)"
6.尽量采用简写background:transparent url('') no-repeat scroll left top;
font:italic small-caps bold 12px/1.5em '宋体',arial;
(http://www.cnblogs.com/jiajiaobj/archive/2013/04/08/3008538.html)
7.尽可能每个样式独占一行,只有一个样式的,可以写一行(建议)。
.header {width:1000px;}
.header {
width:1000px;
height:100px;
border:1px solid #9c9c9c;
}
JS部分:
1.为了和大多数习惯保持统一,js变量名采用驼峰命名,变量名统一采用"类型前缀开头" + "有意义的英文单词"组成。
示例:
s:"string",sUsername, sHtml;
n:"number",nPager, nTotal;
b:"bool",bIsSb, bIs2b;
a:"array",aList, aGroup;
r:"regexp",rEmail,rUrl;
f:"function",fGetName,sSetTitle;
d:"date",dStartTime,dEndTime;
o:"object"(除却js内置可查的数据类型外,都采用这个开头,其实是废话,除了可查的数据类型,别的也只有object了), oButton, oPanne;
补充,在函数内部,作用域非常小的情况下,可以采用临时变量作为补充.为了简化代码敲打.参考(str,num,obj,bol,fun,arr,循环变量,i,j,k,m,n,o)
2.全局变量前边加g,例如gsUserName,gnTotal,grEmail(注意,这里所说的全局不是js语言意义上的全局变量,语言层面的全局是说的window下边的,这里所说的是跨文件,跨页面使用到的变量),
原则上,window下只允许定义三种变量(全局变量,常量,类,页面上业务逻辑,力推通过单独类的实例化来完成)
常量采用全部大写的方式,单词连接采用下划线.例如COPYRIGHT,VERSION,ONLINE_V6
所有同一作用域下变量的定义,都放在第一行。并且所有变量都尽可能定义在最小作用域范围内.
3.函数命名
a.函数名采用 f + (有意义的)动词(名词) 构成。(常用js命名关键词:get/set,add/remove,create/destroy,start/stop,insert/delete,begin/end,open/close,show/hide,is,has)
示例:
fGetName(), fSetName("肖昂"), fAddName("肖昂"), fHasName("肖昂"), fIsName("肖昂")
b.内部函数(包括所有不对外开放的函数,包括类的私有函数),统一采用双下划线开头.
示例:
function fGetName(id){
return __fGet(id,"name");
function __fGet(id,attr){
//return ooxx
}
}
c.如果函数内部包含内部函数,则内部函数永远位于函数体最靠下位置。
示例:
function fGetName(id){
var nId = id;
//do something....
return __fGet(id,"name");
//下边就是内部函数,放置于最底部
function __fGet(id,attr){
//return ooxx
}
}
4.类的定义以及实现.(每个类单独保存为一个文件)
示例:
(function(exports){
//类名首字母大写
function Boxy(options){
this.options = options;
this.__fInit();
}
Boxy.prototype = {
//public property
fSetSize:function(width, height){
},
//private property
__bIsOpen:false;
__fInit:function(){
},
__fGetId:function(){
}
}
exports.Boxy = Boxy;
})(this);
//useAge
new Boxy({"obj":$("#obj").get(0),"title":"新弹窗"}).fSetSize(100, 200);
5.代码中强烈反对直接出现数字,统一采用变量事先保存。
单行语句结束,必须使用";"结尾。避免压缩带来bug。
外链js引入格式:<script type=“text/javascript” src=“xxx.js”></script>
http://nodeguide.com/style.html#braces
参考文献资料:
1.常用css英文命名(http://www.cnblogs.com/jiajiaobj/archive/2013/04/08/3007526.html)
2.常用css简写(http://www.cnblogs.com/jiajiaobj/archive/2013/04/08/3008538.html)
3.yahoo34条(http://www.so.com)
4.程序猿常用英文单词(http://wenku.baidu.com/view/bc9d4284ec3a87c24028c494.html)
5.js语法细则(http://nodeguide.com/style.html#braces、http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html)