web前端开发规范标准.docx

●书写地址时避免重定向。

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

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

2.4css书写规

●为了欺骗W3C的验证工具,可将代码分为两个文件，一个是针对所有浏览器,一个只针对IE。

即将所有符合W3C的代码写到一个文件中,而一些IE中必须而又不能通过W3C验证的代码（如:

cursor:

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

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

--只放置IE必须，而不能通过w3c的-->

--[ifIE]

[endif]-->

●CSS样式新建或修改尽量遵循以下原则。

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

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

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

不要轻易改动全站级CSS。

改动后，要经过全面测试。

●CSS属性显示顺序。

显示属性

元素位置

元素属性

元素容属性

CSS书写顺序。

.header{

/*显示属性*/

display||visibility

list-style

positiontop||right||bottom||left

z-index

clear

float

/*自身属性*/

widthmax-width||min-width

heightmax-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;/*Opera10.5+,以及使用了IE-CSS3的IE浏览器*//标准属性

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

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

可用上级节点进行限定。

.recommend-mod.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

●使用z-index属性尽量z-index的值不要超过150（通用组的除外），页面中的元素容的z-index不能超过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*/

*:

first-child+htmlselector{…};/*IE7*/

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

-moz-documenturl-prefix（）{…};/*firefox*/

mediaalland（-webkit-min-device-pixel-ratio:

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

mediaalland（-webkit-min-device-pixel-ratio:

10000）,notalland（-webkit-min-device-pixel-ratio:

0）{…};/*opera*/

mediascreenand（max-device-width:

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

对象的属性或方法名

小驼峰式（littlecamel-case）

如：

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,];

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

长语句可考虑断行。

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

.replace（'{PREV_NUM}',prev）

.replace（'{NEXT_NUM}',next）

.replace（'{CURRENT_NUM}',current）

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

为了避免和JSLint的检验机制冲突，“.”或“+”这类操作符放在行尾。

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

replace（'{PREV_NUM}',prev）.

replace（'{NEXT_NUM}',next）.

replace（'{CURRENT_NUM}',current）.

replace（'{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的转换。

/**推荐写法*/

Math.floor/Math.round/Math.ceil

/**不推荐写法*/

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,注重性能。

2.6图片规

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

header_btn.gif

header_btn2.gif