微商城前端开发规范v1.docx

微商城前端开发规范V1.0规范目的为提高团队协作效率，?便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。基本准则符合web标准；语义化html；结构、表现、行为分离；兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。文件规范Html，css，js，images文件均归档至相应约定的目录中。html文件命名：英文驼峰式命名，文件名.html。按实际模块需求命名。css文件命名：英文驼峰式命名，文件名.css。初始化用global.css，公用样式用public.css，首页index.css，其他页面按实际模块需求命名。js文件命名：英文驼峰式命名，文件名.js。共用common.js，其他依实际模块需求命名。html书写规范文档类型声明及编码：?统一为html5的声明类型!DOCTYPE?html；编码统一为meta?charset=utf-8/，书写时利用IDE实现层次分明的缩进。微商城页头需加入meta name=format-detection content=telephone=no,email=no,adress=no /禁止设备对电话号码，邮箱的识别。微商城页头需加入metaname=”viewport”content=”width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手动缩放非特殊情况下css文件必须在head.../head之间引入，选择link方式引入而非@import形式。非特殊情况下js文件必须在页面底部引入。引入样式文件或JavaScript文件时，须略去默认类型声明，写法如下：link?rel=stylesheet?href=.../style.../stylescript?src=.../script引入JS库文件，文件名须包含库名称及版本号及是否为压缩版，比如：jquery-1.11.1.min.js；引入插件，文件名格式为库名称+插件名称，比如：jQuery.cookie.js。所有HTML标签嵌套必须是正确的，禁止出现多出或者少出闭合标签的情况。所有编码均遵循xhtml标准，标签、属性、属性命名必须由小写字母及下划线数字组成，且所有标签必须闭合，包括br(br?/)，hr(hr?/)等；属性值必须用双引号包括。充分利用无兼容性问题的html自身标签，比如span、em、strong、optgroup、label……需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去设置，如果没有，须以data-为前缀来添加自定义属性，避免使用data：等其他命名方式。语义化html，如标题根据重要性用h1-h6(同一页面只能有一个h1)，段落标记用p，列表用ul，内联元素中不可嵌套块状元素，详见附件-1。尽可能减少div的嵌套层数。在页面中尽量避免使用内嵌样式表，即在标签内使用style=…。以背景形式呈现的图片，尽量写入css样式中；重要图片必须加上alt属性；特殊符号使用：尽可能使用代码替代：比如(lt;)、(gt;)、空格(nbsp;)、(amp;)、”（quot;）等等，详见附件-2；尽量避免使用过度复杂的HTML结构；充分考虑上下文语境，避免实际运用起来样式发生变化的现象，比如；该是链接的地方没有添加A标签，导致样式中没有定义A标签的样式。CSS书写规范编码统一为utf-8。为了避免一些浏览器兼容性问题以及增加样式重用性，每个页面必须引入global.css（详见附件-3），此文件不可随意修改。class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。除部分需要按像素显示的宽度外，微商城宽度尽量按百分比显示。微商城背景图片必须采用background-size:32px 32px;来实现。class与id命名：使用英文命名，命名要语义化，简明化，但不要使用诸如first，last之类的命名。使用驼峰式和下划线分隔相结合的命名规则，即命名应以父级加子级的命名规范，如：父级的类为simple 子级的类应该为simpl