前端规范手册

一、规范目的

1.1概述.....................................................................................................................................。。。1二、文件规范

2.1一般规范......................................................................................................................................12.2css书写规范..........................................................................................................................22.3html书写规范.........................................................................................................................62.4JavaScript书写规范.............................................................................................................10

一、规范目的1.1概述

为提高团队协作效率,便于前端后期优化维护,输出高质量的代码,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.二、文件规范2.1一般规范

以下章节列举了一些可应用在HTML,JavaScript和CSS上的通用规则。2.2.1文件/资源命名

文件名称统一用并且只能用小写的英文字母、数字或下划线的组合，其中不得包含汉字、空格和特殊字符，文件命名需要基本符合语意化；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。所有的文件名应该都遵循同一命名约定2.2.2文件/资源命名

一次缩进两个空格。推荐2.2.3文件/资源命名

注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。编写自解释代码只是一个传说，没有任何代码是可以完全自解释的。而代码注释，则是永远也不嫌多。1.html注释:注释格式,'--'只能在注释的始末位置,不可置入注释文字区域;2.css注释:注释格式/*这儿是注释*/;3.JavaScript注释,单行注释使用'//这儿是单行注释',多行注释使用/*这儿有多行注释*/;2.2.4文件/资源命名

公共文件需放到public公共包，对应的文件放到对应于css，js，images文件夹中2.2.5关注点分离

这里的关注点主要指的是：信息（HTML结构）、外观（CSS）和行为（JavaScript）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。就是说，尽量在文档和模板中只包含结构性的HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。清晰的分层意味着：不使用超过一到两张样式表（i.e.main.css,vendor.css）不使用超过一到两个脚本（学会用合并脚本）不使用行内样式（）不在元素上使用style属性（）不使用行内脚本（）不使用表象元素（i.e.,,