前端规范说明文件讲解.doc

规范的目的 规范不是标准，在不同公司代码规范是有差异的。规范的作用只是让同一个团队代码风格统一，减少协作时的复杂性，便于前端开发人员输出更易维护、更高性能和更安全的前端代码，特定制该文档。本文档一经确认，前端开发人员必须按照本文档规范进行前台页面开发，本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档. WEB前端人员具备如下7点技能： 页面标记语言：编写语义良好、简洁的HTML代码。 页面样式：合理的利用CSS的组合和继承特性来编写简洁、可维护性好的CSS代码。 前端编程：JavaScript是一种基于对象和事件驱动的、灵活的脚本语言，是动态交互的技术基础。开发人员在熟悉语法和编码之外，还需要了解并解决在不同浏览器中的JavaScript兼容问题。 跨平台、跨浏览器：如何在众多移动平台、众多屏幕尺寸上展现友好的WEB站点。虽然目前前端框架已经解决了大部分兼容问题，还是需要了解熟悉常见的浏览器兼容方法，主要包括：IE8的兼容，HTML5中新特性的兼容。 前端框架：前端框架很大程度上降低了前端开发难度。作为前端工程师需要熟悉一些常用的框架的使用方法，并且要了解如何编写常用框架的扩展插件。 调试工具：常用浏览器自带调试工具。 沟通能力：WEB前端开发介于UI设计和后端逻辑开发之间。因此WEB前端在开发中必定会和UI设计及后端开发合作。前端开发需要和UI设计沟通，确定效果是否可以实现及实现的代价，并对UI设计提出建议；还需要和后端开发沟通，确定前后端交互的接口以及传输的数据实体结构等。良好的沟通会让这些过程变得轻松。 前端代码规范主要针对的是HTML、CSS和JavaScript代码。规范的前端代码应该具有以下特征： 符合标准：所谓的标准指的是W3C制定的Web标准。主要由3个部分组成：结构标准、表现标准和行为标准。 结构标准包含XML、XHTML、HTML标准。HTML5是XHTML和HTML的最新标准。目前使用的标准是HTML5标准； 表现标准主要是指CSS样式标准，目前使用的标准是CSS3； 行为标准主要包括ECMAScript和DOM标准，目前使用的ECMAScript标准是ECMAScript262第5版，DOM标准是DOM级别2。 格式规范统一：前端代码格式主要包括命名、代码缩进、空格和空行的使用及代码注释。 命名主要有HTML元素ID和Class名，JavaScript中函数和变量的命名； HTML、CSS和JavaScript代码中都需要缩进代码来体现代码层次关系； 空格和空行主要用在CSS和JavaScript中，用来提高代码可读性； CSS和JavaScript代码中都需要添加必要的注释来解说代码文件及代码片段，HTML代码中使用注释的情况比较少。 高性能：高性能体现在浏览器的响应速度上，包括网页的加载速度和页面的交互响应速度。网页加载所占用的时间包括后端处理请求的时间、代码从服务器端传输的时间、HTML和CSS组合展现的时间以及JavaScript加载和运行时间。规范的前端代码针对这些方面来编写高性能的前端代码。提高用户前端体验。 高安全性：是指跨站点攻击、CooKie劫持。这些攻击通过设置javascript变量、HTML标签的值和属性，CSS属性值等方式伪造恶意代码来达到攻击的目的。因此，规范的前端代码至少要针对这些方面做必要的安全校验和编码，提高代码的安全性。 高效的前端开发 前端代码的结构组织和文件命名：在同一个项目中代码的组织结构一定要清晰，同类型的代码文件或者相同模块的代码文件尽量归类到相同的文件夹中，文件的命名规则须统一并且命名要有意义。 代码文件组织结构：前端代码主要包含javascript、CSS、HTML等文件，以及这些代码相关图片、Flash、音视频等资源文件.合理的组织文件，既要考虑结构清晰，还要考虑代码复用。惯用做法是同类文件放在一起，并按照模块划分文件结构。 代码文件的命名：原则上需要表明文件对应的模块内容、对应的版本号、和文件的格式等。如果文件为子模块文件则在文件名中用点号或者短横线来表明父子关系。 jQuery-2.0.0.min.js Bootstrap-responsive.css 合理使用框架：JavaScript框架是JavaScript代码的工具集和函数集，一般包括DOM元素的操作、DOM事件的封装、AJAX操作、UI控件封装以及一些功能算法扩展等。成熟的JavaScript框架已经经过了大量得功能测试、性能测试，也经过各主流浏览器的兼容测试，在项目中应用前端框架，不仅加快了项目的开发速度，同时避免了出现各种浏览器的兼容问题。由于框架的功能侧重不一，给项目选择合适的框架，需要要考虑如下几点： 项目的需求：调查项目是否需要使用ajax操作