Web前端开发规范

1.规范概述

1.1  目的

为继续提高前端开发质量，便于后期程序开发，提高团队协作效率。由程序人员及前端开发人员共同指定该文档。本规范文档一经确定，前端开发人员必须按此文档的规范进行前端页面的开发。本文档如有不对或者不适合的地方请及时提出，由程序及前端共同协商，经共同讨论制定修改方案再作细节修改。

1.2  准则

符合w3c开发标准，确保浏览器兼容。模块化编写代码,做好注释，做到简单明了有序,模块的调整尽量做到互不影响。

2.文件规范

2.1  基本要求

参考w3c的Html/Css开发规范进行开发。

图片存放images文件夹中，javacsript脚本存放在js文件夹中,样式存放在css文件夹中。

对于页面较多的定置化开发项目，按整体功能,将静态页面归类到不同文件夹中，以便于程序人员后期寻找。

所有列表页中的资讯列表,a标签均需要添加title属性，所有列表页中的图片列表的img标签均需要添加alt属性。

所有静态页面可交互的位置(如鼠标点击/鼠标经过会产生效果的位置)，统一设置为鼠标经过小手状。

当不使用href超链接属性时，尽量使用其他标签，不能使用a标签。

首页和栏目页中的资讯列表，均使用a标签的 target=”_blank”属性。

2.2  注意事项

每个静态页面的title中需要将PSD的文件名称填写进去，以便程序后期准确的识别页面。

所有静态页面按照业务逻辑进行串联，包括任何一个可链接的标签。

CSS样式书写标明注释信息，按效果图的功能模块进行开发，尽量做到任何模块的调整不会影响到其他模块或页面的正常样式。

静态页面中特效需要全部实现，包括视频播放页面(视频播放非特殊要求，均使用ckplayer插件)。

在需要固定宽高的模块，需要设置超出文字隐藏属性，如果是单行还需要设置多余显示省略号。

打开页面就自动加载的js脚本，需放在对应页面的尾部。绝不可放在其他页面公用的js文件中。

布局时需要注意连续的数字或英文不自动换行的问题 (使用word-break:break-all属性可解决此问题)。

2.3  整合提升

掌握kindeditor编辑器的应用。

掌握可拖动弹窗的特效。(网上有很多轻量级插件，如artDialog, XYTips, kindeditor也有自带的可拖动弹窗)。

将表单类元素进行封装，方便后期直接使用。(如美工做图时，可让美工使用已整理的下拉框，单选框，复选框，表格等的样式进行布局，后期前端页面开发时可直接使用)。

将常用js特效进行封装,方便后期直接使用。(如美工做图时，可让美工使用已整理的特效样式进行布局，后期也可直接引用，主要包括轮播图，滚动公告，在线客服等特效)。

收集绚丽的Html5的网页及wap特效页面。