前端规格文档资料

心理教育信息化管理系统

b) 设定浏览器支持标准

A级－交互和视觉完全符全设计的要求

B级－视觉上允许有所差异，但不破坏页面的整体效果 C级－可忽略设计上的细节，但不防碍使用 4、 开发调试

a) IDE： WebStorm、Visual Studio Code、Sublime Text、HBuilder；b) 调试工具：浏览器自带测试工具；c) 性能分析：浏览器自带测试工具；d) 代码压缩：Grunt、webpack

5、 前端代码基本命名规范和格式规范:命名规范和格式规范是代码规范中最基本的规范，任何代码的混乱都是从命名和格式的混乱开始的，而有意义明确的命名和规整的代码格式则提高了代码的可读性和可维护性。a) Htmli. 所有的HTML标签使用小写，属性值应该使用双引号闭合。

ii. class和id命名规则则根据语义和DOM树的层级关系来定义合适的名称。名称中全部使用小写。id名称中的关键词用下划线(_)连接。class的关键词使用中划线(-)连接。iii. 如果class名称仅作为JavaScript调用的"钩子"，则可以在名称中添加"js"前缀。iv. HTML代码层级缩进为2个空格。如果元素包含子元素，则此元素对应的起始标签和闭合标签分别单独占用一行。

v. HTML注释，添加的原则是在保证代码维护性的基础上尽量让HTML代码简洁。页面公用部分、页面经常变化的部分（广告栏等）及需要后端代码注入的部分添加注释。注释添加的位置在要注释的代码上部并且单独占用一行。b) CSSi. CSS类的命名规则和元素的id命名规则相似，只是组成类名称的关键字连接符号位中划线。

ii. CSS定义中大括号放置在选择器同一行，并且和选择器之间添加一个空格分开。在样式声明中，属性名称和属性值之间用一个空格隔开。iii. 多个选择器具有相同样式声明时，每个选择器应该单独占一行。iv. 样式声明的顺序按字母顺序排列。

v. 样式定义按照模块来分组，相同模块的样式定义放在一起，不同模块的定义之间用一个空行分割。

vi. CSS中添加注释有两种类型：文件信息注释和正文解说注释。文件注释一般包含文件版本、文件版权以及作者。解释说明性的注释有给模块的注释和单独选择器的注释。模块注释需要添加模块开始和结束的定义解释。c) JavaScripti. JavaScript局部变量命名采用首字母小写，其他单词首字母大写的方式。命名时尽量采用有意义的单词名称。ii. 原则上公有接口的命名为首字母大写，私有接口的命名为首字母小写。iii. jquery框架在项目中使用广泛，推荐给jQuery类型的DOM变量添加"$"前缀。iv. 左大括号应该在行结束位置，不应该单独一行。即使逻辑只有一行代码，也应该用大括号括起来。v. JavaScript定义字符串使用单引号。vi. 空格的作用是提高代码的可读性。函数参数逗号后面、操作符前后、JSON属性和值之间、方法名称和方法体之间都使用空格分割。另外使用一个空行区分业务逻辑段。vii. JavaScript注释和CSS注释相似，也是文件信息和代码逻辑注释。代码注释必须单独占一行。如果注释未占多行使用双斜杠"//"注释。　　HTML

标准的HTML代码

1、 标准的HTML页面结构

　　标准的HTML包含两个部分："head"和"body"，为了使得HTML文档能兼容标准格式，还需要给文档添加一个文档类型声明（dtd）,当浏览器解析HTML文档时会遵循制定的类型声明标准。Head部分包含文档编码、标题、关键字、介绍、作者、样式文件等关键信息。Body部分则包含了所有在浏览器展示的内容，如文本、图片、表格、音视频等。　　　　　　

　　 　　 　　 　　 　　

templet page

this is a Demo page!

2、 正确闭合HTML标签

HTML元素的内容模型定义了元素的结构，定义了元素可以包含哪些内容及拥有哪些属性。但有些元素是空元素，不能包含任何内容，被称为自闭合标签。

自闭合标签有：area\base\br\col\command\embed\hr\img\input\keygen\link\meta\param\source\track\wbr自闭合标签是否应该添加符号"/"，在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请求指令，通过sharset设置文档字符编码。按照属性设置标签可以分为三类：a) name和content属性组合，构成名称/值对，用于描述网站信息。名称包括application-name\author\description\keywords等。b) http-equiv和content属性组合，设置特定的http指令。http指令有content-type\default-style\refresh\content-language\set-cookie，前三中是已经确定的，后两种还未正式确定。c) Charset属性，设置页面字符编码格式。为了让浏览器准确识别页面编码，务必在　　 　　 　　 　　

语义化标签：section\article\aside\hgroup\header\footer\nav\figure\fogcaption功能性标签：svg\canvas\audio\video新的输入控件类型：tel\search\url\date\email\number\range\colorHTML5新属性

1、 script标签的async属性；设置属性defer让脚本后置按顺序加载，设置async属性让脚本后置无序加载。2、 base标签的target属性；指定页面a标签的默认窗口；3、 输入控件的placeholder\required\autofocus;

4、 标签自定义属性data-*; jquery框架已经实现了$().data()方法获取自定义属性。5、 HTML5标签属性变化注意事项

a) i\b\u\small不在单纯的设置字体样式，而作为语义化标签，具体参照HTML5规范。如果只是为了设置样式，应该使用CSS实现。b) Script 标签除了可以包含标签，还可以包含用户自定义的数据模块。数据模块有HTML模板和XML数据等。不要使用HTML5中已经废弃的标签和属性1、 标签仅仅设置样式外观，没有任何语义，而且这些标签可以使用CSS代替实现。如：font\center等2、 标签破坏了可用性，该类标签包含frame\frameset\noframes3、 属性被移除的，常见的不规范属性：a) Table\div\input\hx系列等标签中的alignb) Tr\td\th 等标签的valign

c) img等标签的width和 heightHTML5浏览器兼容

1、 让浏览器识别HTML5规范中的标签。引入相应兼容JS文件,主要通过document.createElement方法产生标签，和定义标签默认样式。2、 音视频兼容a) 音频浏览器支持格式列表浏览器

版本

支持格式IE9.0+

MP3\AACchrome6.0+

Ogg\MP3\wav(9.0+)firefox3.6+

Ogg\wavsafari5.0+MP3\aac\wavopera10.0+

Ogg\wav

b) 视频浏览器支持格式列表浏览器版本

支持格式IE9.0+Mp4

chrome6.0+

Ogg\webM\mp4firefox3.6+

Ogg\webMsafari5.0+Mp4

opera10.0+Ogg\webMCSS

高维护性的CSS

1、 高效的组织css代码：所有CSS都可以分为两大类：通用类和业务类。代码组织应该把通用类和业务类代码放置不同目录中。目录结构如下：　　　　Lib：放置第三方库CSS文件　　Imgages：放置样式所有背景图片　　Reset.css：浏览器样式统一设置文件　　Ie-style.css：IE旧版兼容样式文件

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

中等职业学校是中专吗

a) HTML5中的新标签低版本浏览器默认样式重置；

b) 浏览器差异主要由margin\padding和border三个的默认样式造成；c) 字体设置d) 其他元素的的样式重置3、 给css样式定义排序：

a) 按照类型排序：著名前端专家Andy Ford把CSS属性分为7大类显示与浮动（Display&Flow）、定位（Positioning）、尺寸（Dimensions）、边框相关属性（Margins\Padding\Border\Outline）、字体样式（Typographic Styles）、背景（Backgrounds）、其他样式（Opacity\Cursors\Generated 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

iii. 选择符中类选择器、属性选择器、伪类选择器的数量0,0,1,0iv. 选择符中标签选择器和伪对象选择器的数量0,0,0,1v. 忽略全局选择器vi. 示例：

#left{color:black!important;} /*1,1,0,0 权重：1100*/#container #left{color:red;} /*0,2,0,0 权重：200*/#left{color:green!important;} /*1,1,0,0 权重：1100*/.container #left{color:blue;} /*0,1,1,0 权重：110*/e) 使用原则i. 尽量不要使用ID选择器；ii. 减少子选择器的层级；iii. 使用组合的CSS类选择器。5、 Rem\em\px\%的使用原则

a) Rem是相对于根元素的相对单位，em是相对于自身的相对单位，px是绝对单位，%是相对于父元素的相对单位b) 尽量设置相对单位：em\rem设置字体大小，%设置元素宽高。c) 只有在可预知元素尺寸的情况下才使用绝对尺寸，例如页面整体宽度、侧边栏、页头、页尾、图片、视频等高性能的CSS

1、 使用高效的CSS选择器a) 避免使用通配符b) 不要使用ID选择器c) 尽量不要在选择符中定义过多层级，最好不要超过三层2、 CSS相关的图片处理a) 不要设置图片尺寸

b) 使用CSS Sprite技术，使用注意事项：i. 项目后期应用CSS Sprite技术ii. 合理组织图标

iii. 控制图片尺寸和大小。图片大小200K以内，图片尺寸长度和宽度相乘不要超过2500.iv. 合理控制背景图片单元之间的距离以及背景图片的位置v. 使用工具生成。如：css sprite generator\sprite cow\spriteme3、 减少CSS的代码量

a) 定义简洁的CSS规则：主要指合并相关规则和定义简洁的属性值b) 合并相关CSS规则：font\background等简写c) 定义简洁的属性值：颜色#FFF 尺寸 .8remd) 合并相同的定义e) 删除无效的定义4、 其他CSS高性能a) 避免使用@import

b) 避免使用IE浏览器独有的样式：图片滤镜和CSS表达式JavaScript

高维护性的JavaScript

1、 尽量避免定义全局变量或函数。把变量和方法封装在一个变量对象上，并且封装到一个匿名函数局部作用域中，这样可以避免定义全局变量导致的代码"污染"问题。2、 使用简化的编码方式。如创建对象 使用{} 创建数组使用[]等。3、 使用比较运算符===而不是==。4、 避免使用with语句

5、 避免使用eval

6、 不要编写检测浏览器的代码，如果需要编写应单独建立文件编写逻辑代码，方便后期维护和移除。使用更严格的编码格式

严格模式主要针对如下不合理的地方做了改进，包括：禁用with关键字、防止意外的全局变量、函数中的this不再默认指向全局、防止函数参数重名、更安全的使用eval等，具体参考mozilla网站的详细介绍。严格模式已经得到除IE8之外的大部分主流浏览器的支持，推荐在代码中使用："use strict";使用规则

1、 不要在全局使用严格模式。尽量把严格模式限定在函数作用范围内。2、 在已有代码中慎用严格模式事件处理和业务逻辑分离：业务逻辑和事件处理耦合紧密，不利于代码的复用配置数据和代码逻辑分离：配置数据分离的做法极大的提高了代码的可维护性和可扩展性。逻辑与结构样式分离：

1、 从JavaScript代码逻辑中分离CSS样式2、 从JavaScript代码逻辑中分离HTML结构

JavaScript模板的使用：流行的JavaScript模板有Mustache\Underscore\Handlebars,模板使用方法参考：1、 尽量不要在模板中滥用逻辑块2、 不要构建太复杂的模板3、 使用预编译模板

在JavaScript开发中使用MVC：MVC的引入，很大程度上解决了前端代码混乱的问题，使得前端JavaScript代码的层次更清晰，提高了代码的可重用性和可维护性。高性能的JavaScript

加快JavaScript文件的加载速度

1、 加快JavaScript代码的加载速度最有效的方法就是减少初始加载文件的体积和加载次数。2、 尽量将JavaScript代码引用放置在body的底部3、 重要Script标签使用defer和async区分同步异步。4、 非重要JavaScript代码动态加载。养成良好的编码习惯，提高代码的运行速度

1、 嵌套循环时把大循环作为内循环、尽量避免循环内定义变量、条件分支中定义分支中才使用的对象、使用直接量代替对象、缓存计算结果减少重复计算2、 少使用for-in对象遍历3、 谨慎使用eval4、 正确使用数组5、 正确的内存回收

高效的DOM操作

1、 合并多次的DOM操作为单次的DOM操作2、 把DOM元素离线或隐藏后修改a) 使用文档片段b) 通过设置DOM元素的display为none来隐藏元素c) 克隆DOM元素到内存中

3、 设置具有动画效果的DOM元素的position属性为fixed或absolute4、 谨慎取得DOM元素的布局信息5、 使用事件托管方式绑定事件

移动WEB前端端开发

移动端和桌面端WEB前端开发的差异1、 移动设备和PC之间的页面显示差异

2、 移动设备和PC之间的事件绑定存在差异

按照规范，触摸事件分为4类：touchstart\touchmove\touchend和touchcancel事件。前三个事件分别对应桌面浏览器事件mousedown\mousemove\mouseup。每个事件都包含3个列表：touches\targetTouches\changedTouches。 注意：在IOS浏览器中用户按下Home键，或者浏览器工具条会触发touchcancel而不会触发touchend。3、 页面控件设计上存在差异a) 复选、单选、超链接等控件设置需注意点击区域面积。b) 移动端没有hover悬浮效果。

移动端开发

1、 Html

a) 在页面head部分添加必要的meta或link信息