锐竞前端开发规范

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

二. 通用规范:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容