前端编码规范


前端规范整理:

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)

posted @ 2013-04-09 12:35  潴哥  阅读(359)  评论(0编辑  收藏  举报