web前端开发规范.docx

●书写链接地址时防止重定向.

href="//即在URL地址后面加“/”

●HTML中对于属性的定义，确保全部使用双引号，绝不要使用单引号

2.4css书写规范

●为了欺骗W3C的验证工具,可将代码分为两个文件，一个是针对所有浏览器,一个只针对IE.即将所有符合W3C的代码写到一个文件中,而一些IE中必须而又不克不及通过W3C验证的代码（如:

cursor:

hand;）放到另一个文件中，再用上面的方法导入.

放置所有浏览器款式>

只放置IE必须，而不克不及通过w3c的>

[ifIE]

[endif]>

●CSS款式新建或点窜尽量遵守以下准绳.

根据新建款式的适用范围分为三级：

全站级、产品级、页面级.

尽量通过继承和层叠重用已有款式.

不要轻易改动全站级CSS.改动后，要经过全面测试.

●CSS属性显示顺序.

显示属性

元素地位

元素属性

元素内容属性

CSS书写顺序.

.header{

/*显示属性*/

display||visibility

liststyle

positiontop||right||bottom||left

zindex

clear

float

/*本身属性*/

widthmaxwidth||minwidth

heightmaxheight||minheight

overflow||clip

margin

padding

outline

border

background

/*文本属性*/

color

font

textoverflow

textalign

textindent

lineheight

whitespace

verticalalign

cursor

content

};

兼容多个浏览器时，将尺度属性写在底部.

mozborderradius:

15px;/*Firefox*/

webkitborderradius:

15px;/*Safari和Chrome*/

borderradius:

15px;/*Opera10.5+,和使用了IECSS3的IE浏览器*//尺度属性

●使用选择器时，命名比较短的词汇或者缩写的不答应直接定义款式.

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

可用上级节点进行限制.

.recommendmod.hd

多选择器规则之间换行，即当款式针对多个选择器时每个选择器占一行.

button.btn,

input.btn,

input[type="button"]{…};

优化CSS选择器.

#headera{color:

#444;};/*CSS选择器是从右侧到右边进行匹配*/

浏览器将检查全部文档中的所有链接和每个链接的父元素，并遍历文档树去查找ID为header的先人元素，如果找不到header将追溯到文档的根节点，解决方法如下.

防止使用通配规则和相邻兄弟选择符、子选择符,、后代选择符、属性选择符等选择器

不要限制id选择符，如div#header（提权的除外）

不要限制类选择器，如ul.recommend（提权的除外）

不要使用ullia如许长的选择符

防止使用标签子选择符，如#header>li>a

●使用zindex属性尽量zindex的值不要超出150（通用组的除外），页面中的元素内容的zindex不克不及超出10（提示框等模块除外但保持在150以下），不答应直接使用（999~9999）之间大值.

●尽量防止使用CSSHack.

property:

value;/*所有浏览器*/

+property:

value;/*IE7*/

_property:

value;/*IE6*/

*property:

value;/*IE6/7*/

property:

value\9;/*IE6/7/8/9，即所有IE浏览器*/

*htmlselector{…};/*IE6*/

*:

firstchild+htmlselector{…};/*IE7*/

html>bodyselector{…};/*非IE6*/

@mozdocumenturlprefix（）{…};/*firefox*/

@mediaalland（webkitmindevicepixelratio:

0）{…};/*saf3+/chrome1+*/

@mediaalland（webkitmindevicepixelratio:

10000）,notalland（webkitmindevicepixelratio:

0）{…};/*opera*/

@mediascreenand（maxdevicewidth:

480px）{…};/*iPhone/mobilewebkit*/

●防止使用低效的选择器.

body>*{…};

ul>li>a{…};

#footer>h3{…};

ul#top_blue_nav{…};

#searbarspan.submita{…};/*反面示例*/

●六个不要三个防止一个使用.

不要在标签上直接写款式

不要在CSS中使用expression

不要在CSS中使用@import

不要在CSS中使用!

important

不要在CSS中使用“*”选择符

不要将CSS款式写为单行

防止使用filter

防止使用行内（inline）款式

防止使用“*”设置{margin:

0;padding:

0;}

使用after或overflow的方式清浮动

●减少使用影响功能的属性.

position:

absolute;

float:

left;//如这些定位或浮动属性

减少在CSS中使用滤镜表达式和图片repeat,

特别在body当中,衬着功能极差,如果须要用repeat的话,图片的宽或高不克不及少于8px.

2.5javaScript书写规范

●命名规范.

常量名

全部大写并单词间用下划线分隔

如：

CSS_BTN_CLOSE、TXT_LOADING

对象的属性或方法名

小驼峰式（littlecamelcase）

如：

init、bindEvent、updatePosition

示例：

Dialog.prototype={

init:

function（）{},

bindEvent:

function（）{},

updatePosition:

function（）{}

…

};

类名（构造器）

>小驼峰式但首字母大写

>如：

Current、DefaultConfig

函数名

>小驼峰式

>如：

current（）、defaultConfig（）

变量名

>小驼峰式

>如：

current、defaultConfig

私有变量名

>小驼峰式但须要用_开头

>如：

_current、_defaultConfig

变量名的前缀

>续

●代码格式.

"（）"前后须要跟空格

"="前后须要跟空格

","后面须要跟空格

JSON对象需格式化对象参数

if、while、for、do语句的履行体用"{}"括起来

"{}"格式如下.

if（a==1）{

//代码

};

防止额外的逗号.

vararr=[1,2,3,];

forin轮回体中必须用hasOwnProperty方法检查成员是否为本身成员，防止来自原型链上的净化.

长语句可考虑断行.

TEMPL_SONGLIST.WordStr（'{TABLE}',da['results']）

.WordStr（'{PREV_NUM}',prev）

.WordStr（'{NEXT_NUM}',next）

.WordStr（'{CURRENT_NUM}',current）

.WordStr（'{TOTAL_NUM}',da.page_total）;

为了防止和JSLint的检验机制冲突，“.”或“+”这类操纵符放外行尾.

TEMPL_SONGLIST.WordStr（'{TABLE}',da['results']）.

WordStr（'{PREV_NUM}',prev）.

WordStr（'{NEXT_NUM}',next）.

WordStr（'{CURRENT_NUM}',current）.

WordStr（'{TOTAL_NUM}',da.page_total）;

如果模块代码中，使用其它全局变量想跳过JSLint的检查，可以在该文件中加入/*global*/声明.

/*globalalert:

true,console:

true,top:

true,setTimeout:

true*/

使用严酷的条件判断符.用===代替==，用!

==代替!

=，防止掉入==形成的圈套

在条件判断时，如许的一些值暗示false.

null

undefined与null相等

字符串''

数字0

NaN

在==时，则会有一些让人难以理解的圈套.

（function（）{

varundefined;

undefined==null;//true

1==true;//true

2==true;//false

0==false;//true

0=='';//true

NaN==NaN;//false

[]==false;//true

[]==!

[];//true

}）（）;

对于分歧类型的==判断，有如许一些规则，顺序自上而下：

undefined与null相等

一个是number一个是string时，会测验考试将string转换为number

测验考试将boolean转换为number

0或1

测验考试将Object转换成number或string

而这些取决于另外一个对比量，即值的类型，所以对于0、空字符串的判断，建议使用===

.===会先判断两边的值类型，类型不匹配时为false.

●上面类型的对象不建议用new构造.

newNumber

newString

newBoolean

newObject//用{}代替

newArray//用[]代替

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

●从number到string的转换.

/**推荐写法*/

vara=1;

typeof（a）;//"number"

console.log（a）;//1

varaa=a+'';

typeof（aa）;//"string"

console.log（aa）;//'1'

/**不推荐写法*/

newString（a）或a.toString（）

从string到number的转换，使用parseInt，必须显式指定第二个参数的进制.

/**推荐写法*/

vara='1';

varaa=parseInt（a,10）;

typeof（a）;//"string"

console.log（a）;//'1'

typeof（aa）;//"number"

console.log（aa）;//1

从float到integer的转换.

/**推荐写法*/

/**不推荐写法*/

parseInt

字符串拼接应使用数组保管字符串片段，使用时调用join方法.防止使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响功能.

/**推荐的拼接方式array的push、join*/

varstr=[],

list=['测试A','测试B'];

for（vari=0,len=list.length;i

str.push（'

};

console.log（str.join（''））;//

/**不推荐的拼接方式+=*/

varstr='',

list=['测试A','测试B'];

for（vari=0,len=list.length;i

str+='

};

console.log（str）;//

●尽量防止使用存在兼容性及耗费资本的方法或属性.

不要使用with，void，evil，eval_r，innerText

●重视HTML分离,减小reflow,重视功能.

●命名利用小写英文、数字、_组合，便于团队其他成员理解.

●页面元素类图片均放入img文件夹,

测试用图片放于img/testimg文件夹，psd源图放入img/psdimg文件夹.

●图片格式仅限于gif、png、jpg等.

用png图片做图片时,

请求图片格式为png8格式,若png8实在影响图片质量或其中有半透明后果,

请为ie6单独定义布景，并尽量防止使用半透明的png图片.

●布景图