前端规范说明文件资料.docx

1、前端规范说明文件资料规范的目的规范不是标准，在不同公司代码规范是有差异的。规范的作用只是让同一个团队代码风格统一，减少协作时的复杂性，便于前端开发人员输出更易维护、更高性能和更安全的前端代码，特定制该文档。本文档一经确认，前端开发人员必须按照本文档规范进行前台页面开发，本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档.WEB前端人员具备如下7点技能：1、页面标记语言：编写语义良好、简洁的HTML代码。2、页面样式：合理的利用CSS的组合和继承特性来编写简洁、可维护性好的CSS代码。3、前端编程：JavaScript是一种基于对象和事件驱动的、灵活的脚本语言，是动态交互的技术

2、基础。开发人员在熟悉语法和编码之外，还需要了解并解决在不同浏览器中的JavaScript兼容问题。4、跨平台、跨浏览器：如何在众多移动平台、众多屏幕尺寸上展现友好的WEB站点。虽然目前前端框架已经解决了大部分兼容问题，还是需要了解熟悉常见的浏览器兼容方法，主要包括：IE8的兼容，HTML5中新特性的兼容。5、前端框架：前端框架很大程度上降低了前端开发难度。作为前端工程师需要熟悉一些常用的框架的使用方法，并且要了解如何编写常用框架的扩展插件。6、调试工具：常用浏览器自带调试工具。7、沟通能力：WEB前端开发介于UI设计和后端逻辑开发之间。因此WEB前端在开发中必定会和UI设计及后端开发合作。前端

3、开发需要和UI设计沟通，确定效果是否可以实现及实现的代价，并对UI设计提出建议；还需要和后端开发沟通，确定前后端交互的接口以及传输的数据实体结构等。良好的沟通会让这些过程变得轻松。前端代码规范主要针对的是HTML、CSS和JavaScript代码。规范的前端代码应该具有以下特征：1、符合标准：所谓的标准指的是W3C制定的Web标准。主要由3个部分组成：结构标准、表现标准和行为标准。a)结构标准包含XML、XHTML、HTML标准。HTML5是XHTML和HTML的最新标准。目前使用的标准是HTML5标准；b)表现标准主要是指CSS样式标准，目前使用的标准是CSS3；c)行为标准主要包括ECMA

4、Script和DOM标准，目前使用的ECMAScript标准是ECMAScript262第5版，DOM标准是DOM级别2。2、格式规范统一：前端代码格式主要包括命名、代码缩进、空格和空行的使用及代码注释。a)命名主要有HTML元素ID和Class名，JavaScript中函数和变量的命名；b)HTML、CSS和JavaScript代码中都需要缩进代码来体现代码层次关系；c)空格和空行主要用在CSS和JavaScript中，用来提高代码可读性；d)CSS和JavaScript代码中都需要添加必要的注释来解说代码文件及代码片段，HTML代码中使用注释的情况比较少。3、高性能：高性能体现在浏览器的响

5、应速度上，包括网页的加载速度和页面的交互响应速度。网页加载所占用的时间包括后端处理请求的时间、代码从服务器端传输的时间、HTML和CSS组合展现的时间以及JavaScript加载和运行时间。规范的前端代码针对这些方面来编写高性能的前端代码。提高用户前端体验。4、高安全性：是指跨站点攻击、CooKie劫持。这些攻击通过设置javascript变量、HTML标签的值和属性，CSS属性值等方式伪造恶意代码来达到攻击的目的。因此，规范的前端代码至少要针对这些方面做必要的安全校验和编码，提高代码的安全性。高效的前端开发1、前端代码的结构组织和文件命名：在同一个项目中代码的组织结构一定要清晰，同类型的代码

6、文件或者相同模块的代码文件尽量归类到相同的文件夹中，文件的命名规则须统一并且命名要有意义。a)代码文件组织结构：前端代码主要包含javascript、CSS、HTML等文件，以及这些代码相关图片、Flash、音视频等资源文件.合理的组织文件，既要考虑结构清晰，还要考虑代码复用。惯用做法是同类文件放在一起，并按照模块划分文件结构。b)代码文件的命名：原则上需要表明文件对应的模块内容、对应的版本号、和文件的格式等。如果文件为子模块文件则在文件名中用点号或者短横线来表明父子关系。i.jQuery-2.0.0.min.jsii.Bootstrap-responsive.css2、合理使用框架：Java

7、Script框架是JavaScript代码的工具集和函数集，一般包括DOM元素的操作、DOM事件的封装、AJAX操作、UI控件封装以及一些功能算法扩展等。成熟的JavaScript框架已经经过了大量得功能测试、性能测试，也经过各主流浏览器的兼容测试，在项目中应用前端框架，不仅加快了项目的开发速度，同时避免了出现各种浏览器的兼容问题。由于框架的功能侧重不一，给项目选择合适的框架，需要要考虑如下几点：a)项目的需求：调查项目是否需要使用ajax操作、模板化、数据传输方式、浏览器支持、平台、UI模块b)项目的特点：团队技术能力、项目开发周期、是否长期维护c)框架特点：框架是否满足需求、性能能否接受、

8、是否持续开发中、技术文档和示例是否充足、是否有技术支持、是否有版权问题。3、浏览器支持：a)为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示（Y为支持，N为不支持）：b)设定浏览器支持标准A级交互和视觉完全符全设计的要求 B级视觉上允许有所差异，但不破坏页面的整体效果 C级可忽略设计上的细节，但不防碍使用 4、开发调试a)IDE： WebStorm、Visual Studio Code、Sublime Text、HBuilder；b)调试工具：浏览器自带测试工具；c)性能分析：浏览器自带测试工具；d)代码压缩：Grunt、webpa

9、ck5、前端代码基本命名规范和格式规范:命名规范和格式规范是代码规范中最基本的规范，任何代码的混乱都是从命名和格式的混乱开始的，而有意义明确的命名和规整的代码格式则提高了代码的可读性和可维护性。a)Htmli.所有的HTML标签使用小写，属性值应该使用双引号闭合。ii.class和id命名规则则根据语义和DOM树的层级关系来定义合适的名称。名称中全部使用小写。id名称中的关键词用下划线(_)连接。class的关键词使用中划线(-)连接。iii.如果class名称仅作为JavaScript调用的“钩子”，则可以在名称中添加“js”前缀。iv.HTML代码层级缩进为2个空格。如果元素包含子元素，则

10、此元素对应的起始标签和闭合标签分别单独占用一行。v.HTML注释，添加的原则是在保证代码维护性的基础上尽量让HTML代码简洁。页面公用部分、页面经常变化的部分（广告栏等）及需要后端代码注入的部分添加注释。注释添加的位置在要注释的代码上部并且单独占用一行。b)CSSi.CSS类的命名规则和元素的id命名规则相似，只是组成类名称的关键字连接符号位中划线。ii.CSS定义中大括号放置在选择器同一行，并且和选择器之间添加一个空格分开。在样式声明中，属性名称和属性值之间用一个空格隔开。iii.多个选择器具有相同样式声明时，每个选择器应该单独占一行。iv.样式声明的顺序按字母顺序排列。v.样式定义按照模块

11、来分组，相同模块的样式定义放在一起，不同模块的定义之间用一个空行分割。vi.CSS中添加注释有两种类型：文件信息注释和正文解说注释。文件注释一般包含文件版本、文件版权以及作者。解释说明性的注释有给模块的注释和单独选择器的注释。模块注释需要添加模块开始和结束的定义解释。c)JavaScripti.JavaScript局部变量命名采用首字母小写，其他单词首字母大写的方式。命名时尽量采用有意义的单词名称。ii.原则上公有接口的命名为首字母大写，私有接口的命名为首字母小写。iii.jquery框架在项目中使用广泛，推荐给jQuery类型的DOM变量添加“$”前缀。iv.左大括号应该在行结束位置，不应该

12、单独一行。即使逻辑只有一行代码，也应该用大括号括起来。v.JavaScript定义字符串使用单引号。vi.空格的作用是提高代码的可读性。函数参数逗号后面、操作符前后、JSON属性和值之间、方法名称和方法体之间都使用空格分割。另外使用一个空行区分业务逻辑段。vii.JavaScript注释和CSS注释相似，也是文件信息和代码逻辑注释。代码注释必须单独占一行。如果注释未占多行使用双斜杠“/”注释。HTML标准的HTML代码1、标准的HTML页面结构标准的HTML包含两个部分：“head”和“body”，为了使得HTML文档能兼容标准格式，还需要给文档添加一个文档类型声明（dtd）,当浏览器解析HT

13、ML文档时会遵循制定的类型声明标准。Head部分包含文档编码、标题、关键字、介绍、作者、样式文件等关键信息。Body部分则包含了所有在浏览器展示的内容，如文本、图片、表格、音视频等。 templet page templet page this is a Demo page! 2、正确闭合HTML标签HTML元素的内容模型定义了元素的结构，定义了元素可以包含哪些内容及拥有哪些属性。但有些元素是空元素，不能包含任何内容，被称为自闭合标签。自闭合标签有：areabasebrcolcommandembedhrimginputkeygenlinkmetaparamsourcetrackwbr自闭合标签

14、是否应该添加符号“/”，在XHTML1.0、HTML4.01和HTML5中稍有不同。XHTML中必须添加符号“/”。HTML4.01中不推荐添加符号“/”。HTML5中加不加都可以。HTML中禁止交叉嵌套标签。通过代码层次缩进能够最大化避免标签交叉嵌套。3、停止使用不标准或过时的标签和属性，简化HTML代码W3C在制定的HTML4和HTML5标准中有独立的章节来说明那些是不被推荐和过时的标签和属性。4、样式和结构分离5、添加必要的标签元素有4个属性：name、http-equiv、content和charset。通过name属性表述文档的元信息，通过http-equiv属性设置http请求指令

15、，通过sharset设置文档字符编码。按照属性设置标签可以分为三类：a)name和content属性组合，构成名称/值对，用于描述网站信息。名称包括application-nameauthordescriptionkeywords等。b)http-equiv和content属性组合，设置特定的http指令。http指令有content-typedefault-stylerefreshcontent-languageset-cookie，前三中是已经确定的，后两种还未正式确定。c)Charset属性，设置页面字符编码格式。为了让浏览器准确识别页面编码，务必在标签前设置charset。保证标题能正

16、确显示。d)特定示例i.IE浏览器兼容模式ii.移动端显示高可读性的HTML1、html语义化HTML语义化，简单讲就是HTML的含义，从HTML代码中使用的标签本身就可以说明标签包含内容的含义，比如标签则代指包含的内容是标题。HTML语义化是WEB网页标准化重要的一环。语义化HTML能死搜索引擎更容易读懂页面代码。高语义化的页面去掉CSS代码也能保持良好的外观，并且可以正常阅读。编写高语义化的HTML代码有下列4条原则。a)熟悉所有规范中的HTML标签，理解各标签的语义，在合适的地方使用合适的标签。例如：系列标签代表标题，和表示列表等，还有HTML5新加入的标签，设计原则都是标签语义化。如：

17、等；b)熟悉标签上规范的属性，给HTML标签设置必要的属性。 常用的alttitlefor属性。c)样式和结构分离。简洁的HTML代码会让语义更加明确。d)给空标签添加隐藏文字，用于说明标签的实际功能。2、如何设置网页标题层级a)在页面标题部分使用标签b)页面中只使用一个标签c)标签使用过程中不要跳级使用3、如何正确设计表单a)表单使用 等标签组合表单，不要使用tableb)使用标签，并且设置标签的for属性c)给输入控件设置合适的水印提示d)如有必要，给输入控件设置tab顺序e)使用HTML5总引入的表单控件。如（urlemaildatesearchnumber）。高级浏览器已经针对这些控件

18、做了易用性的增强，特别是移动端。4、精简代码在不影响页面语义的基础上精简代码，主要有一下三种精简方式：a)删除多余的容器b)装饰性的元素使用css样式实现。如下三角等。c)避免使用table布局。5、过时的块状元素和行内元素a)块状元素是指默认display值为block,而行内元素dispaly值默认为inline或者inline-block。常见块元素有divptableulolhx等。常见行内元素:spanimgaeminputselect等；b)HTML5中把HTML元素细分为7类i.元数据式（metadata）内容：basecommandlinkmeta等ii.流式(flow)内容：

19、spandiv等，这个分类基本包含了HTML4中的块状元素行内元素。iii.章节式(phrasing)了内容：articleasidenavsectioniv.标题式(heading)内容：hxhgroupv.段落式(secioning)内容：spanimg等，基本等同于HTML4的行内元素范围。vi.嵌入式(embedded)内容：imgiframesvgaudiovideocanvas等vii.交互式(interactive)内容：abuttonselectinput等规范中还提供了一张各元素类型之间的包含关系图，如下图：拥抱html52014年10月28日W3C发布HTML5正式推荐标准

20、。使用HTML5中的新标签新标签主要分三个部分：语义化标签、功能性标签以及新的输入控件类型。Html5的标准HTML script src=/ script src=/ 语义化标签：sectionarticleasidehgroupheaderfooternavfigurefogcaption功能性标签：svgcanvasaudiovideo新的输入控件类型：telsearchurldateemailnumberrangecolorHTML5新属性1、script标签的async属性；设置属性defer让脚本后置按顺序加载，设置async属性让脚本后置无序加载。2、base标签的target属

21、性；指定页面a标签的默认窗口；3、输入控件的placeholderrequiredautofocus;4、标签自定义属性data-*; jquery框架已经实现了$().data()方法获取自定义属性。5、HTML5标签属性变化注意事项a)ibusmall不在单纯的设置字体样式，而作为语义化标签，具体参照HTML5规范。如果只是为了设置样式，应该使用CSS实现。b)Script 标签除了可以包含标签，还可以包含用户自定义的数据模块。数据模块有HTML模板和XML数据等。不要使用HTML5中已经废弃的标签和属性1、标签仅仅设置样式外观，没有任何语义，而且这些标签可以使用CSS代替实现。如：fon

22、tcenter等2、标签破坏了可用性，该类标签包含frameframesetnoframes3、属性被移除的，常见的不规范属性：a)Tabledivinputhx系列等标签中的alignb)Trtdth 等标签的valignc)img等标签的width和 heightHTML5浏览器兼容1、让浏览器识别HTML5规范中的标签。引入相应兼容JS文件,主要通过document.createElement方法产生标签，和定义标签默认样式。2、音视频兼容a)音频浏览器支持格式列表浏览器版本支持格式IE9.0+MP3AACchrome6.0+OggMP3wav(9.0+)firefox3.6+Oggwa

23、vsafari5.0+MP3aacwavopera10.0+Oggwavb)视频浏览器支持格式列表浏览器版本支持格式IE9.0+Mp4chrome6.0+OggwebMmp4firefox3.6+OggwebMsafari5.0+Mp4opera10.0+OggwebMCSS高维护性的CSS1、高效的组织css代码：所有CSS都可以分为两大类：通用类和业务类。代码组织应该把通用类和业务类代码放置不同目录中。目录结构如下：Lib：放置第三方库CSS文件Imgages：放置样式所有背景图片Reset.css：浏览器样式统一设置文件Ie-style.css：IE旧版兼容样式文件Common.css：

24、放置通用模块样式和基础样式。 基础样式包括：全局页面布局设置、字体设置、背景和前景色，也包括一些共有的class。通用模块包括：对话框、提示框、页面头部、页面底部、页面侧边栏等公用UI模块。其余部分: 不同模块的样式放置于不同的模块文件夹。模块分割颗粒度为每个模块样式文件行数不超过300行。文件内部也要细化成更小的颗粒，相同的模块的样式声明放在一起。不同模块之间应添加空行和注释说明。模块内部样式声明规则：按照元素层级关系声明样式。同级声明则按照元素从上到下，从左到右关系定义样式。多个元素则按照先公用后个性。使用less和sass等动态样式语言能更好的实现如上规则。2、CSS Reset 统一浏

25、览器显示效果：重置方案考虑内容如下：a)HTML5中的新标签低版本浏览器默认样式重置；b)浏览器差异主要由marginpadding和border三个的默认样式造成；c)字体设置d)其他元素的的样式重置3、给css样式定义排序：a)按照类型排序：著名前端专家Andy Ford把CSS属性分为7大类显示与浮动（Display&Flow）、定位（Positioning）、尺寸（Dimensions）、边框相关属性（MarginsPaddingBorderOutline）、字体样式（Typographic Styles）、背景（Backgrounds）、其他样式（OpacityCursorsGene

26、rated Content）b)按字母排序c)按长度排序我们使用CSScomb工具默认排序4、合理使用CSS的权重：提高代码重用性a)权重高的CSS样式会覆盖优先级低的样式，如果权重相同，则依照“就近原则”。注意样式位置靠下的为近。b)从CSS代码存放位置看权重优先级：内嵌样式 内部样式表 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。c)从样式选择器看权重优先级：important 内嵌样式 ID 类 | 伪类 | 属性选择 标签 | 伪对象 继承 通配符。d)CSS权重计算规则i.Important 0,1,0,0ii.选择符中id选择器的数量0,1,0,0

27、iii.选择符中类选择器、属性选择器、伪类选择器的数量0,0,1,0iv.选择符中标签选择器和伪对象选择器的数量0,0,0,1v.忽略全局选择器vi.示例：#leftcolor:black!important; /*1,1,0,0 权重：1100*/#container #leftcolor:red; /*0,2,0,0 权重：200*/#leftcolor:green!important; /*1,1,0,0 权重：1100*/.container #leftcolor:blue; /*0,1,1,0 权重：110*/e)使用原则i.尽量不要使用ID选择器；ii.减少子选择器的层级；iii.

28、使用组合的CSS类选择器。5、Remempx%的使用原则a)Rem是相对于根元素的相对单位，em是相对于自身的相对单位，px是绝对单位，%是相对于父元素的相对单位b)尽量设置相对单位：emrem设置字体大小，%设置元素宽高。c)只有在可预知元素尺寸的情况下才使用绝对尺寸，例如页面整体宽度、侧边栏、页头、页尾、图片、视频等高性能的CSS1、使用高效的CSS选择器a)避免使用通配符b)不要使用ID选择器c)尽量不要在选择符中定义过多层级，最好不要超过三层2、CSS相关的图片处理a)不要设置图片尺寸b)使用CSS Sprite技术，使用注意事项：i.项目后期应用CSS Sprite技术ii.合理组织图标iii.控制图片尺寸和大小。图片大小200