zoukankan      html  css  js  c++  java
  • 前端编码规范


    前端规范整理:

    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 {1000px;}

        .header {

                   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)

  • 相关阅读:
    IOS苹果应用IPA一键签名工具(苹果重签名,企业签名,Windows平台,时间控制)
    BZ全景编辑器
    HTML/网站一键打包APK工具(html网页打包安卓APP应用)
    HTML网页/KRPano项目一键打包EXE工具(HTML网页打包成单个windows可执行文件exe)
    KRPano资源分析工具使用说明(KRPano XML/JS解密 切片图批量下载 球面图还原 加密混淆JS还原美化)
    IOS苹果应用IPA重签名软件手机版(苹果重签名,企业签名,安卓苹果平台,时间控制)
    使用HTML一键打包IPA工具打包KRPANO全景项目
    使用HTML一键打包APK工具打包KRPANO全景项目
    使用HTML一键打包EXE工具打包KRPANO全景项目
    从现实产品生产理解创建型设计模式
  • 原文地址:https://www.cnblogs.com/jiajiaobj/p/3009827.html
Copyright © 2011-2022 走看看