前端开发规范文档
规范目的
为提高团队协作效率，便于后端开发人员添加功能及前端后期优化维护，输出高质量的代码，特制定该文档。本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。本文档如有不对或者不合适的地方请及时提出。经讨论决定后方可更改。
基本准则
符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
一、html 文件命名及编写规范
1、命名规则
采用小写英文字母 || _的组合命名，菜单名_功能名称，后缀.html。如：manage_list.html（管理列表）、manage_add.html（新增）、manage_edit.html（修改）、manage_detail.h
tml（详情）。同时将页面放在其对应的模块划分目录中。
2、编写规范：
(1)文档类型声明及编码统一为html5声明类型“<!DOCTYPE html>”;
(2)编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;
(3)区域块、功能组件以及需要标注的地方，插入注释。
(4)在布局文件结构时，应遵循语义化标签（该用p不要用div、该用ul、li不要用p，h标签应根据标题层级合理利用）、代码结构简单、清晰明了，少用标签、少套结构（一段结构布局中 1个标签能解决的不要用2个，套2层结构能解决的不要套3层）的基本原则。
代码标签、结构嵌套示例：
目标效果图
代码结构嵌套
<ul>
<li>
    <h4>罗田县九资河徐冲药材</h4>
    <img src=”***.jpg”>
    <div>
        <h3>茯苓</h3>
        <p>小丁</p>
        <p class=”color_red”>32元/公斤</p>
</div>
</li>
</ul>
    代码分析：根据目标效果图，实现的代码部分别使用了 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 标签引入，如：<link href="../css/bootstrap.min.css" rel="stylesheet">。为方便代码的维护、扩展、调式，避免写行内样式（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文件命名及编写规范
css 属性选择器
1、命名规则
采用小写英文字母命名，后缀.js。如： common.js，如编写插件，则以“plugin_”开头，以具体功能名称结尾，如：plugin_ dialog.js。
编写规范：每个功能函数及需要作标注的地方插入注释。注意语法规范，以分号结尾。为提高性能及用户体验，JS文件及代码应放在html文件的最底部（除了一些特定的JS文件，在页面刷新时必须先加载的，需要放在head中之外。如移动端适配的“flexible.js”）。
2、JS文件的引入：
(1)在html文件中以“script”标签引入，如：<script src="../js/jquery.min.js"></script>；
(2)在html文件底部内嵌JS代码，如：
<script>
//日期控件
  $('#start1').click(function(){
      WdatePicker({
          maxDate:'#F{$dp.$D(\'end1\',{d:-1});}',
          readOnly:true
      });
  });
  $('#end1').click(function(){
      WdatePicker({
          minDate:'#F{$dp.$D(\'start1\',{d:1});}',
          readOnly:true
      });
  });
</script>
3、JS文件存放目录结构配置：
  统一将脚本文件放在JS根目录下。如文件过多，可根据项目模块划分，在根目录下建模块文件夹，将该模块JS文件对应放入。插件单独建文件夹“plugins”，所有JS插件都放在其内。文件存放结构布局参考上文中的“CSS文件存放目录结构配置”。
注：如果使用的JS插件含有独立的图片及样式文件，需将整个插件所有文件均放入JS/plugins文件夹内，不要分离该插件的资源文件。
四、图片命名
1、命名规则
采用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;
2、背景图片（采用CSS background- position定位的图片）命名：
(1)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.png……
3、前景图片（采用标签元素 img src引入的图片）命名：
命名规则：采用小写英文字母和数字相接合（可按区域块），如：list01.jpg、img01.jpg、pic01.png……
注意：页面中如果图片元素是作为动态数据来展示的，采用前景图片引入法，即<img src=”***.jpg”>。这些图片仅对前端编写html文件提供效果展示。除此之外的图片应使用背景图片定位方式导入，比如小图标等等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。