锐竞前端开发规范

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

二. 通用规范:

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)的声明,确保在每个浏览器中拥有一致的展现。

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

3. 中添加信息

    //作者

    //网页描述

    //关键字,用逗号分隔

    //网页不会被缓存

    //收藏图标

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

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

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

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

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

7. 尽可能减少

嵌套

五.  css书写规范

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

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. 编码格式化,三码统一

你可能感兴趣的:(锐竞前端开发规范)