前端开发规范文档

前端开发规范文档

规范目的

为提高团队协作效率，便于后端开发人员添加功能及前端后期优化维护，输出高质量的代码，特制定该文档。本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。本文档如有不对或者不合适的地方请及时提出。经讨论决定后方可更改。

基本准则

符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

一、html 文件命名及编写规范

1、命名规则

采用小写英文字母|| _的组合命名，菜单名_功能名称，后缀.html。如：manage_list.html（管理列表）、manage_add.html（新增）、manage_edit.html（修改）、manage_detail.html（详情）。同时将页面放在其对应的模块划分目录中。

2、编写规范：

(1)文档类型声明及编码统一为html5声明类型“”;

(2)编码统一为, 书写时利用IDE实现层次分明的缩进;

(3)区域块、功能组件以及需要标注的地方，插入注释。

(4)在布局文件结构时，应遵循语义化标签（该用p不要用div、该用ul、li不要用p，

h标签应根据标题层级合理利用）、代码结构简单、清晰明了，少用标签、少套结构（一段结构布局中 1个标签能解决的不要用2个，套2层结构能解决的不要套3层）的基本原则。

代码标签、结构嵌套示例：

目标效果图代码结构嵌套

• 罗田县九资河徐冲药材

  

  茯苓

  小丁

  32元/公斤

代码分析：根据目标效果图，实现的代码部分别使用了ul/li /h4/ img /div /h3/ p 这些标签。首先这是一个产品列表，所以用了ul li进行包裹；其次，这块分别有两个重要的内容展示，一个是产品名称，一个是企名称，根据权重，代码层分别采用了h3、h4标签；

其它的文字展示信息采用了p标签；图片采用标签img引入。整个实现，代码结构清晰、标签使用合理，符合语义化、遵循SEO搜索等原则。

二、CSS文件命名及编写规范

1、命名规则

用小写英文字母命名（可跟据CSS作用域以及、区域模块、公用组件、等等分别命名），

后缀.css。如：common.css（公用）、reset.css（重置）、base.css（页面主体）、form.css （表单）、popup.css（弹层）等等。

2、编写规范：

(1)除重置样式使用元素选择器（html\body\div\p\ul\li……）外，其它原则上使用类

选择器（.nav\.header……）编写样式，如无特别需要，应避免使用ID选择器（#btn\#foot……）；

(2)编写格式：为提高样式代码的可读性、方便开发人员查找、维护，因此采用单行编写

格式，一行编写一个属性和属性值。如果一个类选择器属性只有2到3个，考虑到节省空间问题，可不换行在同行编写；

(3)区域块、组件及需要标注的地方请插入注释。

(4)样式命名：采用“小写英文(模块、组件及功能名称)”+“ _(拼接)”+“--(修饰符)”

规则命名。如：“toggle_title”，通常是指切换模块的标题样式名；“toggle_title--special”，通常指一个有别于其它切换模块标题的、具有独立样式的标题样式名。

3、CSS文件的引入：

统一在html文件中的head标签内使用link 标签引入，如：。为方便代码的维护、扩展、调式，避免写行内样式（div style=”font-size:14px; width:300px;”）,应采用‘div class=”list_1”’等方式引用。

4、CSS文件存放目录结构配置：

统一将样式文件放在CSS根目录下（图1所示）。如样式文件过多，可根据项目模块划分，在根目录下建模块文件夹，将该模块样式文件对应放入（图2所示）。

图例：

CSS文件夹CSS文件夹

reset.css reset.css

common.css common.css

base.css base.css

userCenter

base.css

popup.css

图1：所有CSS文件统一在根目下图2：建了模块文件夹

三、JS文件命名及编写规范

1、命名规则

采用小写英文字母命名，后缀.js。如： common.js，如编写插件，则以“plugin_”开头，以具体功能名称结尾，如：plugin_ dialog.js。

编写规范：每个功能函数及需要作标注的地方插入注释。注意语法规范，以分号结尾。为提高性能及用户体验，JS文件及代码应放在html文件的最底部（除了一些特定的JS文件，在页面刷新时必须先加载的，需要放在head中之外。如移动端适配的“flexible.js”）。

2、JS文件的引入：

(1)在html文件中以“script”标签引入，如：

src="../js/jquery.min.js">；

(2)在html文件底部内嵌JS代码，如：

3、JS文件存放目录结构配置：

统一将脚本文件放在JS根目录下。如文件过多，可根据项目模块划分，在根目录下建模块文件夹，将该模块JS文件对应放入。插件单独建文件夹“plugins”，所有JS插件都放在其内。文件存放结构布局参考上文中的“CSS文件存放目录结构配置”。

注：如果使用的JS插件含有独立的图片及样式文件，需将整个插件所有文件均放入JS/plugins 文件夹内，不要分离该插件的资源文件。

四、图片命名

1、命名规则

采用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

2、背景图片（采用CSS background-position定位的图片）命名：

(1)sprite拼图命名规则：