前端开发规范文档

1、前端开发规范文档规范目的为提高团队协作效率，便于后端开发人员添加功能及前端后期优化维护，输出高质量的代码，特制定该文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前端开发。本文档如有不对或者不合适的地方请及时提出。经讨论决定后方可更改。基本准则符合web标准，语义化html,结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。一、html文件命名及编写规范1、命名规则采用小写英文字母|_的组合命名，菜单名_功能名称，后缀.html。如：manage_list.html（管理歹U表）、manage_add.html（新增）、ma

2、nage_edit.html（修改）、manage_detail.html（详情）。同时将页面放在其对应的模块划分目录中。2、编写规范：（1）文档类型声明及编码统一为html5声明类型“；（2）编码统一为,书写时利用IDE实现层次分明的缩进；（3）区域块、功能组件以及需要标注的地方，插入注释。（4）在布局文件结构时，应遵循语义化标签（该用p不要用div、该用ul、li不要用p,h标签应根据标题层级合理利用）、代码结构简单、清晰明了，少用标签、少套结构（一段结构布局中1个标签能解决的不要用2个，套2层结构能解决的不要套3层）的基本原则。代码标签、结构嵌套示例：目标效果图岩田县九期徐闻中中药材厂乏

3、、一7小丁/，3/工“整元/公斤代码结构嵌套罗田县九资河徐冲药材茯苓小丁32元/公斤代码分析：根据目标效果图，实现的代码部分别使用了ul/li/h4/img/div/h3/p这些标签。首先这是一个产品列表，所以用了ulli进行包裹；其次，这块分别有两个重要的内容展示，一个是产品名称，一个是企名称，根据权重，代码层分别采用了h3、h4标签；其它的文字展示信息采用了p标签；图片采用标签img引入。整个实现，代码结构清晰、标签使用合理，符合语义化、遵循SEO搜索等原则。二、CSSt件命名及编写规范1、命名规则用小写英文字母命名（可跟据CSS作用域以及、区域模块、公用组件、等等分别命名），后缀.css

4、。如：common.css（公用）、reset.css（重置）、base.css（页面主体）、form.css（表单）、popup.css（弹层）等等。2、编写规范：（1）除重置样式使用元素选择器（htmlbodydivpulli）外，其它原则上使用类选择器（.nav.header）编写样式，如无特别需要，应避免使用ID选择器（#btn#foot）;（2）编写格式：为提高样式代码的可读性、方便开发人员查找、维护，因此采用单行编写格式，一行编写一个属性和属性值。如果一个类选择器属性只有2到3个，考虑到节省空间问题，可不换行在同行编写;（3）区域块、组件及需要标注的地方请插入注释。（4）样式命名：

5、采用“小写英文（模块、组件及功能名称）”+“_（拼接）”+“-（修饰符）规则命名。如：toggle_title,通常是指切换模块的标题样式名；toggle_title-special,通常指一个有别于其它切换模块标题的、具有独立样式的标题样式名。3、CSS文件的引入:统一在html文件中的head标签内使用link标签引入，如：。为方便代码的维护、扩展、调式，避免写行内样式（div_style=font-size:14px;width:300px;一-）,应采用divclass=list_1等方式引用。4、CSS文件存放目录结构配置：统一将样式文件放在CSS根目录下（图1所示）。如样式文件过多

6、，可根据项目模块划CS平件夹reset.csscommon.cssbase.css分，在根目录下建模块文件夹，将该模块样式文件对应放入（图2所示）。图例：CSSi件夹reset.csscommon.cssbase.cssuserCenterbase.css-popup.css图1:所有CSS文件统一在根目下图2:建了模块文件夹三、JS文件命名及编写规范1、命名规则采用小写英文字母命名，后缀.js。如：common.js,如编写插件，则以“plugin_开头，以具体功能名称结尾，如：plugin_dialog.js。编写规范：每个功能函数及需要作标注的地方插入注释。注意语法规范，以分号结尾。为提

7、高性能及用户体验，JS文件及代码应放在html文件的最底部（除了一些特定的JS文件，在页面刷新时必须先加载的，需要放在head中之外。如移动端适配的flexible.js）。2、JS文件的引入：(1)在html文件中以“script标签引入，如：;(2)在html文件底部内嵌JS代码，如：/日期控件$(#start1).click(function()WdatePicker(maxDate:#F$dp.$D(end1,d:-1);,readOnly:true););$(#end1).click(function()WdatePicker(minDate:#F$dp.$D(start1,d:1)

8、;,readOnly:true););3、JS文件存放目录结构配置：统一将脚本文件放在JS根目录下。如文件过多，可根据项目模块划分，在根目录下建模块文件夹，将该模块JS文件对应放入。插件单独建文件夹“plugins，所有JS插件都放在其内。文件存放结构布局参考上文中的“CSS文件存放目录结构配置”。注：如果使用的JSffi件含有独立的图片及样式文件，需将整个插件所有文件均放入JS/plugins文件夹内，不要分离该插件的资源文件。四、图片命名1、命名规则采用小写英文字母|数字|_的组合，其中不得包含汉字|空格|特殊字符；尽量用易懂的词汇，便于团队其他成员理解；另，命名分头尾两部分，用下划线隔开

9、，比如ad_left01.gif|btn_submit.gif;2、背景图片(采用CSSbackground-position定位的图片)命名：sprite拼图命名规则:图标：icon_sprite,如有多张，可以icon后面跟数字，如：icon01_sprite;组件：组件名称_sprite，如：nav_sprite、foot_sprite、header_sprite、form_sprite;页面内容中用到的背景图片：cont_sprite，如有多张，可以在cont后面跟数字，如：cont01_sprite;（2）单张图片命名规则：采用小写英文字母和数字相接合，如：notfand.png、phone.jpg、cont01.png、cont02.png3、前景图片（采用标签元素imgsrc引入的图片）命名：命