WEB前端开发规范文档Word下载.docx

WEB前端开发规范文档Word下载.docx

《WEB前端开发规范文档Word下载.docx》由会员分享，可在线阅读，更多相关《WEB前端开发规范文档Word下载.docx（34页珍藏版）》请在冰豆网上搜索。

charset="

gbk"

/>

书写时利用IDE实现层 

次分明的缩进;

非特殊情况下样式文件必须外链至<

head>

...<

/head>

之间;

非特殊情况下JavaScript文件必须外链至页面底部;

引入样式文件或JavaScript文件时, 

须略去默认类型声明, 

写法如下:

ExampleSourceCode[]

<

link 

rel="

stylesheet"

href="

..."

style>

/style>

script 

src="

>

/script>

引入JS库文件, 

文件名须包含库名称及版本号及是否为压缩版, 

比如jquery-1.4.1.min.js;

引入插件, 

文件名格式为库名称+插件名称, 

比 

如jQuery.cookie.js;

　　5. 

所有编码均遵循xhtml标准, 

标签 

&

属性 

属性命名 

必须由小写字母及下划线数字组成, 

且所有标签必须闭合, 

包括 

br 

（<

）, 

hr（<

hr 

）等;

属性值必须用双引号包括;

　　6. 

充分利用无兼容性问题的html自身标签, 

比如span, 

em, 

strong, 

optgroup, 

label,等等;

需要为html元素添加自定义属性的时候, 

首先 

要考虑下有没有默认的已有的合适标签去设置, 

如果没有, 

可以使用须以"

data-"

为前缀来添加自定义属性，避免使用"

data:

"

等其他命名方式;

　　7. 

如 

标题根据重要性用h*（同一页面只能有一个h1）, 

段落标记用p, 

列表用ul, 

内联元素中不可嵌套块级元素;

　　8. 

尽可能减少div嵌套, 

如<

div 

class="

box"

welcome"

欢迎访问XXX, 

您的用 

户名是<

name"

用户名<

/div>

完全可以用以下代码替代:

p>

欢迎 

访问XXX, 

您的用户名是<

span>

/span>

/p>

　　9. 

书写链接地址时, 

必须避免重定向，例如：

即须在URL地址后面加上“/”；

　　10. 

在页面中尽量避免使用style属性,即style="

…"

　　11. 

必须为含有描述性表单元素（input, 

textarea）添加label, 

如

姓 

名:

input 

type="

text"

id="

name="

须写成:

label 

for="

/label>

　　12. 

能以背景形式呈现的图片, 

尽量写入css样式中;

　　13. 

重要图片必须加上alt属性;

给重要的元素和截断的元素加上title;

　　14. 

给区块代码及重要功能（比如循环）加上注释, 

方便后台添加功能;

　　15. 

特殊符号使用:

尽可能使用代码替代:

比如 

） 

（>

空格（ 

»

（»

等等;

　　16. 

书写页面过程中, 

请考虑向后扩展性;

　　17. 

class 

id 

参见 

css书写规范.

css书写规范

编码统一为utf-8;

协作开发及分工:

i会根据各个模块, 

同时根据页面相似程序, 

事先写好大体框架文件, 

分配给前端人员实现内部结构&

表现&

行为;

共用css文件base.css由i书写, 

协作开发过程中, 

每个页面请务必都要引入, 

此文件包含reset及头部底部样式, 

此文件不可随意修改;

class与id的使用:

id是唯一的并是父级的, 

class是可以重复的并是子级的, 

所以id仅使用在大的模块上, 

class可用在重复使用率高及子级 

中;

id原则上都是由我分发框架文件时命名的, 

为JavaScript预留钩子的除外;

为JavaScript预留钩子的命名, 

请以 

js_ 

起始, 

比如:

js_hide, 

js_show;

class与id命名:

大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 

小写英文 

数 

字 

_ 

来组合命名, 

如i_comment, 

fontred, 

width200;

避免使用中文拼音, 

尽量使用简易的单词组合;

总之, 

命名要语义化, 

简明 

化.

规避class与id命名（此条重要, 

若有不明白请及时与i沟通）:

　　　　a, 

通过从属写法规避, 

示例见d;

　　　　b, 

取父级元素id/class命名部分命名, 

　　　　c, 

重复使用率高的命名, 

请以自己代号加下划线起始, 

比如i_clear;

　　　　d, 

a,b两条, 

适用于在2中已建好框架的页面, 

如, 

要在2中已建好框架的页面代码<

mainnav"

中加入新的div元 

素,

按a命名法则:

firstnav"

样式写法:

#mainnav 

.firstnav{.......}

按b命名法则:

main_firstnav"

.main_firstnav{.......}

css属性书写顺序, 

建议遵循:

布局定位属性-->

自身属性-->

文本属性-->

其他属性. 

此条可根据自身习惯书写, 

但尽量保证同类属 

性写在一起. 

属性列举:

布局定位属性主要包括:

display 

list-style 

position（相应 

的 

top,right,bottom,left） 

＆ 

float 

clear 

visibility 

overflow；

自身属性主要包括:

width 

height 

margin 

padding 

border 

background;

文本属性主要包括：

color 

font 

text-decoration 

text-align 

vertical-align 

white- 

space 

其他 

content;

我所列出的这些属性只是最常用到的, 

并不代表全部;

书写代码前, 

考虑并提高样式重复使用率;

充分利用html自身属性及样式继承原理减少代码量, 

ul 

list"

li>

这儿是标题列表<

2010-09- 

15<

/ul>

定义

ul.list 

li{position:

relative} 

li 

span{position:

absolute;

right:

0}

即可实现日期居右显示

样式表中中文字体名, 

请务必转码成unicode码, 

以避免编码错误时乱码;

背景图片请尽可能使用sprite技术, 

减小http请求, 

考虑到多人协作开发, 

sprite按模块制作;

使用table标签时（尽量避免使用table标签）, 

请不要用width/ 

height/cellspacing/cellpadding等table属性直接定义表现, 

应尽可能的利用table自身私有属性分离结构与表现 

thead,tr,th,td,tbody,tfoot,colgroup,scope;

（cellspaing及cellpadding的css控制方法:

table{border:

0;

margin:

border-collapse:

collapse;

} 

table 

th, 

td{padding:

base.css文件中我会初始化表格样式）

杜绝使用<

http-equiv="

X-UA-Compatible"

content="

IE=7"

兼容 

ie8;

用png图片做图片时, 

要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 

请为ie6单独定义背景:

_background:

none;

_filter:

progid:

DXImageTransform.Microsoft.AlphaImageLoader 

（sizingMethod=crop, 

src=’img/bg.png’）;

避免兼容性属性的使用, 

比如text-shadow 

|| 

css3的相关属性;

减少使用影响性能的属性, 

比如position:

absolute 

必须为大区块样式添加注释, 

小区块适量注释;

　　18. 

代码缩进与格式:

建议单行书写, 

可根据自身习惯, 

后期优化i会统一处理;

JavaScript书写规范

文件编码统一为utf-8, 

书写过程过, 

每行代码结束必须有分号;

原则上所有功能均根据XXX项目需求原生开发, 

以避免网上down下来的代码造 

成的代码污染（沉冗代码 

与现有代码冲突 

...）;

库引入:

原则上仅引入jQuery库, 

若需引入第三方库, 

须与团队其他人员讨论决定;

变量命名:

驼峰式命名. 

原生JavaScript变量要求是纯英文字母, 

首字母须小写, 

如iTaoLun;

jQuery变量要求首字符为'

_'

其他与原生JavaScript 

规则相同, 

如:

_iTaoLun;

另, 

要求变量集中声明, 

避免全局变量.

类命名:

首字母大写, 

ITaoLun;

函数命名:

首字母小写驼峰式命名. 

如iTaoLun（）;

命名语义化, 

尽可能利用英文单词或其缩写;

尽量避免使用存在兼容性及消耗资源的方法或属性, 

比如eval（） 

innerText;

后期优化中, 

JavaScript非注释类中文字符须转换成unicode编码使用, 

以避免编码错误时乱码显示;

代码结构明了, 

加适量注释. 

提高函数重用率;

注重与html分离, 

减小reflow, 

注重性能.

图片规范

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

测试用图片放于img/demoimg文件夹;

图片格式仅限于gif 

png 

jpg;

命名全部用小写英文字母 

数字 

的组合，其中不得包含汉字 

空格 

特殊字符；

尽量用易懂的词汇, 

便于团队其他成员理 

解;

命名分头尾两部分, 

用下划线隔开, 

比如ad_left01.gif 

btn_submit.gif;

在保证视觉效果的情况下选择最小的图片格式与图片质量, 

以减少加载时间;

尽量避免使用半透明的png图片（若使用, 

请参考css规范相关说明）;

运用css 

sprite技术集中小的背景图或图标, 

减小页面http请求, 

但注意, 

请务必在对应的sprite 

psd源图中划参考线, 

并保存至img目录 

下.

注释规范

html注释:

注释格式 

--这儿是注释-->

'

--'

只能在注释的始末位置,不可置入注释文字区域;

css注释:

/*这儿是注释*/;

JavaScript注释, 

单行注释使用'

//这儿是单行注释'

多行注释使用 

/* 

这儿有多行注释 

*/;

开发及测试工具约定

　　建议使用Aptana 

Dw 

Vim 

亦可根据自己喜好选择, 

但须遵循如下原则:

不可利用IDE的视图模式'

画'

代码;

不可利用IDE生成相关功能代码, 

比如Dw内置的一些功能js;

编码必须格式化, 

比如缩进;

　　测试工具:

前期开发仅测试FireFox 

IE6 

IE7 

IE8 

后期优化时加入Opera 

Chrome 

Safari;

　　建议测试顺序:

FireFox-->

IE7-->

IE8-->

IE6-->

Opera-->

Chrome-->

Safari, 

建议安装firebug及IE 

Tab 

Plus插件.

其他规范

开发过程中严格按分工完成页面, 

以提高css复用率, 

避免重复开发;

减小沉冗代码, 

书写所有人都可以看的懂的代码. 

简洁易懂是一种美德. 

为用户着想, 

为服务器着想.

Web前端开发的职责是什么？

2009-09-2419:

24

既然Web前端开发有那么多的职位，那么不同的职位其各自的职责又是怎样的呢？

我们以“前端开发工程师”、“资深前端开发工程师”和“前端架构师”这三种职位为例，来分析一下其各自的职责。

前端开发工程师（或者说“网页制作”、“网页制作工程师”、“前端制作工程师”、“网站重构工程师”），这样的一个职位的主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。

同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。

资深前端开发工程师，从称谓上就可以看出，其相比较“前端开发工程师”而言，更加资深一些，当然其工作的职责也会相应的更加大一些。

一般而言，资深前端开发工程师需要使用JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件，同时还要对Web项目的前端实现方案提供专业指导和监督并在日常工作之中对新人及相关开发人员进行前端技能的培训和指导。

另外，还要跟踪研究前端技术，设计并实施全网前端优化。

前端架构师，资深前端开发工程师都有这样高的职责要求了，前端架构师跟其相比肯定有更高的职责要求，那么前端架构师的职责是什么呢？

前端架构师更多意义上说像是一个管理的岗位，但是其职责要求却不仅只是管理。

前端架构师需要带领组员实现全网的前端框架和优化，还要创建前端的相应标准和规范，并通过孜孜不倦的布道来完善并推广和应用自己的标准和框架。

同时，还要站在全局的角色为整个网站的信息架构和技术选型提供专业意见和方案。

Web前端开发的一般项目流程

项目开始之前，我们需要参加项目的需求评审，并深入了解项目，评估项目的相关技术实现方式和细节。

同时，我们还要参加交互设计师设计的原型评审，深入了解需求，评估和制定前端实现的时间周期。

项目实施过程之中，我们要和视觉设计师配合，把视觉设计师的最终设计稿用HTML和CSS转化为Web前端页面。

此过程中还要与后台的开发人员讨论确定细节的实现方式和方法，并将完成的Web前端页面交由开发人员进行功能、数据等方面的开发。

此外，还要和测试人员约定测试环境的部署，并参与测试并修复测试阶段相应的前端BUG。

而在项目开发测试完成并成功上线以后，还应该继续跟踪一段时间，并对实际运行中发现的前端细节和性能方面的问题进行相应的优化和完善。

写代码–>

执行代码–>

发布上线，这是一个传统的前端开发流程，但是这样的一个流程对于注重细节和体验现实而言是一个比较落后和不够完善的流程，而现如今的比较规范和被广泛采用的项目流程应该是如下图这个样子的。

b/s和c/s

C/S结构，即Client/Server（客户机/服务器）结构，是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，可以充分利用两端硬件环境的优势。

早期的软件系统多以此作为首选设计标准。

。

B/S结构，即Browser/Server（浏览器/服务器）结构，是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。

在这种结构下，用户界面完全通过WWW浏览器实现，一部分事务逻辑在前端实现，但是主要事务逻辑在服务器端实现，形成所谓3-tier结构。

B/S结构，主要是利用了不断成熟的WWW浏览器技术，结合浏览器的多种Script语言（VBScript、JavaScript…）和ActiveX技术，用通用浏览器就实现了原来需要复杂专用软件才能实现的强大功能，并节约了开发成本，是一种全新的软件系统构造技术。

随着Windows98/Windows2000将浏览器技术植入操作系统内部，这种结构更成为当今应用软件的首选体系结构。

C/S与B/S区别：

Client/Server是建立在局域网的基础上的.Browser/Server是建立在广域网的基础上的.

1．硬件环境不同:

C/S一般建立在专用的网络上,小范围里的网络环境,局域网之间再通过专门服务器提供连接和数据交换服务.

B/S建立在广域网之上的,不必是专门的网络硬件环境,例与电话上网,租用设备.信息自己管理.有比C/S更强的适应范围,一般只要有操作系统和浏览器就行

2．对安全要求不同

C/S一般面向相对固定的用户群,对信息安全的控制能力很强.一般高度机密的信息系统采用C/S结构适宜.可以通过B/S发布部分可公开信息.

B/S建立在广域网之上,对安全的控制能力相对弱,面向是不可知的用户群.

3．对程序架构不同

C/S程序可以更加注重流程,可以对权限多层次校验,对系统运行速度可以较少考虑.

B/S对安全以及访问速度的多重的考虑,建立在需要更加优化的基础之上.比C/S有更高的要求B/S结构的程序架构是发展的趋势,从MS的.Net系列的BizTalk2000Exchange2000等,全面支持网络的构件搭建的系统.SUN和IBM推的JavaBean构件技术等,使B/S更加成熟.

4．软件重用不同

C/S程序可以不可避免的整体性考虑,构件的重用性不如在B/S要求下的构件的重用性好.

B/S对的多重结构,要求构件相对独立的功能.能够相对较好的重用.就入买来的餐桌可以再利用,而不是做在墙上的石头桌子

5．系统维护不同

系统维护是软件生存周期中,开销大,-------重要

C/S程序由于整体性,必须整体考察,处理出现的问题以及系统升级.升级难.可能是再做一个全新的系统

B/S构件组成,方面构件个别的更换,实现系统的无缝升级.系统维护开销减到最小.用户从网上自己下载安装就可以实现升级.

6．处理问题不同

C/S程序可以处理用户面固定,并且在相同区域,安全要求高需求,与操作系统相关.应该都是相同的系统

B/S建立在广域网上,面向不同的用户群,分散地域,这是C/S无法作到的.与操作系统平台关系最小.

7．用户接口不同

C/S多是建立的Window平台上,表现方法有限,对程序员普遍要求较高

B/S建立在浏览器上,有更加丰富和生动的表现方式与用户交流.并且大部分难度减低,减低开发成本.

8．信息流不同

C/S程序一般是典型的中央集权的机械式处理,交互性相对低

B/S信息流向可变化,B-BB-CB-G等信息、流向的变化,更象交易中心

b/s

B/S结构（Browser/Server结构）结构即浏览器和服务器结构。

它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。

在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。

这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。

以目前的技术看，局域网建立B/S结构的网络应用，并通过Internet/Intranet模式下数据库应用，相对易于把握、成本也是较低的。

它是一次性到位的开发，能实现不同的人员，从不同的地点，以不同的接入方式（比如LAN,WAN,Internet/Intranet等）访问和操作共同的数据库；

它能有效地保护数据平台和管理访问权限，服务器数据库也很安全。

特别是在JAVA这样的跨平台语言出现之后，B/S架构管理软件更是方便、速度快、效果优。

　　随着Internet和WWW的流行，以往的主机／终端和C／S都无法满足当前的全球网络开放、互连、信息随处可见和信息共享的新要求，于是就出现了B／S型模式，即浏览器／服务器结构。

B/S模式最大特点是：

用户可以通过WWW浏览器去访问Internet上的文本、数据、图像、动画、视频点播和声音信息，这些信息都是由许许多多的Web服务器产生的，而每一个Web服务器又可以通过各种方式与数据库服务器连接，大量的数据实际存放在数据库服务器中。

客户端除了WWW浏览器，一般无须任何用户程序，只需从Web服务器上下载程序到本地来执行，在下载过程中若遇到与数据库有关的指令，由Web服务器交给数据库服务器来解释执行，并返回给Web服务器，Web服务器又返回给用户。

在这种结构中，将许许多多的网连接到一块，形成一个巨大的网，即全球网。

而各个企业可以在此结构的基础上建立自己的Intranet。

　　一、B/S模式的优点和缺点

　　B/S结构的优点

（1）、具有分布性特点，可以随时随地进行查询、浏览等业务处理。

（2）、业务扩展简单方便，通过增加网页即可增加服务器功