前端开发规范——个人总结版

随着前端的需求增多，前端开发者也相继的增加，码农多的是，现在很多不管是线上还是线下的培训机构都招收了大量的学员，什么热门教什么，但是出去的程序猿到公司之后表现并不是很好，并且又一些部分程序猿到了那里过了没多久就有因为很多原因而被辞。我们有的时候可以想一想，思考一下自身需要提高一些哪些技能；

对于程序猿本身来说，就是想求得一份高薪的工作。当然了，应届生或者毕业不久的人来说，薪资不是特别高，需要熬一段时间，需求高薪的旅途上，面试是一个途径，如果面试很不错，可以有一个好的谈判资本。当然了，这需要量力而行。话不说的太多了，下面开始了。

首先给大家介绍的是开发规范，内容比较多，大家可以先行收藏之后进行查看，也可以经常去搜集源码以及看API，看一看经验老道的开发人员是怎样进行开发的。再次发布一些根据自己的经验以及搜集的资料来给大家整理的一些规范，如果有误，请大家在评论中给予指正，我会马上进行修改错误并及时更新，在此先行感谢大家进行的反馈。当然了，也有个人喜好，命名方式大致也会不同；

前端命名规范：
1、HTML文件命名规范：

1）统一用小写的英文字母、数字和下划线，不得使用汉字、空格以及特殊字符；

2）使用index进行文件命名，索引文件名

3）各页面命名的规则：

1、统一使用翻译的英文命名，或英文简写

2、统一使用拼音命名，或拼音简写

3、注意：不要英文拼音混合使用
2、图片命名规则：

1）图片的命名分为头尾两部分，用下划线隔开，前半部分使用图片的大类性质，例如：广告，标志，菜单，按钮等

2）放置在页面顶部的广告，装饰图案等长方形的图片取名：banner

3）标志性的图片取名为logo

4）在页面上位置不固定并且带有链接的小图片取名为：button

5）在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名为：menu
3、脚本文件命名规则：

1）实际模块：例如：广告-->ad.js，弹框-->pop.js

2）公用模块：英文名，如：common.js，basic.js

4、动态语言命名规则：

1）以性质_描述可以有多个单词，性质一般是页面的概要；

2）示例：register_form.jsp,show_userlist.jsp

5、文件位置存放规范：
1）flash存放flash文件

2）images存放图片文件

3）inc存放include文件

4）library存放DW库文件

5）media存放多媒体文件

6）script存放外部JQuery文件

7）js存放手写js文件

8）css存放css文件

6、CSS属性设置：
1）字体颜色值：类似#000000可以使用简写#000;

2）backgraund-img : *;background-color: *;可以使用简写：
background:#000 url("images/logo.png");

7、Class命名规则：
1）页面结构：

1)容器：container/warp

2)整体宽度：wapper

3)页头：header

4)内容：content

5)页面主体：main

6)页尾：footer

7)侧栏：sidebar

8)l栏目：column

9)中间内容：center

2）导航：

1)导航：nav

2)主导航：mainnav，globalnav

3)子导航：subnav

4)顶导航：topnav

5)边导航：sidebar

6)左导航：leftsidebar

7)右导航：rightsidebar

8)边导航图标：sidebaricon

9)菜单：menu

10)子菜单：submenu

11)标题：titile

3）功能：

1)标志：logo

2)登陆：login

3)登录条：loginbar

4)注册：registe

5)产品：products

6)产品价格：products_prices

7)产品评论：products_review

8)编辑评论：editor_review

9)广告/标语：banner

10)摘要：summary

11)生产商：publisher

12)缩略图：screenshot

13)常见问题：fags

14)关键字：keyword

15)博客：blog

16)论坛：forum

17)搜索：search

18)搜索输入框：search_input

19)搜索输出：search_output

20)搜索结果：search_results

21)加入我们：joinus

22)状态：status

23)按钮：btn

24)滚动:scroll

25)标签页：tab

26)文章列表：list

27)提示信息：msg/message

28)当前的：current

29)小技巧：tips

30)皮肤：skin

31)活动：activities

32)推广：promotion

33)公告：announcement

34)排行：raking

35)公司简介：company_profile

36)公司设备：equipment

37)公司荣誉：glories

38)企业文化：culture

39)企业规模：scale

40)营销网络：sales_network

41)组织机构：organization

42)技术力量：technology

43)分支机构：branches

44)企业资质：enterprise_qualification

45)公司实力：strength_strength
46)经营理念：operation_principle

47)经理致辞：manager_oration

48)分类浏览：browse_by_category

49)分类浏览：browse_by_category

50)人力资源：human_resource_hr

51)领导致辞： leader_oration

52)客户留言：customer_message

53)客户服务：customer_service

54)您的要求：your_requirements

55)销售信息：sales_information

56)招商：enterprise_establishing

57)教育培训：education_training

58)在线交流：online_communication

59)质量认证：quality_certification

60)合作加盟：joinIn_cooperation

61)产品描述：products_description

62)业务范围：business_scope

63)产品销售：product_sales

64)联系我们：contact_us

65)信息发布：information

66)返回首页：homepage

67)产品定购：order

68)电子商务：e_business

69)版权所有：copy _right

70)友情连结：hot_link

71)行业新闻：trade_news

72)行业动态：trends

73)邮编：postal_code_zipcode

74)新闻动态：news_trends

75)公司名称：company_name

76)销售热线：sales_hotline

77)联系人：contact_person

78)建设中：in_construction

79)证书：certificate

80)地址：add

81)电话：tel

82)传真：fax

83)产品名称：product_name

84)产品说明：description

85)价格：price

86)品牌：brand

87)规格：specification

88)尺寸：size

89)生产厂家：manufacuturer

90)型号：model

91)产品标号：item_no

92)技术指标：technique_data

93)产品描述：description

94)产地：production_place

95)用途：application

96)论坛：forum

97)在线订购：on_line_order

98)招标：bidInviting

99)综述：general

100)业绩：achievements

101)大事：great_event

102)动态：trends

103)服务：service

104)投资：investment

105)行业：industry

106)规划：programming

107)环境：environment

108)发送：delivery

109)提交：submit

110)重写：reset

111)社区：community

112)业务：business

113)在线调查：online_inquiry

114)下载中心：download

115)意见反馈：feedback

116)常见问题：faq

117)中心概况：general_profile

118)游乐园：amusement_park

119)专题报道：special_report

120)图标: icon

121)注释：note

122)指南：guild

123)服务：service

124)热点：hot

125)新闻：news

126)下载：download

127)投票：vote

128)商标：label/branding

129)：breadcrumb/loc

130)购物车：shop

131)标签：tag

132)信誉：siteinfo_credits

133)网站信息：siteinfo

134)法律声明：siteinfo_legal

135)合作伙伴：partner

136)友情链接：friendlink

137)版权：copyright

8、head区域代码规范：

1）关键字：<meta name="keyword" content="this is key words"/>

2）外部引入css层叠样式表：<link href="css/style.css" rel = "stylesheet" type="text/css"/>

3）网页字符集设置：<meta http equiv ="Content Type" content ="text/html;charset=utf-8">

4）网页标题：title的设置

5）公司版权注释

5）网页制作者信息

6）网站简介

7）网页机器人搜索，蜘蛛抓取，告诉 它，哪些是需要抓取的，哪些是不需要抓取的；

9、字体规范：

1）在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 <font size=?> 标记。

2）字体大小：在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial两种字体。一般使用中文宋体的9pt和11pt或12px
和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt 和14.7px 的字号比较合适。

3）为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br> 来人工干预分段。

4）不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外， 汉字之间的标点要用全角标点，英文字母和
数字周围的括号应该使用半角括号。

5）请不要在网页中连续出现多于一个的空格，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用
text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。

6）行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.

7）排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p {
text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记

10、链接和表格的使用规范：

1）链接使用规范：

1）网站中的链接路径全部采用相对路径

2）一般链接到某一目录下的缺省文件的链接路径不必写全名：例如：`<a href=”aboutus/index.htm”>` 而应该这样
：`<a href=”aboutus/”>`

3）在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端， 从而影响用户正常的阅读内容， 我们用
代码“javascript:void(null)”代替原来的“#”标记
2）表格使用规范：

1）尽量避免表格嵌套过多--->后果会对浏览器加载延长时间， 带来不友好的用户体验

2）在写 <table> 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个
半角空格，<td>中如果还有嵌套的表格，<table>也缩进两个半角空格， 如果<td>中没有任何嵌套的表格，</td> 结束标记应该与<td>处于同一行，不要
换行
11、下载和浏览速度规范：

1）文件下载可以通过 a标签href指向路径直接实现

2）首页Flash网页大小应限定在200K以下， 尽可能的使用矢量图形和Action来减小动画大小。

3）非首页静态页面含图片大小应限定在70K 左右，尽可能的使用背景颜色替换大块同色图片。

4）能够用背景色替代图片，尽量使用背景色

5）尽量切小图片，进行平铺

12、alt以及titile的使用规范：

1）alt一般对图片进行提示

2）titile一般对文字进行提示

13、缓存：

1）缺点：

1）对于一些涉及用户重要信息的页面如果页面被缓存则很危险

2）占用大量硬盘资源

2）优点：

1）可以提高浏览器浏览页面的效率

3）相关设置：

1）<META HTTP-EQUIV="pragma" CONTENT="no-cache">

2）<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

3）<META HTTP-EQUIV="expires" CONTENT="0">

14、浏览器兼容：

1）所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析， 造成页面显示效果不统一的情况。

2）不同浏览器的标签默认的外补丁和内补丁不同

1）问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%，解决
方案：CSS里 *{margin:0;padding:0;}，备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设
置各个标签的内外补丁是0。

3）浏览器兼容问题二：块属性标签float后， 又有横行的margin情况下，在IE6显示margin比设置的大:

1）问题症状:常见症状是IE6中后面的一块被顶到下一行，碰到频率：90%（稍微复杂点的页面都会碰到，float布局
最常见的浏览器兼容问题），解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性，备注：我们最常用的就是div+CSS布局了
，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼
容性问题。

4）设置较小高度标签（一般小于10px）， 在IE6，IE7，遨游中高度超出自己设置高度：

1）问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度，碰到频率：60%，解决方案：给超出
高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。备注：这种情况一般出现在我们设置小圆角背景的标签里。 出现这个
问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。 即使你的标签是空的，这个标签的高度还是会达到默认的行高。

5）元素水平居中问题：

1）1. FF: margin:0 auto;IE: 父级{ text-align:center; }
6）const问题：

1）说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.解决方法：
统一使用var关键字来定义常量.
7）模态和非模态窗口问题：

1）说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能. 解决方法
：直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访
问父窗口，例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
8）float的延续性：

1）说明：在i.e.浏览器中，如果使用float设置元素浮动对齐。如果不关闭浮动，将会对后面的元素标签延续浮动。

解决方法：在设置float的元素后面加上clear:both，关闭浮动。
15、LOGO设计：

1）其中关于网站的LOGO，目前有三种规格：

1）88*31 这是互联网上最普遍的LOGO规格。

2）120*60 这种规格用于一般大小的LOGO。

3）120*90 这种规格用于大型LOGO。

16、JavaScript使用规范：

1）书写：书写过程中,每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代
码污染(沉冗代码 || 与现有代码冲突 ||...);

2）变量命名格式：变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字
符为'_', 其他与原生JavaScript规则相同, 如: _iTaoLun; 另,要求变量集中声明,避免全局变量.

3）函数命名： 首字母小写驼峰式命名. 如iTaoLun();

4）代码结构明了,加适量注释.提高函数重用率；注重与html分离,减小reflow, 注重性能

5）文件书写：JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码，因为存在与HTML中的
JavaScript代码会明显增加文件大小，且不能对其进行缓存和压缩。filename.js或JavaScript的代码应尽量放到body的后面。 这样可以减少因为载入脚
本而造成其他页面内容载入也被延迟的问题。

6）缩进：缩进的单位为四个空格。避免使用Tab键来缩进。 因为始终没有个统一的Tab长短标准。虽然使用空格会增加文件的大小，
但在局域网中几乎可以忽略，且在最小化过程中也可被消除掉。

7）避免每行超过 80 个字符。当一条语句一行写不下时，请考虑折行。在运算符号，最好是逗号后换行。 在运算符后换行可以减少因
为复制粘贴产生的错误被分号掩盖的几率。

8）所有的变量必须在使用前通过var进行声明。JavaScript并不强制必须这么做， 但这么做可以让程序易于阅读，且也容易发现那些
没声明的变量(它们会被编译成全局变量)。 将var语句放在函数的首部。最好把每个变量的声明语句单独放到一行，并加上注释说明。 var
currentEntry;//当前选择项 var　level;//缩进程度　 var size; // 表格大小，尽量减少全局变量的使用。不要让局部变量覆盖全局变量。

9）函数声明：所有的函数在使用前进行声明。内函数的声明跟在var语句的后面. 这样可以帮助判断哪些变量是在函数范围内的。

10）使用{}代替new　Object()。使用[]代替new　Array()。这样便于书写且能提高一点执行效率。当成员名是一组有序的数字时使用
数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。

11） event.srcElement问题：问题说明：I.E.下，even对象有srcElement属性，但是没有target属性； Firefox下，even对象有
target属性，但是没有srcElement属性。解决方法：使用 var obj=event.target||window.event.srcElement;

12）parentElement问题：firefox与I.E.的父元素(parentElement)的区别，IE：obj.parentElement，firefox：obj.parentNode，解
决方法: 因为firefox与I.E.都支持DOM,因此使用obj.parentNode是不错选择.

17、图片的使用规范：
1）存放位置：所有页面元素类图片均放入images文件夹, 测试用图片放于img/demoimg文件夹

2）格式：图片格式仅限于gif || png || jpg；

3）命名：命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队
其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4）在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间；

5）运用css sprite技术集中小的背景图或图标, 减小页面http请求,但注意,请务必在对应的spritepsd源图中划参考线, 并保存至
img/images目录下.

18、注释的规范：

1）html--------->注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;

2）css--------->注释格式 /*这儿是注释*/;

3）javascript

1）单行：单行注释使用//这儿是单行注释 ,

2）多行：多行注释使用 /* 这儿有多行注释 */;

19）浏览器兼容css：

1）CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的
CSS效果。

2）
div{background-color:green;*background-color:red;(bothIE6%%IE7)}
上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的， 于是将它过滤掉，不予理睬，解析得到
的结果是:div{background:green}, 于是理所当然这个div的背景是绿色的。 在IE6中呢，它两个background都能识别出来， 它解析得到的结果是:div
{background:green;*background:red;} ,于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

3）区别不同浏览器，CSS hack写法：
1）IE6与FF：background:orange;*background:blue;

2）区别IE6与IE7：background:green!important;background:blue;

3）区别IE7与FF：background:orange;*background:green;

4）区别FF，IE7，IE6：background:orange;*background:green;_background:blue;
background:orange;*background:green!important;*background:blue;

5）IE都能识别*，标准浏览器不能识别（如 FF）；IE6能识别*，不能识别!import；IE7能识别*，能识别!import；
FF不能识别*，单能识别!import；