• 前端规范


    【写在规则前面的话】

            项目的可维护性第一。你不是一个人在做事,项目的维护和二次开发可能是直接的或间接的团队合作。好的可维护性,从四个方面下手:


    1)代码的松耦合,高度模块化,将页面内的元素视为一个个模块,相互独立,尽量避免耦合过高的代码,从html,css,js三个层面都要考虑模块化。


    2)良好的注释。


    3)注意代码的弹性,在性能和弹性的选择上,一般情况下以弹性为优先考虑条件,在保证弹性的基础上,适当优化性能。


    4)严格按照规范编写代码。

    【命名规则】

           为避免命名冲突,命名规则如下:


    1)公共组件因为高度重用,命名从简,不要加前缀;


    2)各栏目的相应代码,需加前缀,前缀为WD姓名拼音的首字母,例如:杰夫前缀为“jf_”,分隔符为下划线“_”,例如:“jf_imgList”;

    3)模块组件化,组件中的class或id名采用骆驼命名法和下划线相结合的方式,单词之间的分隔靠大写字母分开,从属关系靠下划线分隔。例如:


    html:
    <ul class=”textList”>
    <li class=”textList_firstItem”>1)XXXXXXXXXXXXXX</li>
    <li>2)XXXXXXXXXXXXXX</li>
    <li>3)XXXXXXXXXXXXXX</li>
    </u1>
    css:
    .textList{       }V    .text_list X
    .textList_firstItem{        } V     .textListFirstItem X


    4)命名清晰,不怕命名长,怕命名容易冲突,长命名可以保证不会产生冲突,所以css选择时可以尽量不使用子选择符,也能确保css优先级权重足够低,方便扩展时的覆盖操作:
    .textList_firstItem{        } V        .textList .firstItem{         }X

    5) 命名要有意义,不要使用没有意义的命名。用英语命名,不要用拼音。

    【分工安排】


    1)分工原则为公共组件(包括common.css和public.JS)一人维护,各栏目其他人负责,每个栏目正常情况下一人负责,要详细写明注释,如果多人合作,维护的人员注意添加注释信息,具体注释细则,详见注释规则;

    2)VD设计完设计图后,先和交互设计师沟通,确定设计可行,然后先将设计图给公共组件维护者,看设计图是否需要提取公共组件,然后再提交给相应栏目的WD。如果有公共组件要提取,公共组件维护者需对栏目WD说明。

    3)如果确定没有公共组件需提取,交互设计师直接和各栏目的WD交流,对照着VD的设计图进行说明,WD完成需求;

    4)WD在制作页面的时候,需先去common文件中查询是否已经存在设计图中的组件,如果有,直接调用;没有,则在app.css和app.JS中添加相应的代码。

    5)WD在制作过程中,发现有高度重用的模块,却未被加入到公共组件中,需向公共组件维护人进行说明,然后工作组件维护人决定是否添加该组件。如果确定添加,则向WD们说明添加了新组件,让WD们检查之前是否添加了类似组件,统一更新成新组件的用法,删除之前自定义的css和js。虽然麻烦,但始终把可维护性放在首位。

    6)公共组件维护者的公共组件说明文档,需图片和说明文字配套,方便阅读。

    【注释规则】


    1.公共组件维护者和各栏目WD都需要在文件头部加上注释说明:
    /**
    *文件用途说明
    *作者姓名、联系方式(旺旺)
    *制作日期
    **/

    2.大的模块注释方法:
    //================
    // 代码用途
    //================

    3.小的注释;
    //代码说明
    注释单独一行,不要在代码后的同一行内加注释。

    例如:
    //姓名
    var name = “abc”;   V
    var name =”abc”; //姓名 X

    4.维护人员的注释方法:尽量根据注释说明,找到代码的原作者,让原作者进行维护,原作者进行维护可以无需添加额外说明,直接进行修改。如果因为特殊原因,无法让原作者进行维护,需添加额外说明进行注释。说明文字为:“/*change by xxx) 原代码如下:
    <{源代码}>.新代码如下:*/
    新代码:
    如:var name = “abc”;这段代码,要将name由“abc”变成“123”,原作者可直接改var name=”123”;非原作者修改,需改成:
    /*(change by 杰夫) 原代码如下:<{
    var name = “abc”;
    }>新代码如下:*/
    var name =”123”;

    修改时添加的注释,在项目通过测试之后,上线前,可以优化掉。

    【HTML规范】


    1)DTD统一用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。


    2)统一utf-8编码。


    3)html,css,js缩进统一使用tab键。


    4)标签名,属性名全部小写,属性需加引号,单标签需闭合,例如<hr> V. <hr /> X.


    5)html应在保证弹性的基础上尽量减少嵌套层数。


    6)严格区分做为内容的图片和做为背景的图片。做为背景的图片采用css sprite技术,放在一张大图里。大图的安排也遵从common+app的方式,全站彩的图片告之公用组件维护者,添入common.gif中,各栏目的图片,各WD各自拼命到app.gif中。Css sprite技术的优点是减少了http请求数,但使图片面性css的background-position耦合度增加了,增加了维护成本。如果图片有修改,不要删已添加的图片,在空白处新增修改后的图片,减小修改的风险。


    7)标签语义化,webdevelper去样式可读性良好。

    8)方便程序员配程序,html需为模块添加注释。格式为<!--something开始{-->XXXXXX<!--}something结束-->。例如:

    <!--头部开始{-->
    <div class="head">
    <div class="header clearfix">
       <h1 class="fr">站长天下</h1>
       <h2 class="fb fl">阿当测试站点<span class="gray fn">的页面管理模式</span></h2>
       <input type="button" value="完成并退出" class="ml50 fl" />  
    </div>
    </div>
    <!--}头部结束-->

    【css规范】


    1)css Reset 用YUI的css Reset;


    2)css采用cssReset+common.css+app.css的形式;


    3)app.css采用分工制,一个WD负责一个栏目,如果多人维护,需要添加诠释;


    4)为方便组件模块化和提高弹性,正常情况下,为避免外边界冲突,组件不设置外边界,外边界用组合css的方式实现,例如:


    html:
    <p>12345</p>
    <ul class="textList">
    <li>1)XXXXXXXXXXX</li>
    <li>2)XXXXXXXXXXX</li>
    </ul>
    <p>abcde</p>
    <ul class="textList2">
    <li>1)XXXXXXXXXXX</li>
    <li>2)XXXXXXXXXXX</li>
    </ul>

    css:
    .textList,.textList2{margin-top:10px;XXXXXXXXXXXXXX}
    .textList2{margin-top:20px;}

    X
    =====================================================
    html:
    <p>12345</p>
    <ul class="textList marginTop10">
    <li>1)XXXXXXXXXXX</li>
    <li>2)XXXXXXXXXXX</li>
    </ul>
    <p>abcde</p>
    <ul class="textList marginTop20">
    <li>1)XXXXXXXXXXX</li>
    <li>2)XXXXXXXXXXX</li>
    </ul>

    css:
    .textList{XXXXXXXXXXXXXX}
    .marginTop10{margin-top:10px;}
    .marginTop20{margin-top:20px;}

    V

    5)为避免组件的上下外边距重合问题和IE的haslayout引发的bug,各模块除特殊需求,一律采用marginTop设置上下外边距,例如:
    <p>XXXXXXXXXXXXX</p>
    <p class="marginTop10 marginBottom10">XXXXXXXXXXXX</p>
    <p>XXXXXXXXXXXXX</p>

    X
    =====================================================
    <p>XXXXXXXXXXXXX</p>
    <p class="marginTop10">XXXXXXXXXXXXX</p>
    <p class="marginTop10">XXXXXXXXXXXXX</p>

    V

    6)优先组合已存在的common.css中的类进行组合,减少自定义类的数量。

    7)css用一行的写法,避免行数太长,不利查找。例如:

    .menu{margin:0;float:left;font-weight:bold;}   V

    .menu{

          margin:0;

          float:left;

          font-weight:bold;

    }    X

    【js规范】


    1)底层JS库采用YUI 2.6.0;


    2)统一头部中只载入YUI load组件,其他组件都通过loader对象加载;


    3)js尽量避免使用全局变量,复杂应用写成组件,通过构造函数实现多态,写在公共组件或外部js中,简单应用直接写在init函数中,通过命名空间或匿名函数将变量包进闭包中。

  • 相关阅读:
    表单提交时,更新的操作
    提交后刷新本页面与移除本页面的JS写法
    jquery的$.each如何退出循环和退出本次循环
    修改本机host文件,使upf报表操作变的快
    代码记录
    JQuery简介
    Ubuntu安装
    PHP笔记(PHP高级篇)
    将Session写入Memcache
    将Session写入数据库
  • 原文地址:https://www.cnblogs.com/cly84920/p/4427045.html
Copyright © 2020-2023  润新知