美文网首页
锐竞前端开发规范

锐竞前端开发规范

作者: 菜头圣 | 来源:发表于2017-05-31 10:39 被阅读0次

    一. 规范目的:使开发流程更加规范化。

    二. 通用规范:

    1. 关于tab, windows下tab键占用4个空格,Linux下占用8个空格

    2.css样式属性或者javascript代码后加分号,方便压缩工具“断句”

    3.文件内容编码均统一为UTF-8 无BOM编码

    4.css,js中的非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示

    三.  文件规范:

    1. 文件名用英文单词,多个单词用驼峰命名法或下划线

    2. 一些浏览器会将含有这些词的作为广告拦截,文件命名、ID、CLASS等所有命名避免以上词汇。

    `ad`、`ads`、`adv`、`banner`、`sponsor`、`gg`、`guangg`、`guanggao`等

    四.  html书写规范:

    1. 为每个HTML页面的第一行添加标准模式(standard mode)的声明,确保在每个浏览器中拥有一致的展现。

    <!DOCTYPE html>

    2. 文档类型声明统一为html5声明类型,编码统一为UTF-8

    <meta charset="utf-8">

    3. <head>中添加信息

        <meta name="author" content=""> //作者

        <meta name="description" content=" "> //网页描述

        <meta name="keywords" content="a,b,c">//关键字,用逗号分隔

        <meta http-equiv="Cache-control" content="no-cache, must-revalidate"> //网页不会被缓存

        <link rel="Shortcut Icon" href="favicon.ico"> //收藏图标

        IE支持通过特定标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求,否则最好是设置为edge mode ,从而通知IE采用其所支持的最新的模式。

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    4. 非特殊情况下,css样式文件外链至head之间,javascript 文件外链至页面底部。

    5. 含有描述性表单元素添加label

    6.多用无兼容性问题的html内置标签

           比如span, em ,  strong , optgroup , label等,需要自定义HTML标签属性时,首先考虑是否已有的合适标签可替换,如果没有,可以使用以“data-”为前缀来添加自定义属性,避免使用其他命名方式。

    7. 尽可能减少<div>嵌套

    五.  css书写规范

    1. 为了欺骗w3c的验证工具,可将代码分成两个文件,一个是针对所有浏览器,一个只针对IE。即       将所有符合w3c的代码写到一个文件中,而一些IE中必须而又不能通过w3c验证的代码(如             cursor:hand)放到另一个文件中,再用下面的方法导入。

    <!--放置所有浏览器样式-->

    <link rel="stylesheet" type="text/css' href="">

    <!--只放置IE必须,而不能通过w3c的-->

    <!-- [ if IE ]

    <link rel="stylesheet" href=" ">

    <![endif]-->

    2. css样式新建或修改遵循的原则

         根据新建样式的适用范围分为三级:全站级,产品级,页面级。

         尽量通过继承或层叠重用已有样式

         不要轻易改动全站级css, 改动后,要经过全面测试

    3. css属性显示顺序

         显示属性,元素位置,元素属性,元素内容属性

    4. css书写顺序

    .header{

    /*显示属性*/

    display || visibility

    list-style

    position top || right || bottom || left

    z-index

    clear

    float

    /*自身属性*/

    width  max-width || min-width

    height max-height || min-height

    overflow || clip

    margin

    padding

    outline

    border

    background

    /*文本属性*/

    color

    font

    text-overflow

    text-align

    text-indent

    line-height

    white-space

    vertical-align

    cursor

    content

    };

    兼容多个浏览器时,将标准属性写在底部

    -moz-border-radius:15px;  /*Firefox*/

    -webkit-border-radius:15px; /*Safari和Chrome*/

    border-radius:15px;   /*Opera 10.5+,以及使用IE-CSS3的IE浏览器*/  //标准属性

    5.使用选择器时,命名比较短的词汇或者缩写的不允许直接定义样式

    .hd,.bd,.td{}  //如这些命名

    可用上级节点进行限定

    .recommand-mod .td{}

    6.使用z-index属性尽量z-index的值不要超过150(通用组的除外),页面中的元素内容的z-index不能超过10(提示框等模块除外但维持在150以下),不允许直接使用(999~9999)之间大值。

    7.避免使用低效的选择器

    body>*{}

    ul>li>a{}

    ......./*反面示例*/

    8. 五个不要三个避免一个使用

    不要在标签上直接写样式

    不要在css中直接写expression

    不要在css中写@import

    不要在css中写!important

    不要在css中使用* 通配符

    避免使用filter

    避免使用行内(inline)样式

    避免使用*设置margin, padding

    使用after或overflow的方法清除浮动

    9. 减少使用影响性能的属性

    position:absolute; float: left

    减少在css中使用滤镜表达式和图片repeat,  尤其在body当中渲染性能极差,如果需要用repeat的话,图片的宽或高不能少于8px

    六. javascript书写规范

      1.命名规范

    常量:全部大写并单词间用分隔线分隔

    对象的属性或方法名:小驼峰式

    如init, bindEvent,  updatePosition

    示例:Dialog.prototype={

           init:function(){};

           bindEvent:function(){},

           updatePosition:function(){}

    }

    类名(构造器):小驼峰式但首字母大写,比如Current,DefaultConfig

    函数名:小驼峰式,如current(),  defaultConfig()

    变量名:小驼峰式, 如current,  defaultConfig

    私有变量名:小驼峰式但是要以_开头,如_current, _defaultConfig

    2. 代码格式

    if, while, for , do语句需要用{}括起来

    json对象需要格式化对象参数

    for-in 循环体内用hasOwnProperty方法检查成员是否为自身成员,避免来自原型链上的污染。

    3. 长语句可以考虑断行

    4. 使用严格的条件判断符,用===代替==,用!==代替!=,避免掉入==的陷阱,在条件判断时,null, undefined, 空字符串,数字0,NaN这些值表示false.

    在==时,则会有一些让人难以理解的陷阱

    (function(){

    var undefined;

    undefined==null;// true

    1==true;//true

    2==true;// false

    0==false;// true

    0=='';// true

    NaN==NaN;// false

    [] ==false;// true

    [] == ![];// true

    })();

    5. number类型,string类型,布尔值,Object和数组Array不建议用new构造

    6. 引用对象成员用obj.prop代替obj["prop"], 除非属性名是变量

    7. 从number转换为string时推荐使用number+“ ”,不推荐使用new String(number)或number.toString()

    8. 从string转换为number时用parseInt(), 有必要的话加上第二个参数,表示进制。

    9. 从float到integer的转换推荐使用Math.floor或Math.round或Math.ceil

    10. 字符串拼接应使用数组保存字符串片段,使用时调用join方法。避免使用+或+=的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能。

    11. 尽量避免使用存在兼容性及消耗资源的方法或属性

    例如with , void . evil,innerText

    12.注重html分离,减少reflow,注重性能

    七.  图片规范

         1.命名应用小写字母,数字,_组合,便于团队其他成员理解,例如header_btn.gif

        2.页面元素类文件均放入images文件夹

    八.  注释规范

        1. JAVASCRIPT、CSS文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。

    2.  中间可以添加如下信息。

    @file文件名

    @addon把一个函数标记为另一个函数的扩展,另一个函数的定义不在源文件中

    @argument用大括号中的自变量类型描述一个自变量

    @author函数/类作者的姓名

    @base如果类是继承得来,定义基类名称

    @class用来给一个类提供描述,不能用于构造器的文档中

    @constructor描述一个类的构造器

    @deprecated表示函数/类已被忽略

    @exception描述函数/类产生的一个错误

    @exec@extends表示派生出当前类的另一个类

    @fileoverview表示文档块将用于描述当前文件,这个标签应该放在其它任何标签之前

    @final指出函数/类

    @ignore让jsdoc忽视随后的代码

    @member定义随后的函数为提供的类名称的一个成员

    @param用大括号中的参数类型描述一个参数

    @private表示函数/类为私有,不应包含在生成的文档中

    @requires表示需要另一个函数/类

    @return描述一个函数的返回值

    @see连接到另一个函数/类

    @throws描述函数/类可能产生的错误

    @type指定函数/成员的返回类型

    @version函数/类的版本号

    九.  开发及测试工具约定

    1. 编码格式化,三码统一

    相关文章

      网友评论

          本文标题:锐竞前端开发规范

          本文链接:https://www.haomeiwen.com/subject/uuidfxtx.html